{"version":3,"file":"static/css/main.f6bddf76.css","mappings":"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","sources":["styles/_config.scss","styles/_card.scss","../node_modules/include-media/dist/_include-media.scss","styles/_charts.scss","styles/main.scss","styles/_responsivenew.scss"],"sourcesContent":["@import 'node_modules/include-media/dist/_include-media.scss';\n//fonts\n@font-face {\n  font-family: AktivGrotesk;\n  src: url('../fonts/aktiv/AktivGrotesk_Md.ttf');\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: AktivGrotesk;\n  src: url('../fonts/aktiv/AktivGrotesk_Rg.ttf');\n  font-weight: 400;\n}\n\n@font-face {\n  font-family: Chivo;\n  src: url('../fonts/chivo/Chivo-Light.otf');\n  font-weight: light;\n}\n@font-face {\n  font-family: Chivo;\n  src: url('../fonts/chivo/chivo_regular.ttf');\n  font-weight: 400;\n}\n@font-face {\n  font-family: Chivo;\n  src: url('../fonts/chivo/chivo_bold.ttf');\n  font-weight: 700;\n}\n\n@font-face {\n  font-family: Chivo;\n  src: url('../fonts/chivo/Chivo-Medium.ttf');\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: 'Vampiro One';\n  src: url('../fonts/vampiro/VampiroOne-Regular.ttf');\n  font-weight: 400;\n}\n\n// breakpoints for responsive devices\n$breakpoints: (\n  phone: 320px,\n  largephone: 400px,\n  shortread: 516px,\n  /* iPhone 13 Pro, Galaxy S20, etc.*/ minitablet: 576px,\n  schwerpunkt: 624px,\n  /* iPad Mini and small tablets on portrait*/ tablet: 768px,\n  /* iPad Pro and small tablets on landscape*/ desktop: 940px,\n);\n\n//colors\n$wine-red: #a80d35;\n$taz-pink: #f00048;\n$dark-pink: #e5144b;\n$red: #ff7b7b;\n$pink: rgb(255, 192, 192);\n$pale-pink: #ffd5c8;\n\n$dark-blue: #2a4d9c;\n$electric-blue: #3762fb;\n$marine-blue: #5dccd3;\n$dust-blue: rgb(71, 84, 117);\n$blue: rgb(170, 210, 238);\n\n$brown: #241212;\n$taz-orange: #f6a119;\n$orange-shade: rgba($taz-orange, 0.4);\n$lighter-orange: rgba(255, 232, 201, 0.7);\n$pale-olive: rgb(211, 186, 153);\n$lighter-orange-full: #fff4e5;\n$light: #fefaf6;\n\n$mint-green: #1a8579;\n\n$default-text: #484848;\n\n//new buildings color\n$solarthermie: lighten($electric-blue, 30%);\n$geothermie: $marine-blue;\n$umweltthermie: $mint-green;\n$keine: darken($electric-blue, 20%);\n$erneuerbare: $electric-blue;\n$holz: $blue;\n$biomasse: darken($marine-blue, 10%); //lighten($dust-blue,20%);\n$biomethan: $dust-blue;\n// fossils = [\"Gas\",\"Strom\",\"Öl\",\"Fernwärme/Fernkälte\",\"Sonstige Heizenergie\"]\n$fernkälte: $taz-orange;\n$fossile: $red;\n$strom: #ffd5c8;\n$oel: $pink;\n$heizenergie: $pale-olive;\n$gas: lighten($dark-pink, 5%);\n\n//size variables\n$postcardview-postcardwidth: 80vw;\n$thumbnail-postcardwidth: 30vw;\n$tablet-postcardview-postcardwidth: 83vw;\n$minitablet-postcardview-postcardwidth: 87vw;\n$thumbnail-minitablet-postcardwidth: 40vw;\n$schwerpunkt-postcardview-postcardwidth: 90vw;\n$portait-postcardwidth: 85vw;\n$portrait-minitablet-postcardwidth: 65vw;\n$portait-postcardheight: 85vh;\n\n//effects\n$boxshadow: (\n  default: (\n    3px 3px 0px rgba($pale-olive, 0.2),\n  ),\n  hover: (\n    4.5px 4.5px 0px rgba($pale-olive, 0.7),\n  ),\n);\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\ntext {\n  font-family: 'Chivo';\n  color: $default-text;\n}\n\np,\ntext {\n  font-family: 'AktivGrotesk';\n  color: $default-text;\n}\n\n//keyframed animation\n@keyframes bounce {\n  0% {\n    -webkit-transform: translateY(-30px);\n    transform: translateY(-30px);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  40% {\n    -webkit-transform: translateY(-24px);\n    transform: translateY(-24px);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  65% {\n    -webkit-transform: translateY(-18px);\n    transform: translateY(-18px);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  82% {\n    -webkit-transform: translateY(-9px);\n    transform: translateY(-9px);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  93% {\n    -webkit-transform: translateY(-6px);\n    transform: translateY(-6px);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  25%,\n  55%,\n  75%,\n  87% {\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n\n  100% {\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n}\n\n//reusable code\n@mixin title {\n  font-family: 'Chivo';\n}\n\n@mixin wordart-style-setup {\n  pointer-events: none;\n  z-index: 1;\n  .gruss-thumb {\n    font-size: 0.9rem;\n    margin: 0;\n    z-index: 2;\n  }\n\n  .wordart {\n    font-size: 1.5rem;\n    width: 100%;\n    margin: 0px;\n  }\n}\n\n@mixin wordart-style-1 {\n  @include wordart-style-setup;\n  -webkit-transform: rotate(-2deg) translate(0px, 10px);\n  transform: rotate(-2deg) translate(0px, 10px);\n\n  .gruss-thumb,\n  .gruss-thumb:after {\n    color: $dark-blue;\n    margin-right: 0.5rem;\n    content: 'Wie läuft der Klimaschutz in';\n  }\n\n  .wordart {\n    -webkit-transform: scale(0.9, 1.2);\n    transform: scale(0.9, 1.2);\n    display: inline-block;\n    padding-left: 7px;\n    padding-right: 7px;\n    // padding-top: 7px;\n    font-family: 'Vampiro One', sans-serif;\n    letter-spacing: -0.25vw;\n    background-image: linear-gradient(90deg, $red 0%, $taz-orange 100%);\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    -webkit-background-clip: text;\n    clip-path: inset(1px);\n\n    &:not(.main) {\n      &[class*='additional-'] {\n        display: none;\n      }\n    }\n  }\n}\n\n@mixin button {\n  border: none;\n  background: none;\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  right: 0.5rem;\n  bottom: 0.5rem;\n\n  &:hover {\n    img,\n    h2,\n    .button,\n    .img {\n      opacity: 70%;\n    }\n  }\n\n  &.img {\n    height: 25px;\n    color: 'blue';\n  }\n}\n\n//reusable styles for postcards\n@mixin postcard {\n  z-index: -10;\n  -webkit-transition: 0.2s;\n  transition: 0.2s;\n  background-color: $light;\n  border: 1px solid $pale-olive;\n  border-radius: 0px;\n  box-shadow: map-get($map: $boxshadow, $key: default);\n\n  &:hover {\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    box-shadow: map-get($map: $boxshadow, $key: hover);\n  }\n}\n\n@mixin stacked-postcard {\n  position: absolute;\n  -webkit-transition: 1000ms;\n  transition: 1000ms;\n}\n\n@mixin portrait-postcard {\n}\n\n@mixin newbuildings-label-update($energy, $color) {\n  $class: unquote($energy);\n  .#{$class} {\n    border-color: $color;\n    box-shadow: 2px 2px 0px darken($color, 10%);\n\n    p {\n      color: $color;\n    }\n  }\n}\n\n@mixin keyframes($name) {\n  @keyframes #{$name} {\n    @content;\n  }\n}\n\n@mixin animate($animation, $duration, $method, $times) {\n  animation: $animation $duration $method $times;\n}\n\n@mixin fade-in {\n  @include keyframes(fade) {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  @include animate(fade, 0.3s, ease-in, forwards);\n}\n\n// reusable layouts for vis\n@mixin vertical-layout {\n  display: inline-flex;\n  .description {\n    width: 35%;\n    height: 100%;\n    margin-left: 1rem;\n\n    .title {\n      // border-bottom: 1px solid $default-text;\n\n      h4 {\n        padding: 0rem 0.5rem;\n      }\n\n      span {\n        color: $dark-blue;\n\n        &.locationLabel {\n          color: $dust-blue;\n          font-weight: bold;\n        }\n      }\n    }\n\n    .caption {\n      margin-left: 0.5rem;\n      p {\n        font-size: 14px;\n      }\n    }\n\n    .legend {\n      margin-left: 0.5rem;\n      img {\n        width: 100%;\n        height: auto;\n      }\n    }\n  }\n\n  .visualization-container {\n    width: 65%;\n  }\n\n  .chart {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.is-thumbnail {\n    display: block;\n    .description {\n      display: none;\n    }\n\n    .visualization-container {\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart {\n      width: 65%;\n      height: 100%;\n      position: relative;\n      left: 20%;\n    }\n  }\n}\n\n@mixin horizontal-bottom-layout {\n  .description {\n    width: calc(100% - 2rem);\n    height: 20%;\n    margin: 0 1rem;\n\n    .title {\n      width: 100%;\n      border-top: 1px solid $default-text;\n      margin: 0 1rem 0 1rem 0;\n\n      h4 {\n        margin: 0;\n        padding-top: 0.5rem;\n        padding-bottom: 1rem;\n        width: 88%;\n      }\n\n      span {\n        color: $dark-blue;\n        &.locationLabel {\n          color: $dust-blue;\n          font-weight: bold;\n        }\n      }\n    }\n  }\n\n  .chart {\n    width: 100%;\n    height: 100%;\n  }\n\n  .visualization-container {\n    height: 80%;\n  }\n}\n\n@mixin responsive-layout {\n  @include media('>phone', '<shortread') {\n    @include horizontal-bottom-layout;\n  }\n\n  @include media('>=shortread') {\n    @include vertical-layout;\n  }\n}\n","@import '_config.scss';\n\n.carousel-container {\n  width: 100%;\n  height: 100%;\n}\n\n.card-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 15px 10px 20px 0px;\n  margin: 0;\n  overflow: hidden;\n\n  &.carousel {\n    height: 100%;\n    // if carousel removes flex specs\n    flex-direction: unset;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-content: center;\n    padding: 0;\n    &.card-front {\n      &.side-odd {\n        display: none;\n      }\n    }\n  }\n\n  //comparison view\n  &.stacked {\n    &.twocards {\n      .card {\n        &-ordered {\n          //original ratio changed for styling\n          width: calc($thumbnail-postcardwidth + 10vw);\n          height: calc(($thumbnail-postcardwidth + 10vw) / 1.5);\n        }\n      }\n    }\n  }\n}\n\n// flipping\n.card {\n  position: absolute;\n  align-self: center;\n\n  &-active {\n    // scaling to avoid overflow\n    transform: translateY(0px);\n    -webkit-transform: translateY(0px);\n    z-index: 1;\n    opacity: 1;\n    @include stacked-postcard;\n\n    .side-container {\n      background: transparent;\n      .card-front {\n        &.side-odd {\n          backface-visibility: visible;\n          -webkit-backface-visibility: visible;\n          transform: rotateY(0deg);\n          -webkit-transform: rotateY(-180deg);\n        }\n      }\n    }\n    &.animating {\n      @include keyframes(wiggle4) {\n        0% {\n          transform: translateY(0px);\n        }\n        70% {\n          transform: translateY(-3px);\n        }\n        100% {\n          transform: translateY(0px);\n        }\n      }\n      @include animate(wiggle4, 0.6s, ease-in, forwards);\n    }\n  }\n\n  &-left {\n    transform: rotate(-4deg) scale(1);\n    -webkit-transform: rotate(-4deg) scale(1);\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    z-index: -2;\n    @include stacked-postcard;\n\n    .card-front,\n    .card-back {\n      opacity: 0;\n    }\n    &.animating {\n      @include keyframes(wiggle1) {\n        0% {\n          transform: rotate(-4deg);\n        }\n        50% {\n          transform: rotate(-1deg);\n        }\n        100% {\n          transform: rotate(-2deg) translate(-2px, -5px);\n        }\n      }\n      @include animate(wiggle1, 0.6s, ease-in, forwards);\n    }\n  }\n\n  &-right {\n    transform: rotate(4deg) scale(1);\n    -webkit-transform: rotate(4deg) scale(1);\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    z-index: -1;\n    @include stacked-postcard;\n\n    .card-front,\n    .card-back {\n      opacity: 0;\n    }\n    &.animating {\n      @include keyframes(wiggle2) {\n        0% {\n          transform: rotate(4deg);\n        }\n        70% {\n          transform: rotate(-5deg);\n        }\n        100% {\n          transform: rotate(-4deg);\n        }\n      }\n      @include animate(wiggle2, 0.6s, ease-in, forwards);\n    }\n  }\n\n  &-back {\n    transform: rotate(-2deg) translate(-2px, -5px) scale(1);\n    -webkit-transform: rotate(-2deg) translate(-2px, -5px) scale(1);\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    z-index: -3;\n    @include stacked-postcard;\n\n    .card-front,\n    .card-back {\n      opacity: 0;\n    }\n    &.animating {\n      @include keyframes(wiggle3) {\n        0% {\n          transform: rotate(-2deg) translate(-2px, -5px);\n        }\n        100% {\n          transform: rotate(4deg);\n        }\n      }\n      @include animate(wiggle3, 0.6s, ease-in, forwards);\n    }\n  }\n\n  &-ordered {\n    //original ratio changed for styling\n    width: $thumbnail-postcardwidth;\n    height: calc($thumbnail-postcardwidth/1.5);\n    max-width: 316px;\n    max-height: 223px;\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    position: relative;\n    z-index: 0;\n\n    &:hover {\n      z-index: 8;\n    }\n  }\n}\n\n.card-preview {\n  @include postcard;\n\n  height: 100%;\n  width: 100%;\n  display: flex; //for using flex stretch below\n\n  .side-outer {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n\n    .overlay-container {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      z-index: 1;\n\n      .overlay-inner {\n        width: 95%;\n        height: calc(100% - 0.5rem);\n        margin: 0 auto;\n        .postcard-title {\n          h4 {\n            -webkit-transition: color 500ms linear;\n            transition: color 500ms linear;\n            color: darken($pale-olive, 20%);\n            margin: 0.5rem;\n          }\n        }\n\n        &:hover {\n          .postcard-title {\n            h4 {\n              -webkit-transition: color 500ms linear;\n              transition: color 500ms linear;\n              color: darken($pale-olive, 40%);\n            }\n          }\n        }\n\n        .button-download {\n          display: none;\n        }\n      }\n      .section-thumb {\n        width: 100%;\n        height: 100%;\n\n        .indicator-ranking {\n          display: inline-block;\n          position: absolute;\n          bottom: 1rem;\n          z-index: 5;\n          border: 2px solid gray;\n          border-radius: 5px;\n          background-color: $light;\n          max-width: 90%;\n\n          p {\n            font-family: 'Chivo';\n          }\n\n          -webkit-transform: rotate(5deg);\n          transform: rotate(5deg);\n\n          &.mittleren {\n            border-color: $taz-orange;\n            p {\n              color: $taz-orange;\n            }\n          }\n\n          &.schlechtesten {\n            border-color: $red;\n\n            p {\n              color: $red;\n            }\n          }\n\n          &.besten {\n            border-color: $mint-green;\n\n            p {\n              color: $mint-green;\n            }\n          }\n\n          p {\n            color: gray;\n            font-size: 12px;\n            margin: 0.5rem;\n            display: table-cell;\n            vertical-align: middle;\n            line-height: 14px;\n            padding: 10px;\n            height: 14px;\n          }\n        }\n\n        &.comparison {\n          .word-art-title {\n            @include wordart-style-1;\n            -webkit-transform: scale(0.9) rotate(-2deg) translate(0px, -15px);\n            transform: scale(0.9) rotate(-2deg) translate(0px, -15px);\n            z-index: 2;\n            // text-align: left;\n            margin-top: 1rem;\n\n            .gruss-thumb {\n              display: none;\n            }\n\n            .wordart {\n              /* Fallback: Set a background color. */\n              background-color: $red;\n              /* Create the gradient. */\n              background-image: linear-gradient(90deg, $taz-orange, $red);\n\n              /* Set the background size and repeat properties. */\n              background-size: 100%;\n              background-repeat: repeat;\n              filter: drop-shadow(2px 2px 1px rgba($taz-orange, 0.2));\n              line-height: 1.5rem;\n              padding-bottom: 0.14em;\n\n              /* Use the text as a mask for the background. */\n              /* This will show the gradient as a text color rather than element bg. */\n              -webkit-background-clip: text;\n              -webkit-text-fill-color: transparent;\n              -moz-background-clip: text;\n              -moz-text-fill-color: transparent;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .side-inner {\n    width: 100%;\n    height: 100%;\n    // transform: translateX(40%);\n    // -webkit-transform:translateX(40%);\n    background: linear-gradient(rgba($light, 0.2), $lighter-orange);\n    clip-path: circle(55% at 90% 50%);\n    -webkit-transition: clip-path 1000ms;\n    transition: clip-path 1000ms;\n  }\n\n  &:hover,\n  &:active {\n    .side-inner {\n      clip-path: circle(115% at 90% 50%);\n      background-color: $light;\n    }\n  }\n\n  &:active {\n    scale: 1.25;\n    -webkit-transition: scale ease 500ms;\n    transition: scale ease 500ms;\n  }\n}\n\n.side {\n  padding-left: 0.5em;\n}\n\n.side-container {\n  @include postcard;\n\n  //148mm x 105mm (ratio 1.4)\n  width: $postcardview-postcardwidth; //60vw\n  height: calc($postcardview-postcardwidth/1.6);\n\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n\n  transform: perspective(1000px) rotateY(var(--rotate-y, 0));\n  -webkit-transform: perspective(1000px) rotateY(var(--rotate-y, 0));\n\n  transition: transform ease 500ms;\n  transition: -webkit-transform ease 500ms;\n\n  box-shadow: -4px 4px 0px rgba($pale-olive, 0.4);\n\n  &:hover {\n    box-shadow: -4px 4px 0px rgba($pale-olive, 0.4);\n\n    // scale: 2;\n  }\n\n  &.flip {\n    //flipped boxshader, no shader on hover\n    box-shadow: map-get($map: $boxshadow, $key: default);\n  }\n\n  & .card-front,\n  .card-back {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    display: flex; //for using flex stretch below\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    transform: rotateX(0deg); //fix backface visibility firefox\n    -webkit-transform: rotateX(0deg);\n  }\n\n  & .card-back {\n    transform: rotateY(180deg);\n    -webkit-transform: rotateY(180deg);\n  }\n\n  &-ordered {\n    margin: 1rem;\n  }\n}\n\n.card-active {\n  .side-outer {\n    width: 100%;\n    height: 100%;\n\n    .overlay-container {\n      height: calc(10% - 0.5rem);\n      width: 100%;\n      background-color: $light;\n      margin: 0 auto;\n\n      .overlay-inner {\n        background-color: $light;\n        width: calc(100% - 2rem);\n        height: 80%;\n        display: inline-flex;\n        margin: 0.5rem 1rem;\n        // padding: 0 0.5rem;\n        border-bottom: 1px solid $default-text;\n        position: relative;\n        z-index: 10;\n\n        .postcard-title {\n          // margin-left: 0.5rem;\n          display: inline-flex;\n          h4 {\n            font-weight: bold;\n            margin: 0;\n            margin-top: 0.2rem;\n          }\n\n          &.animating {\n            .word-art-title {\n              @include fade-in;\n            }\n          }\n\n          .postcard-miniature {\n            display: inline-flex;\n            .word-art-title {\n              transform-origin: left;\n              -webkit-transform-origin-x: left;\n              transform: translate(-10px, -5px);\n              -webkit-transform: translate(-10px, -5px);\n              position: relative;\n              margin-top: 0;\n              margin-right: 0.5rem;\n              text-align: left;\n              white-space: nowrap;\n              // top: 0rem;\n              // right: 6%;\n              .gruss-thumb {\n                display: none;\n              }\n\n              .wordart {\n                font-size: 1.5rem;\n              }\n            }\n          }\n        }\n\n        .button-toggle-container {\n          margin-left: 0.5rem;\n          display: inline-flex;\n          width: 100%;\n\n          .arrow-pointer {\n            background-image: url('../img/buttons/caret-right.svg');\n            background-repeat: no-repeat;\n            background-size: contain;\n            margin-top: 0.3rem;\n            width: 1rem;\n            height: calc(100% - 0.3rem);\n          }\n\n          svg {\n            .toggle {\n              display: block;\n            }\n\n            .toggleResponsive {\n              display: none;\n            }\n\n            .togglePhone {\n              display: none;\n            }\n\n            margin-left: 0.5rem;\n            .toggle-rect {\n              cursor: pointer;\n              -webkit-transition: all 0.2s;\n              transition: all 0.2s;\n\n              &:hover {\n                -webkit-transition: all 0.2s;\n                transition: all 0.2s;\n                fill: lighten($taz-orange, 20%);\n              }\n            }\n\n            text {\n              font-family: 'Chivo';\n              fill: $default-text;\n              font-weight: normal;\n              font-size: 1em;\n            }\n\n            .controller-bg {\n              cursor: pointer;\n              fill: url(#MyGradient);\n              stroke: $default-text;\n            }\n          }\n        }\n\n        .button-download {\n          margin-left: auto;\n\n          .inner-button {\n            width: 100%;\n            display: flex;\n            height: 100%;\n            flex-direction: row;\n            align-items: baseline;\n            justify-content: flex-end;\n            position: relative;\n\n            &:hover {\n              .download-label {\n                -webkit-transition: visibility 0s, opacity 0.5s;\n                transition: visibility 0s, opacity 0.5s;\n                opacity: 1;\n                visibility: visible;\n                display: inline-block;\n              }\n            }\n\n            .download-label {\n              pointer-events: none;\n              -webkit-transition: visibility 0s, opacity 0.5s;\n              transition: visibility 0s, opacity 0.5s;\n              background-color: $light;\n              border: 1px solid $pale-olive;\n\n              padding: 0.5rem 0.5rem;\n              font-size: 12px;\n              margin: auto 0.5rem;\n              position: absolute;\n              //right: 0rem;\n              //width: 15%;\n              right: 25px;\n              width: 80px;\n\n              z-index: 2;\n              opacity: 0;\n              visibility: hidden;\n              text-align: left;\n              display: none;\n            }\n\n            img {\n              height: auto;\n              width: 20px;\n              max-width: 50px;\n              min-width: 20px;\n            }\n          }\n        }\n      }\n    }\n\n    .side-inner {\n      background-color: $light;\n      width: 100%;\n      height: calc(90% + 0.5rem);\n      position: relative;\n      top: 0;\n\n      // back-side with explanation\n      .details-container {\n        height: 100%;\n\n        &.animating {\n          ol,\n          .locator-zoom,\n          .text-container {\n            @include fade-in;\n          }\n        }\n\n        .flex-container {\n          display: inline-flex;\n          width: 100%;\n          height: 92%;\n\n          .text-container {\n            width: 60%;\n            height: 100%;\n            overflow: hidden;\n\n            .text-inner-container {\n              position: relative;\n              margin: 0 auto;\n              width: 85%;\n              height: 100%;\n\n              .section-title {\n                width: 80%;\n                border-bottom: 1px solid $pale-olive;\n                h2 {\n                  display: none;\n                  margin-top: 0;\n                  padding-top: 2rem;\n                  margin-bottom: 0.5rem;\n                }\n              }\n\n              .section-text {\n                height: 100%;\n                position: relative;\n                overflow-y: auto;\n\n                p {\n                  font-size: 14px;\n                  span {\n                    color: $taz-orange;\n\n                    &.mittleren {\n                      color: $taz-orange;\n                    }\n\n                    &.besten,\n                    &.energy-data-renewables,\n                    &.mo-km-umweltfreundlich,\n                    &.ab-data-co,\n                    &.ab-data-bio,\n                    &.land-data-unter,\n                    &.land-data-oeko,\n                    &.ge-data-erneuerbare {\n                      color: $mint-green;\n                    }\n\n                    &.schlechtesten,\n                    &.gerics-data,\n                    &.energy-data-fossil,\n                    &.autos,\n                    &.land-data-tierzahl,\n                    &.ge-data-heat {\n                      color: $red;\n                    }\n\n                    &.energy-data-geheim {\n                      color: lighten($default-text, 20%);\n                    }\n\n                    &.location-name {\n                      color: $dark-blue;\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          .data-container {\n            width: 40%;\n            height: calc(97% + 1.3px);\n            // background-color: aliceblue;\n            border-left: 1px solid $default-text;\n\n            .locator-map {\n              border-bottom: 1px solid $default-text;\n              position: relative;\n              height: 40%;\n            }\n\n            .lk-list {\n              margin: 0px 0px 0px 0px;\n              width: 100%;\n              height: 60%;\n              overflow: hidden;\n              position: relative;\n\n              .list-inner-container {\n                overflow-y: scroll;\n                position: relative;\n                height: 100%;\n\n                .list-similar-container {\n                  // border-bottom: 1px solid $default-text;\n                  width: 100%;\n                  height: 100%;\n\n                  h5 {\n                    width: calc(100% - 0.5rem);\n                    margin: 0;\n                    padding: 0.45rem 0rem 0.45rem 0.5rem;\n                    border-bottom: 1px solid $default-text;\n                    color: white;\n                    background-color: $dark-blue;\n                  }\n\n                  ul {\n                    margin: 0rem 0rem 0rem 0rem;\n                  }\n\n                  ol {\n                    -webkit-transition: 0.5s;\n                    transition: 0.5s;\n                    padding-top: 0.5rem;\n                    border-bottom: 1px solid $default-text;\n                    color: $default-text;\n\n                    &.ui-true {\n                      &:hover {\n                        background-color: $lighter-orange-full;\n                        cursor: pointer;\n                        -webkit-transition: 0.5s;\n                        transition: 0.5s;\n                        text-indent: 0.5rem;\n                        //padding-left: 1rem;\n                      }\n                    }\n                  }\n\n                  &.mittleren {\n                    h5 {\n                      color: white;\n                      background-color: $taz-orange;\n                    }\n                  }\n\n                  &.besten {\n                    h5 {\n                      color: white;\n                      background-color: $mint-green;\n                    }\n                  }\n\n                  &.schlechtesten {\n                    h5 {\n                      color: white;\n                      background-color: $red;\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .footer-container {\n          height: calc(10% + 2px);\n          width: calc(40% - 0.5px);\n          background-color: $light;\n          position: absolute;\n          right: 0;\n          bottom: 0;\n          border-left: 1px solid #484848;\n          border-top: 1px solid #484848;\n\n          .footer-inner-container {\n            display: flex;\n            height: 100%;\n\n            .info-backside {\n              margin: 10px 0px 10px 0px;\n              font-size: 12px;\n              line-height: 24px;\n              border: 1px solid $mint-green;\n              border-radius: 20px;\n              padding: 0rem 0.5rem;\n              background: linear-gradient(to left, $mint-green, rgba($mint-green, 0.5));\n              -webkit-background-clip: text;\n              background-clip: text;\n              -webkit-text-fill-color: transparent;\n\n              p {\n                margin: 0 auto;\n              }\n            }\n          }\n        }\n      }\n\n      // CSS Transition classes\n      &.side-transition-enter {\n        opacity: 0;\n      }\n\n      &.side-transition-enter-active,\n      &.side-transition-enter-done {\n        opacity: 1;\n        transition: opacity 20ms;\n        -webkit-transition: opacity 20ms;\n      }\n\n      &.side-transition-exit {\n        opacity: 1;\n        transition: opacity 20ms;\n        -webkit-transition: opacity 20ms;\n      }\n\n      &.side-transition-exit-active {\n        opacity: 0;\n        transition: opacity 20ms;\n        -webkit-transition: opacity 20ms;\n      }\n\n      // Here edits for the export images\n      .export {\n        width: 100%;\n        height: 90%;\n        position: absolute;\n        right: 50%;\n        top: 50%;\n        transform: translate(50%, -53%);\n        -webkit-transform: translate(50%, -53%);\n        background-color: $light;\n        // box-shadow: 2px 2px 0px rgba($pale-olive, .5);\n\n        .details-container {\n          .flex-container {\n            height: 100%;\n\n            .text-container {\n              .text-inner-container {\n                .section-title {\n                  h2 {\n                    font-size: 1rem;\n                  }\n                }\n\n                .section-text {\n                  p {\n                    font-size: 12px;\n                    margin: 0.5rem auto;\n                  }\n                }\n              }\n            }\n          }\n          .footer-container {\n            display: none;\n          }\n        }\n\n        .data-container {\n          .lk-list {\n            .list-inner-container {\n              .list-similar-container {\n                h5 {\n                  border-top: 0.15px solid $default-text;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .social-media-layout {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: -10;\n    background-color: $light;\n\n    .side-inner {\n      height: 100%;\n    }\n\n    .logo-container {\n      position: absolute;\n      background-image: url(../img/taz/taz-klimaland-logo-bigger.jpg);\n      background-repeat: no-repeat;\n      background-size: contain;\n      width: 100%;\n      height: 1.3rem;\n      min-height: 1rem;\n      bottom: 8px;\n      left: 0px;\n    }\n  }\n}\n","@charset \"UTF-8\";\n\n//     _            _           _                           _ _\n//    (_)          | |         | |                         | (_)\n//     _ _ __   ___| |_   _  __| | ___   _ __ ___   ___  __| |_  __ _\n//    | | '_ \\ / __| | | | |/ _` |/ _ \\ | '_ ` _ \\ / _ \\/ _` | |/ _` |\n//    | | | | | (__| | |_| | (_| |  __/ | | | | | |  __/ (_| | | (_| |\n//    |_|_| |_|\\___|_|\\__,_|\\__,_|\\___| |_| |_| |_|\\___|\\__,_|_|\\__,_|\n//\n//      Simple, elegant and maintainable media queries in Sass\n//                        v1.4.9\n//\n//        https://eduardoboucas.github.io/include-media\n//\n//         Authors: Eduardo Boucas (@eduardoboucas)\n//                  Kitty Giraudel (@kittygiraudel)\n//\n//      This project is licensed under the terms of the MIT license\n////\n/// include-media library public configuration\n/// @author Eduardo Boucas\n/// @access public\n////\n\n\n///\n/// Creates a list of global breakpoints\n///\n/// @example scss - Creates a single breakpoint with the label `phone`\n///  $breakpoints: ('phone': 320px);\n///\n$breakpoints: (\n  'phone': 320px,\n  'tablet': 768px,\n  'desktop': 1024px\n) !default;\n\n\n///\n/// Creates a list of static expressions or media types\n///\n/// @example scss - Creates a single media type (screen)\n///  $media-expressions: ('screen': 'screen');\n///\n/// @example scss - Creates a static expression with logical disjunction (OR operator)\n///  $media-expressions: (\n///    'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'\n///  );\n///\n$media-expressions: (\n  'screen': 'screen',\n  'print': 'print',\n  'handheld': 'handheld',\n  'landscape': '(orientation: landscape)',\n  'portrait': '(orientation: portrait)',\n  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',\n  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'\n) !default;\n\n\n///\n/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals\n///\n/// @example scss - Interval for pixels is defined as `1` by default\n///  @include media('>128px') {}\n///\n///  /* Generates: */\n///  @media (min-width: 129px) {}\n///\n/// @example scss - Interval for ems is defined as `0.01` by default\n///  @include media('>20em') {}\n///\n///  /* Generates: */\n///  @media (min-width: 20.01em) {}\n///\n/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`\n///  @include media('>2.0rem') {}\n///\n///  /* Generates: */\n///  @media (min-width: 2.1rem) {}\n///\n$unit-intervals: (\n  'px': 1,\n  'em': 0.01,\n  'rem': 0.1,\n  '': 0\n) !default;\n\n///\n/// Defines whether support for media queries is available, useful for creating separate stylesheets\n/// for browsers that don't support media queries.\n///\n/// @example scss - Disables support for media queries\n///  $im-media-support: false;\n///  @include media('>=tablet') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* Generates: */\n///  .foo {\n///    color: tomato;\n///  }\n///\n$im-media-support: true !default;\n\n///\n/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or\n/// intercept the breakpoint will be displayed, any others will be ignored.\n///\n/// @example scss - This media query will show because it intercepts the static breakpoint\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'desktop';\n///  @include media('>=tablet') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* Generates: */\n///  .foo {\n///    color: tomato;\n///  }\n///\n/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'tablet';\n///  @include media('>=desktop') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* No output */\n///\n$im-no-media-breakpoint: 'desktop' !default;\n\n///\n/// Selects which media expressions are allowed in an expression for it to be used when media queries\n/// are not supported.\n///\n/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'desktop';\n///  $im-no-media-expressions: ('screen');\n///  @include media('>=tablet', 'screen') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///   /* Generates: */\n///   .foo {\n///     color: tomato;\n///   }\n///\n/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'desktop';\n///  $im-no-media-expressions: ('screen');\n///  @include media('>=tablet', 'retina2x') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* No output */\n///\n$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;\n\n////\n/// Cross-engine logging engine\n/// @author Kitty Giraudel\n/// @access private\n////\n\n\n///\n/// Log a message either with `@error` if supported\n/// else with `@warn`, using `feature-exists('at-error')`\n/// to detect support.\n///\n/// @param {String} $message - Message to log\n///\n@function im-log($message) {\n  @if feature-exists('at-error') {\n    @error $message;\n  } @else {\n    @warn $message;\n    $_: noop();\n  }\n\n  @return $message;\n}\n\n\n///\n/// Wrapper mixin for the log function so it can be used with a more friendly\n/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function\n/// within functions because it is not possible to include a mixin in a function\n/// and use the mixin everywhere else because it's much more elegant.\n///\n/// @param {String} $message - Message to log\n///\n@mixin log($message) {\n  @if im-log($message) {}\n}\n\n\n///\n/// Function with no `@return` called next to `@warn` in Sass 3.3\n/// to trigger a compiling error and stop the process.\n///\n@function noop() {}\n\n///\n/// Determines whether a list of conditions is intercepted by the static breakpoint.\n///\n/// @param {Arglist}   $conditions  - Media query conditions\n///\n/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint\n///\n@function im-intercepts-static-breakpoint($conditions...) {\n  $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);\n\n  @if not $no-media-breakpoint-value {\n    @if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}\n  }\n\n  @each $condition in $conditions {\n    @if not map-has-key($media-expressions, $condition) {\n      $operator: get-expression-operator($condition);\n      $prefix: get-expression-prefix($operator);\n      $value: get-expression-value($condition, $operator);\n\n      @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or\n          ($prefix == 'min' and $value > $no-media-breakpoint-value) {\n        @return false;\n      }\n    } @else if not index($im-no-media-expressions, $condition) {\n      @return false;\n    }\n  }\n\n  @return true;\n}\n\n////\n/// Parsing engine\n/// @author Kitty Giraudel\n/// @access private\n////\n\n\n///\n/// Get operator of an expression\n///\n/// @param {String} $expression - Expression to extract operator from\n///\n/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`\n///\n@function get-expression-operator($expression) {\n  @each $operator in ('>=', '>', '<=', '<', '≥', '≤') {\n    @if str-index($expression, $operator) {\n      @return $operator;\n    }\n  }\n\n  // It is not possible to include a mixin inside a function, so we have to\n  // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because\n  // functions cannot be called anywhere in Sass, we need to hack the call in\n  // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with\n  // Sass 3.3, change this line in `@if im-log(..) {}` instead.\n  $_: im-log('No operator found in `#{$expression}`.');\n}\n\n\n///\n/// Get dimension of an expression, based on a found operator\n///\n/// @param {String} $expression - Expression to extract dimension from\n/// @param {String} $operator - Operator from `$expression`\n///\n/// @return {String} - `width` or `height` (or potentially anything else)\n///\n@function get-expression-dimension($expression, $operator) {\n  $operator-index: str-index($expression, $operator);\n  $parsed-dimension: str-slice($expression, 0, $operator-index - 1);\n  $dimension: 'width';\n\n  @if str-length($parsed-dimension) > 0 {\n    $dimension: $parsed-dimension;\n  }\n\n  @return $dimension;\n}\n\n\n///\n/// Get dimension prefix based on an operator\n///\n/// @param {String} $operator - Operator\n///\n/// @return {String} - `min` or `max`\n///\n@function get-expression-prefix($operator) {\n  @return if(index(('<', '<=', '≤'), $operator), 'max', 'min');\n}\n\n\n///\n/// Get value of an expression, based on a found operator\n///\n/// @param {String} $expression - Expression to extract value from\n/// @param {String} $operator - Operator from `$expression`\n///\n/// @return {Number} - A numeric value\n///\n@function get-expression-value($expression, $operator) {\n  $operator-index: str-index($expression, $operator);\n  $value: str-slice($expression, $operator-index + str-length($operator));\n\n  @if map-has-key($breakpoints, $value) {\n    $value: map-get($breakpoints, $value);\n  } @else {\n    $value: to-number($value);\n  }\n\n  $interval: map-get($unit-intervals, unit($value));\n\n  @if not $interval {\n    // It is not possible to include a mixin inside a function, so we have to\n    // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because\n    // functions cannot be called anywhere in Sass, we need to hack the call in\n    // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with\n    // Sass 3.3, change this line in `@if im-log(..) {}` instead.\n    $_: im-log('Unknown unit `#{unit($value)}`.');\n  }\n\n  @if $operator == '>' {\n    $value: $value + $interval;\n  } @else if $operator == '<' {\n    $value: $value - $interval;\n  }\n\n  @return $value;\n}\n\n\n///\n/// Parse an expression to return a valid media-query expression\n///\n/// @param {String} $expression - Expression to parse\n///\n/// @return {String} - Valid media query\n///\n@function parse-expression($expression) {\n  // If it is part of $media-expressions, it has no operator\n  // then there is no need to go any further, just return the value\n  @if map-has-key($media-expressions, $expression) {\n    @return map-get($media-expressions, $expression);\n  }\n\n  $operator: get-expression-operator($expression);\n  $dimension: get-expression-dimension($expression, $operator);\n  $prefix: get-expression-prefix($operator);\n  $value: get-expression-value($expression, $operator);\n\n  @return '(#{$prefix}-#{$dimension}: #{$value})';\n}\n\n///\n/// Slice `$list` between `$start` and `$end` indexes\n///\n/// @access private\n///\n/// @param {List} $list - List to slice\n/// @param {Number} $start [1] - Start index\n/// @param {Number} $end [length($list)] - End index\n///\n/// @return {List} Sliced list\n///\n@function slice($list, $start: 1, $end: length($list)) {\n  @if length($list) < 1 or $start > $end {\n    @return ();\n  }\n\n  $result: ();\n\n  @for $i from $start through $end {\n    $result: append($result, nth($list, $i));\n  }\n\n  @return $result;\n}\n\n////\n/// String to number converter\n/// @author Kitty Giraudel\n/// @access private\n////\n\n\n///\n/// Casts a string into a number\n///\n/// @param {String | Number} $value - Value to be parsed\n///\n/// @return {Number}\n///\n@function to-number($value) {\n  @if type-of($value) == 'number' {\n    @return $value;\n  } @else if type-of($value) != 'string' {\n    $_: im-log('Value for `to-number` should be a number or a string.');\n  }\n\n  $first-character: str-slice($value, 1, 1);\n  $result: 0;\n  $digits: 0;\n  $minus: ($first-character == '-');\n  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);\n\n  // Remove +/- sign if present at first character\n  @if ($first-character == '+' or $first-character == '-') {\n    $value: str-slice($value, 2);\n  }\n\n  @for $i from 1 through str-length($value) {\n    $character: str-slice($value, $i, $i);\n\n    @if not (index(map-keys($numbers), $character) or $character == '.') {\n      @return to-length(if($minus, -$result, $result), str-slice($value, $i))\n    }\n\n    @if $character == '.' {\n      $digits: 1;\n    } @else if $digits == 0 {\n      $result: $result * 10 + map-get($numbers, $character);\n    } @else {\n      $digits: $digits * 10;\n      $result: $result + map-get($numbers, $character) / $digits;\n    }\n  }\n\n  @return if($minus, -$result, $result);\n}\n\n\n///\n/// Add `$unit` to `$value`\n///\n/// @param {Number} $value - Value to add unit to\n/// @param {String} $unit - String representation of the unit\n///\n/// @return {Number} - `$value` expressed in `$unit`\n///\n@function to-length($value, $unit) {\n  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);\n\n  @if not index(map-keys($units), $unit) {\n    $_: im-log('Invalid unit `#{$unit}`.');\n  }\n\n  @return $value * map-get($units, $unit);\n}\n\n///\n/// This mixin aims at redefining the configuration just for the scope of\n/// the call. It is helpful when having a component needing an extended\n/// configuration such as custom breakpoints (referred to as tweakpoints)\n/// for instance.\n///\n/// @author Kitty Giraudel\n///\n/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`\n/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`\n///\n/// @example scss - Extend the global breakpoints with a tweakpoint\n///  @include media-context(('custom': 678px)) {\n///    .foo {\n///      @include media('>phone', '<=custom') {\n///       // ...\n///      }\n///    }\n///  }\n///\n/// @example scss - Extend the global media expressions with a custom one\n///  @include media-context($tweak-media-expressions: ('all': 'all')) {\n///    .foo {\n///      @include media('all', '>phone') {\n///       // ...\n///      }\n///    }\n///  }\n///\n/// @example scss - Extend both configuration maps\n///  @include media-context(('custom': 678px), ('all': 'all')) {\n///    .foo {\n///      @include media('all', '>phone', '<=custom') {\n///       // ...\n///      }\n///    }\n///  }\n///\n@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {\n  // Save global configuration\n  $global-breakpoints: $breakpoints;\n  $global-media-expressions: $media-expressions;\n\n  // Update global configuration\n  $breakpoints: map-merge($breakpoints, $tweakpoints) !global;\n  $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;\n\n  @content;\n\n  // Restore global configuration\n  $breakpoints: $global-breakpoints !global;\n  $media-expressions: $global-media-expressions !global;\n}\n\n////\n/// include-media public exposed API\n/// @author Eduardo Boucas\n/// @access public\n////\n\n\n///\n/// Generates a media query based on a list of conditions\n///\n/// @param {Arglist}   $conditions  - Media query conditions\n///\n/// @example scss - With a single set breakpoint\n///  @include media('>phone') { }\n///\n/// @example scss - With two set breakpoints\n///  @include media('>phone', '<=tablet') { }\n///\n/// @example scss - With custom values\n///  @include media('>=358px', '<850px') { }\n///\n/// @example scss - With set breakpoints with custom values\n///  @include media('>desktop', '<=1350px') { }\n///\n/// @example scss - With a static expression\n///  @include media('retina2x') { }\n///\n/// @example scss - Mixing everything\n///  @include media('>=350px', '<tablet', 'retina3x') { }\n///\n@mixin media($conditions...) {\n  @if ($im-media-support and length($conditions) == 0) or\n      (not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {\n    @content;\n  } @else if ($im-media-support and length($conditions) > 0) {\n    @media #{unquote(parse-expression(nth($conditions, 1)))} {\n      // Recursive call\n      @include media(slice($conditions, 2)...) {\n        @content;\n      }\n    }\n  }\n}\n","@import '_config.scss';\n\n//colors\n// renewables = [\"Solarthermie\",\"Geothermie\",\"Umweltthermie (Luft/Wasser)\",\"Holz\",\"Biogas/Biomethan\",\"Sonstige Biomasse\",\"Keine Energie (einschl. Passivhaus)\"]\n\n@mixin energy-buildings($color) {\n  background-color: $color;\n\n  &.caption {\n    background-color: transparent;\n    .energy-number {\n      color: $color;\n      filter: brightness(0.75);\n    }\n  }\n\n  path,\n  rect {\n    stroke: $color;\n    cursor: pointer;\n  }\n\n  circle,\n  text {\n    fill: $color;\n  }\n}\n\n@mixin newbuildings-label($color) {\n  border-color: $color;\n  box-shadow: 2px 2px 0px darken($color, 10%);\n\n  p {\n    color: $color;\n  }\n}\n\n.chart {\n  text {\n    font-size: 12px;\n  }\n\n  foreignObject {\n    pointer-events: none;\n    overflow: visible;\n\n    div {\n      min-width: 20px;\n      p {\n        font-size: 12px;\n      }\n    }\n  }\n}\n\n.card-collection {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.inner-card-collection {\n  width: 100%;\n}\n\n.chart-outer-container {\n  height: 100%;\n}\n\n.chart-container {\n  height: 100%;\n\n  .svg-container {\n    height: 100%;\n\n    .visualization-container {\n      cursor: default;\n    }\n\n    .is-thumbnail {\n      .description {\n        display: none;\n      }\n      .visualization-container {\n        cursor: pointer;\n        height: 100%;\n      }\n    }\n    // Specific styling for sections' charts\n    &.Mo-chart {\n      .car-density {\n        height: 100%;\n        @include responsive-layout;\n\n        .title {\n          span {\n            &.first-value {\n              color: $red;\n            }\n\n            &.second-value {\n              color: $taz-orange;\n            }\n          }\n        }\n\n        .legend {\n          background-image: url('../img/legends/MoCarDensity.svg');\n          background-repeat: no-repeat;\n          position: relative;\n          height: 100%;\n          width: 50%;\n          margin: 1rem;\n        }\n\n        .chart {\n          cursor: default;\n          transform: skew(-11deg, 0deg);\n          -webkit-transform: skew(-11deg, 0deg);\n\n          rect {\n            rx: 3px;\n            ry: 3px;\n          }\n\n          .grid {\n            stroke: $default-text;\n            fill: $light;\n          }\n\n          .gridded-data {\n            mix-blend-mode: multiply;\n          }\n\n          &.active-chart {\n            transform: translate(-20px, -10px) skew(-11deg, 0deg);\n            -webkit-transform: translate(-20px, -10px) skew(-11deg, 0deg);\n            overflow: visible;\n          }\n\n          &.thumbnail-chart {\n            cursor: pointer;\n            .cars-container {\n              transform: translate(50px, 30px) scale(0.7);\n              -webkit-transform: translate(50px, 30px) scale(0.7);\n            }\n          }\n        }\n\n        &.is-thumbnail {\n          .chart {\n            left: 0;\n            width: 100%;\n            height: 100%;\n\n            .grid {\n              stroke: $default-text;\n              stroke-width: 0.5;\n            }\n\n            .gridded-data {\n              mix-blend-mode: multiply;\n              stroke: $default-text;\n              stroke-width: 0.5;\n            }\n          }\n        }\n      }\n\n      .modal-split {\n        height: 100%;\n        @include horizontal-bottom-layout;\n\n        .description {\n          height: 15%;\n        }\n\n        .visualization-container {\n          cursor: default;\n          height: 85%;\n          .chart {\n            overflow: visible;\n            text {\n              filter: brightness(0.75);\n              stroke: none;\n            }\n\n            .main-x-axis,\n            .axis,\n            .mapped-axis,\n            .bar-percentage-trip {\n              line {\n                stroke: $default-text;\n              }\n            }\n\n            .bar-percentage-trip {\n              text {\n                fill: transparent;\n              }\n            }\n\n            foreignObject {\n              -webkit-transform: translateY(-0.5%);\n              transform: translateY(-0.5%);\n\n              div {\n                width: 40px;\n                background-color: rgba(255, 255, 255);\n                border: 1px solid black;\n                text-align: center;\n\n                &.Fuß {\n                  background-color: lighten(#2a4d9c, 50);\n                  border-color: #2a4d9c;\n                  p {\n                    color: #2a4d9c;\n                  }\n                }\n\n                &.Fahrrad {\n                  background-color: lighten(#5f88c6, 50);\n                  border-color: #5f88c6;\n\n                  p {\n                    color: #5f88c6;\n                  }\n                }\n\n                &.ÖPV {\n                  background-color: lighten(#2a4d9c, 50);\n                  border-color: #2a4d9c;\n\n                  p {\n                    color: #2a4d9c;\n                  }\n                }\n\n                &.Mitfahrer {\n                  background-color: lighten(#ffd0d0, 50);\n                  border-color: darken(#ffd0d0, 10);\n\n                  p {\n                    color: darken(#ffd0d0, 10);\n                  }\n                }\n\n                &.Fahrer {\n                  background-color: lighten(#ff7b7b, 25);\n                  border-color: #ff7b7b;\n\n                  p {\n                    color: #ff7b7b;\n                  }\n                }\n\n                p {\n                  padding-top: 1px;\n                  margin: 0;\n                }\n              }\n            }\n\n            .no-icon {\n              display: none;\n            }\n\n            .axis {\n              svg {\n                stroke-miterlimit: 10;\n                stroke-width: 0.3px;\n                fill: none;\n                filter: brightness(0.75);\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &.En-chart {\n      .energy-industry,\n      .primary-energy {\n        height: 100%;\n        @include horizontal-bottom-layout;\n\n        .visualization-container {\n          height: 85%;\n          cursor: crosshair;\n\n          .strom-export-box {\n            position: absolute;\n            top: 0;\n            right: 0;\n            padding: 0.5rem;\n            width: 25%;\n            font-size: 14px;\n            border: 1px solid darken($dark-blue, 10%);\n            border-radius: 1px;\n            background-color: rgba($light, 0.8);\n            -webkit-transition: background-color 500ms ease;\n            transition: background-color 500ms ease;\n            display: inline-flex;\n            margin-top: 2rem;\n            margin-right: 2rem;\n\n            &:hover {\n              background-color: $light;\n              box-shadow: 2px 2px 0px darken($dark-blue, 10%);\n              -webkit-transition: all 500ms ease;\n              transition: all 500ms ease;\n            }\n\n            p {\n              color: darken($dark-blue, 10%);\n              font-size: 12px;\n              margin: 0.2rem;\n              margin-bottom: 0;\n              text-align: left;\n              display: inline-table;\n            }\n          }\n        }\n\n        .description {\n          height: 15%;\n\n          .title {\n            border-color: transparent;\n            span {\n              &.second-value {\n                color: $mint-green;\n              }\n            }\n          }\n          &.footnote {\n            color: $default-text;\n          }\n        }\n\n        .chart {\n          overflow: visible;\n          .x-axis {\n            line {\n              stroke: $default-text;\n              stroke-width: 0.75px;\n              stroke-dasharray: 5;\n            }\n\n            text {\n              fill: $default-text;\n              font-size: 12px;\n            }\n          }\n          .y-axis {\n            line {\n              stroke: $light;\n              stroke-dasharray: 5;\n              stroke-width: 0.75px;\n            }\n\n            text {\n              fill: $light;\n              font-size: 12px;\n            }\n          }\n\n          .streams-container {\n            cursor: crosshair;\n            .stream {\n              path {\n                // stroke: $default-text;\n                stroke-width: 0.75;\n                stroke: #484848;\n              }\n\n              &.Geh-stream {\n                path {\n                  stroke-width: 1;\n                  mix-blend-mode: multiply;\n                  fill: #b0c6cc;\n                  stroke: darken(#b0c6cc, 20%);\n                  stroke-dasharray: 2 2;\n                }\n              }\n\n              &.Str-stream {\n                path {\n                  // mix-blend-mode: color;\n                  fill: #2a4d9c;\n                }\n              }\n\n              &.Erd-stream {\n                path {\n                  fill: #ffd5c8;\n                }\n              }\n\n              &.Ern-stream {\n                path {\n                  fill: #007f87;\n                }\n              }\n\n              &.Hei-stream {\n                path {\n                  fill: #ff9b7b;\n                }\n              }\n\n              &.Son-stream {\n                path {\n                  fill: $red;\n                }\n              }\n\n              &.Wär-stream {\n                path {\n                  fill: #5f88c6;\n                }\n              }\n\n              &.Koh-stream {\n                path {\n                  fill: #e14552;\n                }\n              }\n            }\n          }\n\n          .streams-labels-container,\n          .years-labels-container {\n            foreignObject {\n              pointer-events: none;\n              overflow: visible;\n              transform: translateY(-10px);\n              -webkit-transform: translateY(-10px);\n\n              &.invisible {\n                opacity: 0;\n                transition: opacity 200ms;\n                -webkit-transition: opacity 200ms;\n              }\n\n              &.visible {\n                opacity: 1;\n                transition: opacity 200ms;\n                -webkit-transition: opacity 200ms;\n              }\n\n              .Str-stream {\n                border: 1px solid darken($dark-blue, 10%);\n                box-shadow: 2px 2px 0px darken($dark-blue, 10%);\n                p {\n                  color: darken($dark-blue, 10%);\n                }\n              }\n\n              .Geh-stream {\n                border: 1px solid darken(#b0c6cc, 20%);\n                box-shadow: 2px 2px 0px darken(#b0c6cc, 20%);\n                p {\n                  color: darken(#b0c6cc, 40%);\n                }\n              }\n\n              .Bra-stream {\n                border: 1px solid $brown;\n                box-shadow: 2px 2px 0px rgba($brown, 0.7);\n\n                p {\n                  color: $brown;\n                }\n              }\n\n              .Erd-stream,\n              .Gas-stream {\n                border: 1px solid darken($pale-pink, 10%);\n                box-shadow: 2px 2px 0px rgba(darken($pale-pink, 10%), 0.7);\n\n                p {\n                  color: darken($pale-pink, 20%);\n                }\n              }\n\n              .Son-stream,\n              .And-stream {\n                border: 1px solid darken($red, 10%);\n                box-shadow: 2px 2px 0px darken($red, 10%);\n\n                p {\n                  color: $red;\n                }\n              }\n\n              .Koh-stream,\n              .Ste-stream {\n                border: 1px solid darken($red, 40%);\n                box-shadow: 2px 2px 0px darken($red, 40%);\n\n                p {\n                  color: darken($red, 40%);\n                }\n              }\n\n              .Ker-stream {\n                border: 1px solid darken($taz-orange, 10%);\n                box-shadow: 2px 2px 0px darken($taz-orange, 10%);\n\n                p {\n                  color: darken($taz-orange, 10%);\n                }\n              }\n\n              .Hei-stream {\n                border: 1px solid darken($taz-orange, 10%);\n                box-shadow: 2px 2px 0px rgba(darken($taz-orange, 20%), 0.7);\n\n                p {\n                  color: darken($taz-orange, 20%);\n                }\n              }\n\n              .Ern-stream,\n              .Ges-stream {\n                border: 1px solid darken($mint-green, 10%);\n                box-shadow: 2px 2px 0px rgba(darken($mint-green, 10%), 0.7);\n\n                path {\n                  stroke: darken($mint-green, 10%);\n                }\n\n                p {\n                  color: darken($mint-green, 10%);\n                }\n              }\n\n              .Wär-stream {\n                border: 1px solid darken($dust-blue, 10%);\n                box-shadow: 2px 2px 0px rgba(darken($dust-blue, 10%), 0.7);\n\n                p {\n                  color: darken($dust-blue, 10%);\n                }\n              }\n\n              .Min-stream {\n                border: 1px solid darken($lighter-orange-full, 60%);\n                box-shadow: 2px 2px 0px rgba(darken($lighter-orange-full, 60%), 0.7);\n\n                p {\n                  color: darken($lighter-orange-full, 60%);\n                }\n              }\n              // display: inline-flex;\n              div {\n                // width: 100%;\n                // height: 100%;\n                border-radius: 1px;\n                background-color: white;\n                border: 1px solid $default-text;\n                display: inline-flex;\n\n                p {\n                  font-size: 12px;\n                  padding: 0.1rem;\n                  margin: 0.2rem;\n                  margin-bottom: 0;\n                  text-align: left;\n                  display: inline-table;\n                }\n              }\n            }\n          }\n\n          .years-labels-container {\n            foreignObject {\n              white-space: nowrap;\n            }\n            div {\n              min-width: 40px;\n            }\n\n            .interactive-labels {\n              opacity: 0;\n              pointer-events: none;\n\n              div {\n                p {\n                  margin: 0.2rem;\n                  line-height: 12px;\n                  font-size: 10px;\n                }\n              }\n\n              &.active-label {\n                opacity: 1;\n              }\n            }\n          }\n        }\n\n        &.is-thumbnail {\n          .visualization-container {\n            height: 100%;\n            width: 100%;\n\n            .x-axis,\n            .y-axis,\n            .label,\n            .interactive-labels {\n              display: none;\n            }\n          }\n\n          .description {\n            display: none;\n          }\n        }\n      }\n    }\n\n    &.Ab-chart {\n      .biotonne-weight {\n        height: 100%;\n        @include horizontal-bottom-layout;\n\n        .description {\n          height: 17%;\n        }\n\n        .visualization-container {\n          height: 82%;\n          cursor: crosshair;\n        }\n\n        .title {\n          span {\n            &.first-value {\n              color: $mint-green;\n            }\n\n            &.second-value {\n              color: $taz-orange;\n            }\n            &.footnote {\n              color: $default-text;\n            }\n          }\n        }\n\n        .chart {\n          overflow: visible;\n          circle {\n            stroke: $default-text;\n          }\n\n          .year-el {\n            -webkit-transition: fill opacity stroke-dasharray 0.5s;\n            transition: fill opacity stroke-dasharray 0.5s;\n            circle {\n              //fill: $lighter-orange-full;\n              fill: $pale-pink;\n            }\n\n            .interactive-labels {\n              foreignObject {\n                pointer-events: none;\n                overflow: visible;\n                transform: translateX(-15px) translateY(-10px);\n                -webkit-transform: translateX(-15px) translateY(-10px);\n\n                div {\n                  min-width: 55px;\n                  text-align: center;\n                  background-color: white;\n                  border: 0.5px solid $pale-olive;\n\n                  p {\n                    font-size: 12px;\n                    margin: 0.2rem;\n                  }\n                }\n              }\n              opacity: 0;\n              rect {\n                stroke: $pale-olive;\n              }\n            }\n          }\n\n          .year-el:hover {\n            -webkit-transition: fill opacity stroke-dasharray 0.5s;\n            transition: fill opacity stroke-dasharray 0.5s;\n\n            line {\n              stroke-dasharray: none;\n            }\n            circle {\n              fill: $pale-olive;\n            }\n            .interactive-labels {\n              opacity: 1;\n            }\n          }\n\n          rect {\n            transition: 0.5s;\n            -webkit-transition: 0.5s;\n            -webkit-transition-timing-function: ease;\n            transition-timing-function: ease;\n          }\n\n          .controls-container {\n            // transform: translate();\n            .pie-controller {\n              cursor: pointer;\n            }\n\n            .legend {\n              -webkit-transform: translateY(2.5%);\n              transform: translateY(2.5%);\n              .biotonne {\n                -webkit-transform: translateX(10%);\n                transform: translateX(10%);\n                .biotonne-text {\n                  -webkit-transform: translateX(12%);\n                  transform: translateX(12%);\n                }\n              }\n\n              .gartenPark {\n                -webkit-transform: translateX(16%);\n                transform: translateX(16%);\n                .gartenPark-text {\n                  -webkit-transform: translateX(18%);\n                  transform: translateX(18%);\n                }\n              }\n\n              .highest-value {\n                -webkit-transform: translateX(0%);\n                transform: translateX(0%);\n                .highest-value-text {\n                  -webkit-transform: translateX(2%);\n                  transform: translateX(2%);\n                }\n              }\n            }\n\n            .detail-label {\n              cursor: pointer;\n              -webkit-transform: translateX(5%) translateY(5%);\n              transform: translateX(5%) translateY(5%);\n            }\n\n            .pie-controller {\n              -webkit-transform: translateX(60%) translateY(-1.5%);\n              transform: translateX(60%) translateY(-1.5%);\n            }\n          }\n\n          .pie,\n          .legend {\n            .biotonne,\n            .gartenPark {\n              transition: 0.5s;\n              -webkit-transition: 0.5s;\n              transition-timing-function: ease;\n              -webkit-transition-timing-function: ease;\n              opacity: 0;\n            }\n\n            &.show-pies,\n            &.show-legend {\n              path {\n                stroke: none;\n              }\n              .biotonne,\n              .gartenPark {\n                opacity: 1;\n              }\n            }\n          }\n\n          .controller-bg {\n            fill: url(#MyGradient);\n            stroke: #484848;\n          }\n\n          line {\n            stroke-dasharray: 2px 2px;\n            stroke: $default-text;\n          }\n\n          path,\n          circle {\n            // fill: white;\n            stroke: $default-text;\n\n            &.biotonne {\n              fill: $mint-green;\n            }\n\n            &.gartenPark {\n              fill: $taz-orange;\n            }\n\n            &.highestValue {\n              fill: $red;\n            }\n\n            &.pie-button {\n              fill: $light;\n              stroke: none;\n              opacity: 0;\n            }\n          }\n\n          .max {\n            circle,\n            text {\n              fill: $red;\n            }\n\n            line {\n              stroke: $red;\n            }\n          }\n\n          .y-axis {\n            line {\n              stroke: $pale-olive;\n              stroke-dasharray: none;\n              stroke-width: 0.5;\n            }\n          }\n        }\n\n        &.is-thumbnail {\n          .visualization-container {\n            height: 100%;\n\n            .y-axis {\n              display: none;\n            }\n\n            .year-el {\n              pointer-events: none;\n              text,\n              .interactive-labels {\n                display: none;\n              }\n            }\n          }\n\n          .description {\n            display: none;\n          }\n        }\n      }\n    }\n\n    &.Ge-chart {\n      .newbuildings-energy {\n        height: 100%;\n        @include responsive-layout;\n\n        .description {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n\n        .legend {\n          position: relative;\n          margin-top: auto;\n          margin-bottom: 20%;\n          .legend-inner {\n            font-size: 14px;\n            width: 100%;\n\n            .legend-elements-container {\n              display: flex;\n              flex-direction: column;\n\n              .legend-element {\n                cursor: pointer;\n                display: flex;\n                background-color: transparent;\n                align-items: first baseline;\n\n                &:hover {\n                  p {\n                    font-weight: bold;\n                  }\n                }\n\n                .element-color {\n                  min-width: 10px;\n                  height: 10px;\n                  border-radius: 100%;\n                }\n\n                p {\n                  margin: 0;\n                  margin-left: 5px;\n\n                  &.selected {\n                    font-weight: bold;\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .caption {\n          span {\n            color: $dark-blue;\n          }\n        }\n\n        .chart {\n          overflow: visible;\n          cursor: crosshair;\n\n          foreignObject {\n            overflow: visible;\n            @include newbuildings-label-update(fossile, $fossile);\n            @include newbuildings-label-update(gas, $gas);\n            @include newbuildings-label-update(geothermie, $geothermie);\n            @include newbuildings-label-update(erneuerbare, $erneuerbare);\n            @include newbuildings-label-update(umweltthermie, $umweltthermie);\n            @include newbuildings-label-update(fernkälte, $fernkälte);\n            @include newbuildings-label-update(holz, $holz);\n            @include newbuildings-label-update(solarthermie, $solarthermie);\n            @include newbuildings-label-update(biomethan, $biomethan);\n            @include newbuildings-label-update(biomasse, $biomasse);\n            @include newbuildings-label-update(keine, $keine);\n            @include newbuildings-label-update(oel, $oel);\n            @include newbuildings-label-update(heizenergie, $heizenergie);\n            @include newbuildings-label-update(strom, $strom);\n\n            div {\n              border-radius: 2px;\n              background-color: white;\n              border: 1px solid $default-text;\n              box-shadow: 2px 2px 0px $default-text;\n              display: inline-flex;\n              cursor: pointer;\n\n              opacity: 0;\n              &.default,\n              &.optional:hover {\n                opacity: 1;\n              }\n\n              p {\n                font-size: 11px;\n                line-height: 11px;\n                margin: 0.2rem 0.1rem 0.1rem 0.1rem;\n              }\n              @include newbuildings-label-update(fossile, $fossile);\n              @include newbuildings-label-update(gas, $gas);\n              @include newbuildings-label-update(geothermie, $geothermie);\n              @include newbuildings-label-update(erneuerbare, $erneuerbare);\n              @include newbuildings-label-update(umweltthermie, $umweltthermie);\n              @include newbuildings-label-update(fernkälte, $fernkälte);\n              @include newbuildings-label-update(holz, $holz);\n              @include newbuildings-label-update(solarthermie, $solarthermie);\n              @include newbuildings-label-update(biomethan, $biomethan);\n              @include newbuildings-label-update(biomasse, $biomasse);\n              @include newbuildings-label-update(keine, $keine);\n              @include newbuildings-label-update(oel, $oel);\n              @include newbuildings-label-update(heizenergie, $heizenergie);\n              @include newbuildings-label-update(strom, $strom);\n            }\n          }\n\n          text {\n            font-size: 12px;\n          }\n\n          path {\n            stroke-width: 3px;\n            cursor: pointer;\n\n            &.hitbox {\n              stroke-width: 10;\n              stroke-opacity: 0;\n            }\n          }\n\n          .axis {\n            line {\n              stroke: $default-text;\n            }\n\n            .x-axis line {\n              stroke-dasharray: 5;\n            }\n\n            .year-marker {\n              cursor: pointer;\n              circle {\n                filter: brightness(0.75);\n              }\n\n              .marker-label {\n                opacity: 0;\n                cursor: pointer;\n              }\n\n              &.default,\n              &.optional:hover {\n                .marker-label {\n                  opacity: 1;\n                }\n              }\n            }\n          }\n        }\n\n        .fossile,\n        div.fossile {\n          @include energy-buildings($fossile);\n        }\n\n        .gas,\n        div.gas {\n          @include energy-buildings($gas);\n        }\n\n        .geothermie,\n        div.geothermie {\n          @include energy-buildings($geothermie);\n        }\n\n        .erneuerbare,\n        div.erneuerbare {\n          @include energy-buildings($erneuerbare);\n          margin-bottom: 1rem;\n        }\n\n        .umweltthermie,\n        div.umweltthermie {\n          @include energy-buildings($umweltthermie);\n        }\n\n        .fernkälte,\n        div.fernkälte {\n          @include energy-buildings($fernkälte);\n        }\n\n        .holz,\n        div.holz {\n          @include energy-buildings($holz);\n        }\n\n        .solarthermie,\n        div.solarthermie {\n          @include energy-buildings($solarthermie);\n        }\n\n        .biomethan,\n        div.biomethan {\n          @include energy-buildings($biomethan);\n        }\n\n        .biomasse,\n        div.biomasse {\n          background-color: $biomasse;\n\n          path,\n          rect {\n            stroke: $biomasse;\n          }\n\n          circle,\n          text {\n            fill: $biomasse;\n          }\n        }\n\n        .keine,\n        div.keine {\n          @include energy-buildings($keine);\n        }\n        .öl,\n        div.öl {\n          @include energy-buildings($oel);\n        }\n        .heizenergie,\n        div.heizenergie {\n          @include energy-buildings($heizenergie);\n        }\n\n        .strom,\n        div.strom {\n          @include energy-buildings($strom);\n        }\n\n        &.is-thumbnail {\n          .visualization-container {\n            .chart {\n              width: 100%;\n              left: 0;\n\n              .streams-container {\n                cursor: default;\n              }\n\n              .axis {\n                .x-axis,\n                text,\n                rect,\n                line {\n                  display: none;\n                }\n              }\n            }\n          }\n        }\n      }\n\n      .avg-heating {\n        height: 100%;\n        @include horizontal-bottom-layout;\n\n        .chart {\n          overflow: visible;\n          cursor: crosshair;\n        }\n\n        .description {\n          height: 15%;\n        }\n\n        .visualization-container {\n          height: 85%;\n          svg {\n            .non-clipped-elements {\n              text {\n                font-size: 10px;\n              }\n            }\n\n            .clipped-container {\n              .single-bar {\n                -webkit-transition: opacity 0.5s;\n                transition: opacity 0.5s;\n                .interactive-labels {\n                  opacity: 0;\n                  text {\n                    font-size: 12px;\n                    fill: $default-text;\n                  }\n\n                  rect {\n                    fill: white;\n                  }\n                }\n\n                &.no-focus {\n                  opacity: 0.5;\n                }\n              }\n\n              .single-bar:hover {\n                -webkit-transition: opacity 0.5s;\n                transition: opacity 0.5s;\n                .interactive-labels {\n                  opacity: 1;\n                }\n              }\n\n              .chart-axis {\n                text {\n                  font-size: 12px;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &.La-chart {\n      .animal-count {\n        height: 100%;\n        @include horizontal-bottom-layout;\n\n        .chart {\n          overflow: visible;\n          .legend {\n            circle {\n              // fill: white;\n              stroke: $default-text;\n\n              &.mehrTiere {\n                fill: $taz-orange;\n              }\n\n              &.wenigerTiere {\n                fill: #5ea5a1;\n              }\n\n              &.vorherigeZaehlung {\n                stroke-dasharray: 2px 2px;\n                fill: none;\n              }\n            }\n\n            text {\n              font-size: 12px;\n            }\n          }\n\n          .arcs {\n            text {\n              font-size: 12px;\n            }\n\n            .labelCount {\n              fill: white;\n              stroke: #484848;\n              stroke-width: '0.5';\n            }\n\n            path {\n              stroke-width: 0.75;\n              stroke: #484848;\n\n              &.previousYear {\n                stroke-dasharray: 4px 4px;\n                stroke-width: 1;\n                fill: none;\n              }\n            }\n          }\n        }\n        &.is-thumbnail {\n          .visualization-container {\n            height: 100%;\n            width: 100%;\n            // transform: translateY(-10%);\n            // -webkit-transform: translateY(-10%);\n\n            .axis,\n            text,\n            .legend {\n              display: none;\n            }\n          }\n\n          .description {\n            display: none;\n          }\n        }\n      }\n\n      .animal-density {\n        height: 100%;\n        @include responsive-layout;\n\n        .chart {\n          overflow: visible;\n          .bars {\n            .labelText {\n              font-size: 12px;\n              fill: #484848;\n            }\n\n            .labelCount {\n              fill: white;\n              // stroke: #484848;\n              stroke-width: '0.5';\n            }\n\n            rect {\n              // stroke-width: 0.5;\n              // stroke: #484848;\n            }\n          }\n        }\n\n        .legend {\n          margin-top: 2rem;\n          svg {\n            height: 200px;\n            font-size: 14px;\n          }\n        }\n\n        .caption {\n          span {\n            color: $dark-blue;\n          }\n        }\n      }\n    }\n  }\n}\n\n.locator-map {\n  .locator-container {\n    width: 100%;\n    height: 150px;\n    display: flex;\n    position: absolute;\n    float: right;\n\n    .locator-background {\n      width: 50%;\n      margin-top: 5px;\n      margin-right: 0.5rem;\n      margin-left: 0.5rem;\n\n      svg {\n        float: right;\n\n        path {\n          &.ui-true {\n            cursor: pointer;\n          }\n        }\n        .zoom-pointer {\n          path {\n            fill: none;\n            stroke: black;\n          }\n        }\n      }\n    }\n\n    .locator-zoom {\n      width: 50%;\n      margin-left: 0.5rem;\n      position: relative;\n\n      .locator-zoom-inner {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n\n        svg {\n          position: absolute;\n          top: 45%;\n          right: 0;\n          transform: translateY(-45%);\n          -webkit-transform: translateY(-45%);\n        }\n\n        path {\n          &.ui-true {\n            cursor: pointer;\n          }\n        }\n      }\n    }\n  }\n}\n\n.landkreis {\n  stroke: $default-text;\n  stroke-width: 0.5;\n  fill: white;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n\n  &.visible {\n    fill: $dark-blue;\n\n    &.mittleren {\n      fill: $taz-orange;\n    }\n    &.besten {\n      fill: $mint-green;\n    }\n    &.schlechtesten {\n      fill: $red;\n    }\n  }\n\n  &.hidden {\n    fill: white;\n\n    &.mittleren {\n      fill: $lighter-orange;\n    }\n\n    &.besten {\n      fill: lighten($mint-green, 60%);\n    }\n\n    &.schlechtesten {\n      fill: $pale-pink;\n    }\n  }\n}\n","@import '_config.scss';\n@import '_card.scss';\n@import '_charts.scss';\n/* force commit */\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: 'AktivGrotesk';\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  overflow: -moz-scrollbars-none;\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  /* Firefox */\n}\n\nhtml {\n  // overflow: scroll;\n  overflow: hidden;\n}\n\n::-webkit-scrollbar {\n  width: 0;\n}\n\n::-webkit-scrollbar-thumb {\n  background: #fff1db;\n  border-radius: 10px;\n}\n\n::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 5px #faebd6;\n  border-radius: 10px;\n}\n\nbutton {\n  @include button;\n  &.flip {\n    position: absolute;\n    transform: translate3d(0, 0, 0);\n    -webkit-transform: translate3d(0, 0, 0);\n    right: -0.5rem;\n    bottom: 0.5rem;\n    z-index: 4;\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    margin-left: auto;\n\n    &:hover {\n      .flip-label {\n        -webkit-transition: all 0.5s;\n        transition: all 0.5s;\n        opacity: 1;\n        left: 0rem;\n      }\n    }\n\n    .flip-label {\n      pointer-events: none;\n      -webkit-transition: all 0.5s;\n      transition: all 0.5s;\n      background-color: $light;\n      border: 1px solid $pale-olive;\n\n      padding: 1rem 0.5rem;\n      line-height: 0px;\n      font-size: 12px;\n      margin: auto 0.5rem;\n      position: relative;\n      left: -1rem;\n      opacity: 0;\n    }\n\n    img {\n      width: 18%;\n      max-width: 50px;\n      min-width: 20px;\n      -webkit-animation: bounce 2s cubic-bezier(0.19, 1, 0.22, 1) both;\n      animation: bounce 2s cubic-bezier(0.19, 1, 0.22, 1) both;\n    }\n  }\n}\n\nbutton,\n.info-container,\n.card-preview,\n.selector {\n  cursor: pointer;\n}\n\nh1 {\n  @include title;\n  margin-top: 0;\n  font-weight: 400;\n}\n\nh2,\nh3,\nh4,\nh5,\nh6 {\n  @include title;\n  font-weight: 400;\n}\n\nul {\n  padding-left: 0px;\n  ol {\n    padding-left: 0.5rem;\n  }\n}\n\ntext {\n  fill: $default-text;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n}\n\n.App {\n  min-height: 100vh;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.header-taz {\n  margin: 0.5em;\n  max-width: 100vw;\n}\n\n// In here all elements contained in main-container\n.indicators-iframe {\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n\n  .main-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n\n    .titleArtHidden {\n      display: none;\n\n      &.animating {\n        .wordart {\n          @include fade-in;\n        }\n      }\n    }\n    .word-art-title {\n      @include wordart-style-1;\n      pointer-events: none;\n      text-align: right;\n      margin-top: 1rem;\n      width: 80%;\n      position: absolute;\n      right: 0;\n\n      .wordart {\n        font-size: 2rem;\n      }\n    }\n\n    .social-media-layout {\n      .word-art-title {\n        // background-color: blue;\n        @include wordart-style-1;\n        -webkit-transform: rotate(-0.5deg) translate(-10px, 0px);\n        transform: rotate(-0.5deg) translate(-10px, 0px);\n        // width: 40%;\n        height: 50px;\n        z-index: 2;\n        text-align: right;\n        bottom: 0.2rem;\n        right: -1rem;\n\n        .gruss-thumb {\n          font-size: 0.6rem;\n        }\n\n        .gruss-thumb::after {\n          background-color: $light;\n          padding: 0px 5px;\n          border: 1px solid $pale-olive;\n          box-shadow: 2px 2px 0px rgba($pale-olive, 0.5);\n        }\n\n        .wordart {\n          -webkit-transform: scale(0.9, 1.2);\n          transform: scale(0.9, 1.2);\n          width: 100%;\n          height: 100%;\n          font-size: 1.2rem;\n          padding: 0;\n          padding-top: 0.6rem;\n          padding-left: 0.2rem;\n          letter-spacing: -0.1vw;\n          background-image: none;\n          background-clip: none;\n          -webkit-background-clip: none;\n          -webkit-text-fill-color: #f26852;\n        }\n      }\n    }\n\n    //container of location selector\n    .selection-container {\n      position: absolute;\n      width: 100vw;\n      margin-bottom: 2rem;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      z-index: 2;\n\n      .selector {\n        width: 50%;\n        margin: 1rem;\n\n        &.section {\n          &.mode-comparison {\n            width: 25%;\n          }\n        }\n\n        &.lk {\n          display: inline-block;\n          &.mode-comparison {\n            width: 80%;\n          }\n          &.mode-lk {\n            width: 40%;\n          }\n        }\n\n        &.lk-mobile {\n          display: none;\n        }\n\n        svg {\n          path {\n            fill: $red;\n          }\n        }\n\n        .css-1s2u09g-control,\n        .css-1pahdxg-control {\n          border: 1px solid $pale-olive;\n          border-radius: 0px;\n          box-shadow: map-get($map: $boxshadow, $key: default);\n\n          &:hover {\n            -webkit-transition: 0.2s;\n            transition: 0.2s;\n            box-shadow: map-get($map: $boxshadow, $key: hover);\n          }\n        }\n      }\n    }\n\n    .button-container {\n      position: absolute;\n      background-color: transparent;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      top: 0;\n\n      .button-switch-container {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n\n        height: 20%;\n\n        .inner-button {\n          .switch-preview {\n            white-space: pre-wrap;\n            margin-top: 0.5rem;\n            opacity: 0;\n            -webkit-transition: all 0.5s;\n            transition: all 0.5s;\n            font-size: 12px;\n            width: 80%;\n            overflow: visible;\n            text-overflow: ellipsis;\n          }\n        }\n\n        .button-left {\n          text-align: right;\n          margin: 0;\n          padding: 0;\n\n          .switch {\n            -webkit-transition: all 0.5s;\n            transition: all 0.5s;\n            position: relative;\n            right: 0rem;\n            bottom: 0;\n            text-align: right;\n            width: 100%;\n\n            .switch-preview {\n              float: right;\n            }\n          }\n\n          &:hover {\n            .switch {\n              -webkit-transition: all 0.5s;\n              transition: all 0.5s;\n              right: 0.5rem;\n            }\n\n            .switch-preview {\n              -webkit-transition: all 0.5s;\n              transition: all 0.5s;\n              opacity: 1;\n            }\n          }\n        }\n\n        .button-right {\n          text-align: left;\n          .switch {\n            -webkit-transition: all 0.5s;\n            transition: all 0.5s;\n            position: relative;\n            bottom: 0;\n            left: 0rem;\n            text-align: left;\n          }\n\n          &:hover {\n            .switch {\n              -webkit-transition: all 0.5s;\n              transition: all 0.5s;\n              left: 0.5rem;\n            }\n\n            .switch-preview {\n              -webkit-transition: all 0.5s;\n              transition: all 0.5s;\n              opacity: 1;\n            }\n          }\n        }\n\n        .button-left,\n        .button-right {\n          width: 9%;\n          img {\n            position: relative;\n          }\n          .button {\n            margin-bottom: auto;\n          }\n          .switch {\n            img {\n              // width: 30%;\n              width: 25px;\n              height: auto;\n              // margin: 5px 0px 0px 50%;\n              top: 0;\n            }\n          }\n        }\n      }\n\n      .inner-button {\n        width: 100%;\n        height: 50%;\n\n        .close {\n          position: relative;\n          float: right;\n          margin-right: 1rem;\n          margin-top: 4rem;\n\n          img {\n            width: 70%;\n          }\n        }\n      }\n    }\n\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: #fff1db;\n      border-radius: 10px;\n    }\n\n    ::-webkit-scrollbar-track {\n      box-shadow: inset 0 0 5px #faebd6;\n      border-radius: 10px;\n    }\n\n    // sources box with info about data\n    .sources-container {\n      width: 100%;\n      height: 100%;\n\n      &.open {\n        bottom: 0;\n        height: 10%;\n        position: absolute;\n        right: 0;\n        width: 50%;\n        z-index: 10;\n      }\n\n      .taz-logo-container {\n        position: absolute;\n        background-image: url(../img/taz/taz-klimaland-logo-bigger.jpg);\n        background-repeat: no-repeat;\n        background-size: contain;\n        width: 100%;\n        height: 1.4rem;\n        min-height: 1rem;\n        display: block;\n        margin-top: 0.5rem;\n      }\n\n      .fhp-logo-container {\n        position: absolute;\n        background-image: url(../img/taz/fhp-logo.png);\n        background-repeat: no-repeat;\n        background-size: contain;\n        width: 100%;\n        left: 5rem;\n        height: 1.5rem;\n        min-height: 1rem;\n        display: block;\n        margin-top: 0.6rem;\n      }\n\n      .klimaland-logo-container {\n        position: absolute;\n        background-image: url(../img/taz/klimaland-logo.svg);\n        background-repeat: no-repeat;\n        background-size: contain;\n        width: 100%;\n        height: 1.5rem;\n        min-height: 1rem;\n        display: block;\n        margin-top: 0.5rem;\n      }\n\n      .sources-button {\n        height: 30px;\n        width: 30px;\n        line-height: 0px;\n        right: 0.5rem;\n        bottom: 1.75rem;\n        position: absolute;\n        background-color: $light;\n        border-color: darken($pale-olive, 20%);\n        border-width: 0.5px;\n        border-radius: 100%;\n        border-style: solid;\n        z-index: 10;\n\n        .info-i {\n          font-size: 1rem;\n          color: darken($pale-olive, 20%);\n        }\n      }\n\n      .info-text-label {\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        width: 4rem;\n\n        h6 {\n          margin: 0;\n          text-align: right;\n          color: $default-text;\n        }\n      }\n\n      .sources-text-container {\n        position: absolute;\n        width: 100%;\n        height: 70vh;\n        transform: translate(-50%, -105%);\n        -webkit-transform: translate(-50%, -105%);\n        background-color: #fff;\n\n        border-color: $mint-green;\n        border-style: solid;\n        border-width: 1px;\n        box-shadow: 4px 4px 0px rgba($mint-green, 0.44);\n        padding: 1rem;\n        z-index: 10;\n\n        .button {\n          &.close {\n            position: fixed;\n            top: 0.5rem;\n            right: 0.5rem;\n            bottom: unset;\n            z-index: 11;\n            height: 10%;\n\n            img {\n              width: 70%;\n            }\n          }\n        }\n\n        .sources-text {\n          position: absolute;\n          overflow-y: scroll;\n          overflow-x: hidden;\n          height: 70vh;\n          padding-right: 1rem;\n\n          .sources-linklist {\n            & p {\n              font-size: 1rem;\n              margin: 0.25rem 0rem;\n              text-indent: -1rem;\n              padding-left: 1rem;\n            }\n          }\n\n          & h3 {\n            margin: 0.5rem 0rem;\n            font-weight: 700;\n          }\n\n          & h4 {\n            margin-top: 2rem;\n            margin-bottom: 0.5rem;\n            font-weight: 700;\n          }\n\n          & p {\n            margin: 0.75rem 0rem;\n          }\n\n          & a {\n            color: $mint-green;\n          }\n\n          .close {\n            @include button;\n            position: absolute;\n\n            right: 0rem;\n            top: 0.25rem;\n            height: 10%;\n\n            img {\n              width: 70%;\n            }\n          }\n        }\n      }\n    }\n\n    // Info box explaining the project\n    .info-container {\n      position: absolute;\n      bottom: 2%;\n      width: 100%;\n      height: 10%;\n      z-index: 10;\n\n      .info-container-content {\n        border-color: $red;\n        border-style: solid;\n        border-width: 1px;\n        background-color: #fff;\n        width: 270px;\n        height: 30vw;\n        padding: 0.75rem;\n        transform: translate(-3px, 11px) rotate(-3deg);\n        -webkit-transform: translate(-3px, 23px) rotate(-3deg);\n        transition: transform 0.2s;\n        will-change: transform;\n        -webkit-transition: transform 0.2s;\n        box-shadow: 4px 4px 0px rgba($red, 0.44);\n\n        .close {\n          @include button;\n          position: fixed;\n\n          right: 0rem;\n          top: 0.5rem;\n          height: 10%;\n\n          img {\n            width: 70%;\n          }\n        }\n\n        &:hover {\n          box-shadow: 6px 6px 0px rgba($red, 0.44);\n        }\n\n        &.small {\n          height: auto;\n          max-height: 20vw;\n        }\n\n        &.open {\n          width: calc($thumbnail-postcardwidth/0.65);\n\n          transform: translate(20px, calc(-30vw / 0.6)) rotate(2deg);\n          -webkit-transform: translate(20px, -$thumbnail-postcardwidth) rotate(2deg);\n          will-change: transform;\n          transition: transform 0.2s;\n          -webkit-transition: transform 0.2s;\n\n          overflow-y: scroll;\n\n          .help {\n            overflow-y: hidden;\n            overflow-x: hidden;\n\n            .text {\n              opacity: 1;\n            }\n          }\n        }\n\n        .help {\n          color: $red;\n\n          h4,\n          h2 {\n            margin: 0.5rem 0;\n            color: $red;\n\n            &.mobile-title {\n              display: none;\n            }\n          }\n\n          .text {\n            opacity: 0;\n          }\n\n          .img-flip,\n          .img-toggle {\n            width: 25%;\n            max-width: 21px;\n            min-width: 10px;\n          }\n\n          .img-download {\n            padding: 0 2px 0 4px;\n            max-width: 15px;\n          }\n\n          .info-highlight {\n            color: darken($pale-olive, 20%);\n          }\n\n          .info-suchleiste {\n            background-color: $lighter-orange;\n            border-radius: 5%;\n            border-width: 10px;\n          }\n        }\n      }\n    }\n  }\n}\n\n// @import '_responsive.scss';\n@import '_responsivenew.scss';\n","// Generic responsive rules for smaller devices\n// For cards with vertical layouts a mixin called `responsive-layout`\n// handles the switch to an horizontal layout\n\n// variables method based on github.com/eduardoboucas/include-media\n@import '_config.scss';\n\n@include media('<=desktop') {\n  body {\n    // background-color: lightgoldenrodyellow;\n    .indicators-iframe {\n      .main-container {\n        .side-container {\n          width: $tablet-postcardview-postcardwidth;\n          height: calc($tablet-postcardview-postcardwidth/1.6);\n        }\n\n        .titleArtHidden {\n          display: block;\n        }\n\n        .word-art-title {\n          // width: 65%;\n          margin-top: 0;\n\n          .wordart {\n            font-size: 2rem;\n            line-height: 1.75rem;\n            overflow: visible;\n            padding-top: 5px;\n            padding-bottom: 5px;\n          }\n        }\n\n        .social-media-layout {\n          .side-inner {\n            .La-chart {\n              .animal-count {\n                .visualization-container {\n                  height: 87%;\n                }\n              }\n            }\n\n            .Ge-chart {\n              .avg-heating {\n                .visualization-container {\n                  height: 93%;\n                }\n              }\n            }\n\n            .Ab-chart {\n              .biotonne-weight {\n                .visualization-container {\n                  height: 81%;\n                }\n              }\n            }\n\n            .En-chart {\n              .energy-industry,\n              .primary-energy {\n                .visualization-container {\n                  height: 92%;\n                }\n              }\n            }\n\n            .Mo-chart {\n              .modal-split {\n                .visualization-container {\n                  height: 90%;\n                }\n              }\n            }\n          }\n        }\n\n        .button-container {\n          .button-switch-container {\n            .inner-button {\n              .switch-preview {\n                font-size: 10px;\n              }\n            }\n\n            .button-left,\n            .button-right {\n              width: 7%;\n            }\n          }\n        }\n\n        .flip {\n          bottom: 0.5rem;\n          right: 0.5rem;\n\n          img {\n            max-width: 25px;\n          }\n        }\n\n        .card-collection {\n          .card {\n            .card-front,\n            .card-back {\n              .overlay-container {\n                height: 10%;\n                .overlay-inner {\n                  .section-thumb {\n                    .word-art-title {\n                      display: none;\n                    }\n                  }\n\n                  .postcard-title {\n                    h4 {\n                      margin: 0;\n                      margin-top: 0.1rem;\n                      -webkit-transform: translate(0px, 0px) !important;\n                      transform: translate(0px, 0px) !important;\n                    }\n                  }\n\n                  .button-toggle-container {\n                    -webkit-transform: translate(0px, 0px) !important;\n                    transform: translate(0px, 0px) !important;\n\n                    padding .arrow-pointer {\n                      margin-top: 0.2rem;\n                      height: calc(100% - 0.2rem);\n                    }\n\n                    svg {\n                      .controller-bg {\n                        cursor: pointer;\n                        fill: url(#MyGradient);\n                        stroke: $default-text;\n                      }\n                    }\n                  }\n                }\n              }\n              .side-inner {\n                height: 90%;\n              }\n              .details-container {\n                height: 100%;\n              }\n            }\n            .details-container {\n              .flex-container {\n                height: 100%;\n                .text-container {\n                  margin-bottom: 1rem;\n                  .text-inner-container {\n                    .section-title {\n                      display: none;\n                    }\n                    .section-text {\n                      height: 92%;\n                    }\n                  }\n                }\n                .data-container {\n                  height: 92%;\n                  .lk-list {\n                    height: calc(60% - 1px);\n                    .list-similar-container {\n                      h5 {\n                        position: sticky;\n                        top: 0;\n                      }\n                      ol {\n                        font-size: 14px;\n                      }\n                    }\n                  }\n                  .locator-map {\n                    .locator-container {\n                      height: 123px;\n                      width: 95%;\n\n                      .locator-background {\n                        .map-paths {\n                          path {\n                            stroke-width: 0.2px;\n                          }\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n            .Ge-chart {\n              .newbuildings-energy {\n                h4 {\n                  margin-bottom: 0rem;\n                }\n                .legend-inner {\n                  font-size: 12px;\n                  .erneuerbare,\n                  div.erneuerbare {\n                    margin-bottom: 0.5rem;\n                  }\n                }\n              }\n              .avg-heating {\n                .visualization-container {\n                  svg {\n                    .non-clipped-elements {\n                      .year-label,\n                      .measure-label {\n                        -webkit-transform: translate(-5px, 0);\n                        transform: translate(-5px, 0);\n                      }\n                      .year-label {\n                        &.year-odd {\n                          display: none;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n\n            .horizontal-bottom-layout {\n              .description {\n                h4 {\n                  width: 95%;\n                  //font-size: 14px;\n                }\n              }\n            }\n            .Ab-chart {\n              .visualization-container {\n                height: 75%;\n\n                .controls-container {\n                  .legend {\n                    -webkit-transform: translateY(1%);\n                    transform: translateY(1%);\n                    .biotonne {\n                      -webkit-transform: translateX(10%);\n                      transform: translateX(10%);\n\n                      .biotonne-text {\n                        -webkit-transform: translateX(12%) translateY(0.5%);\n                        transform: translateX(12%) translateY(0.5%);\n                      }\n                    }\n\n                    .gartenPark {\n                      -webkit-transform: translateX(16%);\n                      transform: translateX(16%);\n\n                      .gartenPark-text {\n                        -webkit-transform: translateX(18%) translateY(0.5%);\n                        transform: translateX(18%) translateY(0.5%);\n                      }\n                    }\n\n                    .highest-value {\n                      -webkit-transform: translateX(0%);\n                      transform: translateX(0%);\n\n                      .highest-value-text {\n                        -webkit-transform: translateX(2%) translateY(0.5%);\n                        transform: translateX(2%) translateY(0.5%);\n                      }\n                    }\n                  }\n\n                  .pie-controller {\n                    -webkit-transform: translateX(60%) translateY(-2.5%);\n                    transform: translateX(60%) translateY(-2.5%);\n                    .pie-icon {\n                      -webkit-transform: scale(0.7);\n                      transform: scale(0.7);\n                    }\n                  }\n                }\n              }\n            }\n\n            .En-chart {\n              .energy-industry {\n                .visualization-container {\n                  &.with-footnote {\n                    height: 78%;\n                  }\n                }\n                .description {\n                  &.with-footnote {\n                    height: 22%;\n                  }\n                }\n                &.is-thumbnail {\n                  .visualization-container,\n                  .description {\n                    &.with-footnote {\n                      height: 100%;\n                    }\n                  }\n                }\n              }\n            }\n\n            .Mo-chart {\n              .car-density {\n                .chart {\n                  transform: translate(-10px, -5px) skew(-17deg, 0deg) scale(0.95);\n                  -webkit-transform: translate(-10px, -5px) skew(-17deg, 0deg) scale(0.95);\n                }\n              }\n            }\n\n            .is-thumbnail {\n              .visualization-container {\n                height: 100%;\n              }\n            }\n          }\n        }\n\n        .info-container {\n          .info-container-content {\n            &.open {\n              max-height: 70vh;\n              height: auto;\n              // transform: translate(20px, -80vh * 0.95) rotate(2deg);\n              // -webkit-transform: translate(20px, -80vh * 0.5) rotate(2deg);\n\n              -webkit-transform: translate(20px, -90%) rotate(2deg);\n              transform: translate(20px, -90%) rotate(2deg);\n\n              .help {\n                max-height: 70vh;\n                height: auto;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@include media('<=tablet') {\n  body {\n    // background-color: rgb(170, 170, 245);\n\n    h4 {\n      font-size: 14px;\n    }\n\n    .chart {\n      text {\n        font-size: 12px;\n      }\n    }\n\n    .indicators-iframe {\n      .main-container {\n        .side-container {\n          width: $minitablet-postcardview-postcardwidth;\n          height: calc($minitablet-postcardview-postcardwidth/1.6);\n        }\n\n        .button-container {\n          .inner-button {\n            height: 84%;\n            .close {\n              margin-top: 14%;\n              margin-right: -0.5rem;\n            }\n          }\n\n          .button-switch-container {\n            justify-content: center;\n            height: 10%;\n\n            .inner-button {\n              .switch-preview {\n                margin-top: 0.1rem;\n                font-size: 12px;\n              }\n            }\n\n            .button-left,\n            .button-right {\n              width: 9%;\n              margin-left: 0.5rem;\n              margin-right: 0.5rem;\n            }\n          }\n        }\n\n        .word-art-title {\n          // width: 65%;\n\n          margin-top: 1rem;\n          .wordart {\n            padding-top: 10px;\n          }\n        }\n\n        .selection-container {\n          flex-direction: row;\n\n          .selector {\n            &.section {\n              &.mode-comparison {\n                width: 35%;\n              }\n            }\n\n            &.lk {\n              display: inline-block;\n              &.mode-comparison {\n                width: 80%;\n              }\n              &.mode-lk {\n                width: 40%;\n              }\n            }\n          }\n        }\n\n        .social-media-layout {\n          .word-art-title {\n            -webkit-transform: scale(0.9, 0.9) translate(0px, 0px);\n            transform: scale(0.9, 0.9) translate(0px, 0px);\n          }\n        }\n\n        .card-collection {\n          .card {\n            .card-preview {\n              .overlay-inner {\n                .section-thumb {\n                  .indicator-ranking {\n                    p {\n                      padding: 0.5rem;\n                    }\n                  }\n                }\n              }\n            }\n\n            .card-front,\n            .card-back {\n              .side-outer {\n                .overlay-container {\n                  height: calc(14% - 1rem);\n\n                  .overlay-inner {\n                    svg {\n                      .toggle {\n                        display: none;\n                      }\n\n                      .toggleResponsive {\n                        display: block;\n                      }\n                      .mobile-toggle-label {\n                        display: none;\n                      }\n\n                      text {\n                        margin: 0;\n                        padding: 0;\n                        font-size: 14px;\n                      }\n\n                      .togglePhone {\n                        display: none;\n                      }\n                    }\n                  }\n\n                  &.overlay-container-back {\n                    position: absolute;\n                    .overlay-inner {\n                      background-color: transparent;\n                      border: none;\n                      .section-thumb {\n                        display: none;\n                      }\n                    }\n                  }\n                }\n              }\n              .side-inner {\n                height: calc(86% + 1rem);\n\n                &.side-inner-back {\n                  height: 100%;\n                }\n              }\n              .En-chart {\n                .primary-energy,\n                .energy-industry {\n                  .visualization-container {\n                    .chart {\n                      .streams-labels-container {\n                        foreignObject {\n                          div {\n                            p {\n                              font-size: 10px;\n                              padding: 0;\n                            }\n                          }\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n\n            .details-container {\n              .flex-container {\n                height: 100%;\n                .text-container {\n                  // margin-bottom: 1rem;\n                  .text-inner-container {\n                    .section-title {\n                      border-bottom: none;\n                      display: block;\n                      font-size: 0.9rem;\n                      h2 {\n                        padding-top: 1rem;\n                      }\n                    }\n                    .section-text {\n                      height: 95%;\n                    }\n                  }\n                }\n                .data-container {\n                  height: 90%;\n\n                  .locator-map {\n                    .locator-container {\n                      height: 110px;\n                      // width: 89%;\n                    }\n                  }\n                }\n              }\n            }\n            .Mo-chart {\n              .car-density {\n                .chart {\n                  transform: translate(-10px, 0px) skew(-17deg, 0deg) scale(0.9);\n                  -webkit-transform: translate(-10px, 0px) skew(-17deg, 0deg) scale(0.9);\n                }\n              }\n              .modal-split {\n                .visualization-container {\n                  .chart {\n                    .paths {\n                      text {\n                        font-size: 12px;\n                      }\n                    }\n                    .icon {\n                      display: none;\n                    }\n                    .no-icon {\n                      display: inline-block;\n                    }\n                  }\n                }\n              }\n\n              .is-thumbnail {\n                .visualization-container {\n                  .chart {\n                    transform: translate(-10px, 0px) skew(-17deg, 0deg) scale(0.85);\n                    -webkit-transform: translate(-10px, 0px) skew(-17deg, 0deg) scale(0.85);\n                  }\n                }\n              }\n            }\n\n            .Ge-chart {\n              .newbuildings-energy {\n                h4 {\n                  font-size: 14px;\n                  font-weight: 'medium';\n                }\n                .description {\n                  width: 43%;\n                  .caption {\n                    p {\n                      font-size: 12px;\n                    }\n                  }\n                  .legend {\n                    .legend-element {\n                      p {\n                        &:hover {\n                          font-weight: 600;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n              .avg-heating {\n                .visualization-container {\n                  svg {\n                    .non-clipped-elements {\n                      .year-label,\n                      .measure-label {\n                        -webkit-transform: translate(-10px, 0);\n                        transform: translate(-10px, 0);\n                      }\n                    }\n                  }\n                }\n              }\n            }\n\n            .La-chart {\n              .animal-density {\n                .caption {\n                  p {\n                    font-size: 12px;\n                  }\n                }\n                .legend {\n                  svg {\n                    height: 100px;\n                    font-size: 12px;\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .sources-container {\n          .sources-text-container {\n            .sources-text {\n              h3 {\n                font-size: 16px;\n              }\n\n              h4 {\n                font-size: 14px;\n              }\n              p {\n                font-size: 14px;\n              }\n              .sources-linklist {\n                p {\n                  font-size: 14px;\n                }\n              }\n            }\n          }\n        }\n\n        .info-container {\n          .info-container-content {\n            &.open {\n              width: 80vh * 0.65;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@include media('<=schwerpunkt') {\n  body {\n    // background-color: lightcoral;\n\n    .indicators-iframe {\n      .main-container {\n        .side-container {\n          width: $schwerpunkt-postcardview-postcardwidth;\n          height: calc($schwerpunkt-postcardview-postcardwidth/1.6);\n        }\n        .button-container {\n          .inner-button {\n            height: 82%;\n            .close {\n              margin-top: 18%;\n              margin-right: -0.5rem;\n            }\n          }\n          .button-switch-container {\n            .inner-button {\n              .switch-preview {\n                margin-top: 0.5rem;\n              }\n            }\n          }\n        }\n        .card-preview {\n          .side-outer {\n            .overlay-container {\n              .section-thumb {\n                .indicator-ranking {\n                  p {\n                    font-size: 10px;\n                  }\n                }\n              }\n            }\n          }\n        }\n        .card-collection {\n          .card {\n            .Ge-chart {\n              .avg-heating {\n                .visualization-container {\n                  -webkit-transform: translatey(-10px);\n                  transform: translatey(-10px);\n                  svg {\n                    .clipped-container {\n                      .chart-axis {\n                        .bar-axis {\n                          .energy-class-rect {\n                            width: 20px;\n                          }\n                          .energy-class-name {\n                            -webkit-transform: translateX(-5px);\n                            transform: translateX(-5px);\n                          }\n                          .energy-class-value {\n                            -webkit-transform: translateX(0px);\n                            transform: translateX(0px);\n                          }\n                        }\n                      }\n                    }\n                    .non-clipped-elements {\n                      .year-label {\n                        -webkit-transform: translate(-15px, 0);\n                        transform: translate(-15px, 0);\n                        &.year-odd {\n                          display: none;\n                        }\n                      }\n                      .measure-label {\n                        -webkit-transform: translate(9px, 0);\n                        transform: translate(9px, 0);\n                      }\n                    }\n                  }\n                }\n              }\n            }\n            .Ab-chart {\n              .visualization-container {\n                .controls-container {\n                  .pie-controller {\n                    .pie-icon {\n                      -webkit-transform: scale(0.6);\n                      transform: scale(0.6);\n                    }\n                  }\n                  .legend {\n                    .gartenPark {\n                      -webkit-transform: translateX(16.5%);\n                      transform: translateX(16.5%);\n                    }\n                  }\n                }\n                &.with-footnote {\n                  height: 70%;\n                }\n              }\n              .description {\n                &.with-footnote {\n                  height: 30%;\n                }\n              }\n              .is-thumbnail {\n                .visualization-container,\n                .description {\n                  &.with-footnote {\n                    height: 100%;\n                  }\n                }\n              }\n            }\n            .En-chart {\n              .visualization-container {\n                .strom-export-box {\n                  padding: 0.1rem;\n                  p {\n                    font-size: 10px;\n                    padding: 0.1rem;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@include media('<=minitablet') {\n  body {\n    // background-color: peachpuff;\n\n    h4 {\n      font-size: 12px;\n    }\n\n    .visualization-container {\n      .chart {\n        text {\n          font-size: 10px;\n        }\n      }\n    }\n\n    .indicators-iframe {\n      .main-container {\n        .word-art-title {\n          padding-top: 0rem;\n        }\n\n        .overlay-container {\n          .section-title {\n            font-size: 14px;\n          }\n\n          .section-thumb {\n            &.comparison {\n              .word-art-title {\n                margin-top: 0.5rem;\n                .wordart {\n                  padding-left: 2px;\n                  padding-right: 5px;\n                  font-size: 1rem;\n                  line-height: 1rem;\n                }\n              }\n            }\n          }\n        }\n\n        .button-container {\n          .inner-button {\n            height: 79%;\n            .close {\n              margin-top: 25%;\n              margin-right: -0.25rem;\n            }\n          }\n        }\n\n        .flip {\n          right: 0;\n        }\n\n        .social-media-layout {\n          .side-inner {\n            .Mo-chart {\n              .modal-split {\n                .visualization-container {\n                  .chart {\n                    .bar-percentage-trip {\n                      display: none;\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .card-collection {\n          .card {\n            //thumbnail\n            &-ordered {\n              //original ratio changed for styling\n              width: 40vw;\n              height: calc(40vw / 1.5);\n            }\n            .card-front,\n            .card-back {\n              .side-outer {\n                .overlay-container {\n                  height: calc(14% - 0.5rem);\n                }\n\n                .side-inner {\n                  height: calc(86% + 0.5rem);\n                  &.side-inner-back {\n                    height: 100%;\n                  }\n                }\n              }\n            }\n\n            .Mo-chart {\n              .car-density {\n                .visualization-container {\n                  .chart {\n                    transform: translate(-10px, 0px) skew(-17deg, 0deg) scale(0.85);\n                    -webkit-transform: translate(-10px, 0px) skew(-17deg, 0deg) scale(0.85);\n                  }\n                }\n                .description {\n                  .title {\n                    h4 {\n                      padding-right: 0;\n                    }\n                  }\n                }\n              }\n              .modal-split {\n                .visualization-container {\n                  transform: translateY(-5px);\n                  .chart {\n                    .paths {\n                      text {\n                        font-size: 10px;\n                      }\n                    }\n                    text {\n                      &.icon {\n                        display: none;\n                      }\n                    }\n                    .bar-percentage-trip-text {\n                      -webkit-transform: translateY(9px);\n                      transform: translateY(9px);\n                    }\n                    .icon {\n                      -webkit-transform: translateY(9px);\n                      transform: translateY(9px);\n                      display: inline-block;\n                    }\n                    .no-icon {\n                      display: none;\n                    }\n                  }\n                }\n              }\n            }\n\n            .Ab-chart {\n              .visualization-container {\n                height: 74%;\n                .controls-container {\n                  .legend {\n                    -webkit-transform: translateY(1%);\n                    transform: translateY(1%);\n\n                    .biotonne {\n                      -webkit-transform: translateX(13%);\n                      transform: translateX(13%);\n\n                      .biotonne-text {\n                        -webkit-transform: translateX(15%) translateY(0.5%);\n                        transform: translateX(15%) translateY(0.5%);\n                      }\n                    }\n\n                    .gartenPark {\n                      -webkit-transform: translateX(20%);\n                      transform: translateX(20%);\n\n                      .gartenPark-text {\n                        -webkit-transform: translateX(22%) translateY(0.5%);\n                        transform: translateX(22%) translateY(0.5%);\n                      }\n                    }\n                  }\n\n                  .pie-controller {\n                    -webkit-transform: translateX(59%) translateY(-2.5%);\n                    transform: translateX(59%) translateY(-2.5%);\n\n                    .pie-icon {\n                      -webkit-transform: scale(0.5);\n                      transform: scale(0.5);\n\n                      path {\n                        stroke-width: 2px;\n                      }\n                    }\n                  }\n                }\n                .chart {\n                  .highest-value,\n                  .detail-label {\n                    text {\n                      font-size: 12px;\n                    }\n                  }\n                  .max {\n                    line {\n                      stroke: $default-text;\n                    }\n                    text {\n                      fill: $default-text;\n                    }\n                  }\n                }\n              }\n            }\n\n            .Ge-chart {\n              .newbuildings-energy {\n                .legend {\n                  .legend-elements-container {\n                    flex-direction: row;\n                    justify-content: flex-end;\n                    @include newbuildings-label-update(fossile, $fossile);\n                    @include newbuildings-label-update(gas, $gas);\n                    @include newbuildings-label-update(geothermie, $geothermie);\n                    @include newbuildings-label-update(erneuerbare, $erneuerbare);\n                    @include newbuildings-label-update(umweltthermie, $umweltthermie);\n                    @include newbuildings-label-update(fernkälte, $fernkälte);\n                    @include newbuildings-label-update(holz, $holz);\n                    @include newbuildings-label-update(solarthermie, $solarthermie);\n                    @include newbuildings-label-update(biomethan, $biomethan);\n                    @include newbuildings-label-update(biomasse, $biomasse);\n                    @include newbuildings-label-update(keine, $keine);\n                    @include newbuildings-label-update(oel, $oel);\n                    @include newbuildings-label-update(heizenergie, $heizenergie);\n                    @include newbuildings-label-update(strom, $strom);\n\n                    .legend-element {\n                      display: none;\n                      &.selected {\n                        border-radius: 2px;\n                        background-color: white;\n                        border-width: 1px;\n                        border-style: solid;\n                        //box-shadow: 2px 2px 0px $default-text;\n                        display: inline-flex;\n\n                        .element-color {\n                          display: none;\n                        }\n\n                        p {\n                          font-weight: 400;\n                          font-size: 11px;\n                          margin: 0.1rem;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n\n            .La-chart {\n              .description {\n                .title {\n                  h4 {\n                    padding-right: 0;\n                  }\n                }\n                .caption {\n                  display: none;\n                }\n              }\n            }\n\n            .En-chart {\n              .visualization-container {\n                .chart {\n                  .y-axis,\n                  .x-axis {\n                    text {\n                      font-size: 10px;\n                    }\n                  }\n                }\n              }\n            }\n\n            .is-thumbnail {\n              .visualization-container {\n                height: 100%;\n              }\n            }\n\n            .details-container {\n              .flex-container {\n                .text-container {\n                  .text-inner-container {\n                    overflow-y: scroll;\n                    height: 90%;\n                    margin-top: 1rem;\n\n                    // overflow: hidden;\n                    .section-title {\n                      //display: none;\n                      h2 {\n                        font-size: 14px;\n                        font-weight: bold;\n                      }\n                    }\n                    .section-text {\n                      overflow-y: visible;\n                      height: 92%;\n                    }\n                  }\n                }\n                .data-container {\n                  .locator-map {\n                    z-index: 10;\n                    .locator-container {\n                      width: 100%;\n                      height: 100%;\n\n                      .locator-zoom {\n                        width: 65%;\n                        .locator-zoom-inner {\n                          width: 80%;\n                        }\n                      }\n\n                      .locator-background {\n                        width: 35%;\n                        transform: scale(0.9);\n                        margin-right: 0.5rem;\n                        // margin-left: 0.5rem;\n                        margin-bottom: 0.5rem;\n\n                        svg {\n                          margin-right: 0.5rem;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n\n              .footer-container {\n                // height: calc(12% + 2px);\n              }\n            }\n          }\n        }\n\n        .info-container {\n          .info-container-content {\n            width: 30px;\n            height: 30px;\n            .help {\n              h2.mobile-title {\n                display: block;\n                text-align: center;\n                margin: 0;\n              }\n\n              h4.desktop-title {\n                display: none;\n              }\n            }\n            &.open {\n              .help {\n                h4.desktop-title {\n                  display: block;\n                }\n\n                h2.mobile-title {\n                  display: none;\n                }\n              }\n            }\n          }\n          h4 {\n            font-size: 14px;\n          }\n          p {\n            font-size: 14px;\n          }\n        }\n        .sources-container {\n          width: 80%;\n          .sources-button {\n            width: 25px;\n            height: 25px;\n            right: 1rem;\n            bottom: 1rem;\n            .info-i {\n              font-size: 0.75rem;\n            }\n          }\n          &.open {\n            width: 80%;\n            transform: translate(0);\n            -webkit-transform: translate(0);\n          }\n\n          .info-text-label {\n            width: 10rem;\n          }\n\n          .sources-text-container {\n            height: 80vh;\n            transform: translate(-16%, -100%);\n            -webkit-transform: translate(-16%, -100%);\n\n            .sources-text {\n              height: 80vh;\n            }\n          }\n        }\n        .selection-container {\n          .selector {\n            &.lk {\n              &.mode-lk {\n                width: 50%;\n              }\n            }\n          }\n        }\n\n        .social-media-layout {\n          .word-art-title {\n            -webkit-transform: scale(0.8) translate(30px, 10px);\n            transform: scale(0.8) translate(30px, 10px);\n          }\n        }\n      }\n    }\n  }\n}\n\n@include media('<shortread') {\n  body {\n    // background-color: aqua;\n\n    h4 {\n      font-size: 12px;\n    }\n\n    .indicators-iframe {\n      .main-container {\n        margin-top: 10px;\n\n        .titleArtHidden {\n          display: none;\n        }\n\n        .section-thumb {\n          .indicator-ranking {\n            // position: relative;\n            top: 2.5rem;\n            bottom: auto !important;\n          }\n        }\n\n        .word-art-title {\n          bottom: 2rem;\n          right: 2rem;\n\n          .gruss-thumb {\n            margin-bottom: 0.5rem;\n          }\n\n          .word-art {\n            line-height: 1.75;\n          }\n        }\n\n        .social-media-layout {\n          .word-art-title {\n            -webkit-transform: scale(0.8) translate(15px, 10px);\n            transform: scale(0.8) translate(15px, 10px);\n          }\n\n          .side-inner {\n            .La-chart {\n              .animal-count {\n                .visualization-container {\n                  height: 80% !important;\n                }\n              }\n            }\n\n            .Ge-chart {\n              .avg-heating {\n                .visualization-container {\n                  height: 80% !important;\n                }\n              }\n            }\n\n            .Ab-chart {\n              .biotonne-weight {\n                .visualization-container {\n                  height: 75% !important;\n                }\n              }\n            }\n\n            .En-chart {\n              .energy-industry,\n              .primary-energy {\n                .visualization-container {\n                  height: 82% !important;\n                }\n              }\n            }\n\n            .Mo-chart {\n              .modal-split {\n                .visualization-container {\n                  height: 82% !important;\n                }\n              }\n            }\n          }\n        }\n\n        .flip {\n          img {\n            max-width: 37px;\n          }\n        }\n\n        .comparison {\n          .word-art-title {\n            width: 100%;\n            bottom: 0rem;\n            right: 0rem;\n            -webkit-transform: rotate(-4deg) translate(-20px, -10px);\n            transform: rotate(-4deg) translate(-20px, -10px);\n            text-align: left;\n\n            .wordart {\n              padding-right: 0;\n            }\n          }\n\n          // .wordart {\n          //   line-height: 1.5rem;\n          //   overflow: visible;\n          //   padding-top: 10px;\n          //   padding-bottom: 10px;\n\n          // }\n        }\n\n        .selection-buttons {\n          .selection-container {\n            display: block;\n            margin-bottom: 0.5rem;\n            position: relative;\n            width: 100%;\n\n            .selector {\n              width: 90%;\n              margin: 0.25rem 1rem;\n\n              &.lk {\n                display: none;\n              }\n              &.lk-mobile {\n                display: inline-block;\n              }\n\n              &.section {\n                width: 90%;\n              }\n            }\n          }\n        }\n\n        .card-collection {\n          width: 100%;\n          align-content: flex-start;\n\n          .card-container {\n            align-content: flex-start;\n\n            &.carousel {\n              align-content: center;\n              justify-content: space-around;\n              padding-left: 0;\n            }\n          }\n\n          .chart-container {\n            .svg-container {\n              .description {\n                .title {\n                  margin: 0 auto !important;\n\n                  h4 {\n                    padding-bottom: 0.5rem !important;\n                  }\n                }\n              }\n\n              .vertical-layout {\n                .description {\n                  h4 {\n                    font-size: 1rem;\n                  }\n                }\n              }\n\n              .horizontal-bottom-layout {\n                .description {\n                  h4 {\n                    font-size: 1rem;\n                  }\n                }\n              }\n\n              &.En-chart {\n                .energy-industry,\n                .primary-energy {\n                  .visualization-container {\n                    height: 75%;\n\n                    &.with-footnote {\n                      height: 75%;\n                    }\n                    .chart {\n                      .y-axis,\n                      .x-axis {\n                        text {\n                          font-size: 12px;\n                        }\n                      }\n                      .y-axis {\n                        .last-line {\n                          text {\n                            display: none;\n                          }\n                        }\n                      }\n                      .description {\n                        height: 25%;\n                        &.with-footnote {\n                          height: 25%;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n\n              &.La-chart {\n                .animal-count {\n                  .description {\n                    height: 25%;\n                  }\n\n                  .visualization-container {\n                    height: 75%;\n                    .label-container {\n                      transform: translateY(28px);\n                      -webkit-transform: translateY(28px);\n                    }\n\n                    .arcs,\n                    .x-axis-container {\n                      transform: translateY(-60px);\n                      -webkit-transform: translateY(-60px);\n\n                      .animal-label {\n                        transform: translateY(20px);\n                        -webkit-transform: translateY(20px);\n                        font-size: 14px;\n                      }\n                    }\n\n                    .axis {\n                      .year-label {\n                        font-size: 12px;\n                        transform: translateX(-20px);\n                        -webkit-transform: translateX(-20px);\n                      }\n                    }\n\n                    .legend {\n                      transform: translateY(90%);\n                      -webkit-transform: translateY(92%);\n                      .label-item {\n                        transform: translate(20px, -5px);\n                        -webkit-transform: translate(20px, -5px);\n\n                        &.vorherigeZaehlung {\n                          transform: translate(-220px, 15px);\n                          -webkit-transform: translate(-220px, 15px);\n                        }\n                      }\n                    }\n                  }\n                }\n\n                .animal-density {\n                  .description {\n                    height: 45%;\n                    position: absolute;\n                    bottom: 0;\n                    margin-left: 1rem;\n                    width: auto;\n\n                    .caption {\n                      display: inline-block;\n                      font-size: 12px;\n                      margin-right: 1rem;\n                      transform: translate(0, 60px);\n                      -webkit-transform: translate(0, 60px);\n                    }\n\n                    .legend {\n                      margin-top: 2rem;\n                      transform: translate(0, -110px);\n                      -webkit-transform: translate(0, -110px);\n\n                      .legend-item {\n                        font-size: 12px;\n                        &.unter-label {\n                          transform: translate(140px, 0px);\n                          -webkit-transform: translate(140px, 0px);\n                        }\n                      }\n                    }\n                    .title {\n                      margin: 0 !important;\n                    }\n                  }\n\n                  .visualization-container {\n                    height: 55%;\n                    .chart {\n                      transform: translateY(-30px);\n                      -webkit-transform: translateY(-30px);\n                      .bars {\n                        -webkit-transform: translateY(10px);\n                        transform: translateY(10px);\n                        .year-label {\n                          font-size: 14px;\n                        }\n                      }\n                    }\n                  }\n                }\n\n                .is-thumbnail {\n                  .visualization-container {\n                    .chart {\n                      transform: translateY(2rem);\n                      -webkit-transform: translateY(2rem);\n                    }\n                  }\n                }\n              }\n\n              &.Mo-chart {\n                .car-density {\n                  .description {\n                    height: 20%;\n                    position: absolute;\n                    bottom: 1rem;\n\n                    .title {\n                      margin: 0 auto;\n                      h4 {\n                        padding-bottom: 0.5rem;\n                      }\n                    }\n\n                    .legend {\n                      display: none;\n                    }\n                  }\n\n                  .visualization-container {\n                    .chart {\n                      &.active-chart {\n                        transform: translate(10px, -11px) scale(0.95);\n                        -webkit-transform: translate(10px, -11px) scale(0.95);\n                      }\n\n                      &.thumbnail-chart {\n                        transform: skew(0deg, 0deg);\n                        -webkit-transform: skew(0deg, 0deg);\n                        .cars-container {\n                          transform: translate(20px, 0px);\n                          -webkit-transform: translate(20px, 0px);\n                        }\n                      }\n                    }\n                  }\n\n                  &.is-thumbnail {\n                    .visualization-container {\n                      .thumbnail-chart {\n                        .cars-container {\n                          g {\n                            rect {\n                              rx: 1px;\n                              ry: 1px;\n                            }\n                          }\n                        }\n                      }\n                    }\n                  }\n                }\n\n                .modal-split {\n                  .description {\n                    height: 20%;\n                    h4 {\n                      font-size: 1rem;\n                    }\n                  }\n\n                  .visualization-container {\n                    height: 80%;\n                    .chart {\n                      transform: translateY(-15px);\n                      -webkit-transform: translateY(-15px);\n                      .bar-percentage-trip {\n                        display: none;\n                      }\n                      .paths {\n                        text {\n                          font-size: 12px;\n                        }\n                        &.icon {\n                          display: inline-block;\n                        }\n                        .no-icon {\n                          display: none;\n                        }\n                        .icon {\n                          display: inline-block;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n\n              &.Ab-chart {\n                .biotonne-weight {\n                  .description {\n                    height: 35%;\n\n                    span {\n                      &.footnote {\n                        font-size: 1rem;\n                      }\n                    }\n                  }\n                  .visualization-container {\n                    height: 65%;\n\n                    .chart {\n                      text {\n                        font-size: 10px;\n\n                        &.odd-year {\n                          visibility: hidden;\n                        }\n                      }\n                    }\n\n                    .y-axis {\n                      line {\n                        stroke: rgb(217, 203, 181);\n                      }\n                    }\n\n                    .controls-container {\n                      visibility: hidden;\n                    }\n                    .max {\n                      line {\n                        stroke: $red;\n                      }\n                      text {\n                        fill: $red;\n                      }\n                    }\n                  }\n                }\n              }\n\n              &.Ge-chart {\n                .newbuildings-energy {\n                  .description {\n                    width: calc(100% - 2rem);\n                    .title {\n                      margin: 0 auto;\n                      h4 {\n                        font-size: 1rem;\n                        padding-bottom: 0.5rem;\n                      }\n                    }\n\n                    height: 30%;\n                    position: absolute;\n                    bottom: 0;\n\n                    .caption {\n                      display: none;\n                    }\n\n                    .legend {\n                      margin-top: 0;\n                      height: 19%;\n                      width: 95%;\n                      display: inline-block;\n\n                      .legend-inner {\n                        font-size: 12px;\n                        // position: absolute;\n                        width: 100%;\n                        bottom: 1rem;\n\n                        .legend-elements-container {\n                          display: flex;\n                          flex-direction: row;\n                          flex-wrap: wrap;\n                          justify-content: flex-start;\n\n                          .legend-element {\n                            display: flex;\n                            flex: 0 1 auto;\n                            margin-left: 10px;\n                            color: $default-text;\n                            border: none;\n                            box-shadow: none;\n\n                            .element-color {\n                              align-self: center;\n                              border: none;\n                              box-shadow: none;\n                            }\n                            p {\n                              color: $default-text;\n                            }\n\n                            &.selected {\n                              .element-color {\n                                display: inline-block;\n                              }\n                              p {\n                                margin: 0;\n                                margin-left: 5px;\n                                font-size: 12px;\n                                font-weight: 800;\n                              }\n                            }\n                          }\n                        }\n                      }\n                    }\n                  }\n\n                  .visualization-container {\n                    height: 70%;\n                    .chart {\n                      -webkit-transform: translate(0, 10px);\n                      transform: translate(0, 10px);\n                    }\n                  }\n                  &.is-thumbnail {\n                    .description {\n                      display: none;\n                    }\n                  }\n\n                  .erneuerbare,\n                  div.erneuerbare {\n                    margin-bottom: 0;\n                  }\n                }\n\n                .avg-heating {\n                  .description {\n                    height: 25%;\n                    h4 {\n                      font-size: 1rem;\n                    }\n                  }\n\n                  .visualization-container {\n                    height: 75%;\n                    transform: translateY(-10px);\n                    -webkit-transform: translateY(-10px);\n\n                    .chart {\n                      .non-clipped-elements {\n                        -webkit-transform: translate(-15px, 35px);\n                        transform: translate(-15px, 35px);\n\n                        .measure-label {\n                          -webkit-transform: translate(-75%, 10px);\n                          transform: translate(-75%, 10px);\n                        }\n                        .year-label {\n                          -webkit-transform: translate(5px, 0);\n                          transform: translate(5px, 0);\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n\n              .is-thumbnail {\n                &.horizontal-bottom-layout {\n                  .visualization-container {\n                    height: 100%;\n                  }\n                }\n              }\n            }\n          }\n\n          .card {\n            //thumbnail\n            &-ordered {\n              //original ratio changed for styling\n              width: calc($portrait-minitablet-postcardwidth/2.1);\n              height: calc($portrait-minitablet-postcardwidth/1.5);\n            }\n            .card-front {\n              .side-outer {\n                .overlay-container {\n                  height: calc(10% - 1rem);\n\n                  .overlay-inner {\n                    .section-thumb {\n                      .word-art-title {\n                        display: none;\n                      }\n                    }\n\n                    .postcard-title {\n                      h4 {\n                        margin: 0;\n                        margin-top: 0.2rem;\n                        -webkit-transform: translate(0px, 0px) !important;\n                        transform: translate(0px, 0px) !important;\n                      }\n                    }\n\n                    .button-toggle-container {\n                      -webkit-transform: translate(0px, 0px) !important;\n                      transform: translate(0px, 0px) !important;\n\n                      .arrow-pointer {\n                        margin-top: 0.2rem;\n                        height: calc(100% - 0.2rem);\n                      }\n\n                      svg {\n                        .toggle {\n                          display: none;\n                        }\n\n                        .toggleResponsive {\n                          display: block;\n                        }\n\n                        text {\n                          font-size: 14px;\n                          margin: 0;\n                          padding: 0;\n                        }\n\n                        .toggle {\n                          display: none;\n                        }\n                        .toggleResponsive {\n                          display: none;\n                        }\n\n                        .togglePhone {\n                          display: block;\n                        }\n\n                        .controller-bg {\n                          cursor: pointer;\n                          fill: url(#MyGradient);\n                          stroke: $default-text;\n                        }\n                      }\n                    }\n                  }\n                }\n\n                .side-inner {\n                  height: calc(90% + 1rem);\n\n                  .details-container {\n                    height: 100%;\n\n                    .flex-container {\n                      display: block;\n                      position: relative;\n\n                      .text-container {\n                        width: 100%;\n                        overflow: hidden;\n                        position: absolute;\n                        border: none;\n                        z-index: 1;\n\n                        .text-inner-container {\n                          margin-top: 4rem;\n                          height: 79%;\n\n                          .section-title {\n                            margin-bottom: 0;\n                            // padding-top: 2rem;\n\n                            h2 {\n                              display: flex;\n                            }\n                          }\n\n                          .section-text {\n                            margin-top: 0;\n                            height: 100%;\n                            position: relative;\n\n                            p {\n                              margin-top: 0.5rem;\n                            }\n                          }\n                        }\n                      }\n\n                      .data-container {\n                        background-color: $light;\n                        position: absolute;\n                        width: 100%;\n                        height: 30%;\n                        top: 0;\n                        border: none;\n\n                        .locator-map {\n                          border: none;\n                          height: 70%;\n                          margin-top: 0.5rem;\n\n                          .locator-container {\n                            height: 100%;\n                            display: flex;\n                            justify-content: right;\n\n                            .locator-zoom {\n                              margin-left: 0;\n                              text-align: right;\n                              display: flex;\n                              justify-content: right;\n                              width: 35%;\n                            }\n\n                            .locator-background {\n                              width: 25%;\n                            }\n                          }\n                        }\n\n                        .lk-list {\n                          display: none;\n                        }\n                      }\n                    }\n\n                    .footer-container {\n                      border-left: none;\n                      height: 8%;\n                      width: 100%;\n                      border-top: 1px solid #484848;\n                      .footer-inner-container {\n                        height: 100%;\n                        display: inline-block;\n                        margin: 0rem 0rem 0rem 1rem;\n\n                        .logo-container {\n                          display: none;\n                        }\n\n                        .info-backside {\n                          line-height: 20px;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .info-container {\n          width: 25%;\n          position: absolute;\n          .info-container-content {\n            &.open {\n              transform: translate(7.5%, -100%) rotate(-2deg);\n              -webkit-transform: translate(7.5%, -100%) rotate(-2deg);\n            }\n          }\n        }\n\n        .sources-container {\n          .info-text-label {\n            display: none;\n          }\n        }\n\n        .button-container {\n          .button-switch-container {\n            display: none;\n          }\n\n          .inner-button {\n            .close {\n              margin-top: 1rem;\n            }\n          }\n        }\n\n        //postcardview\n        .side-container {\n          width: calc($portait-postcardheight/1.5);\n          height: calc($portait-postcardheight);\n        }\n      }\n    }\n  }\n}\n\n@include media('<=largephone') {\n  body {\n    // background-color: violet;\n\n    .indicators-iframe {\n      margin-right: 5.55%;\n      margin-left: 5.55%;\n      .main-container {\n        .word-art-title {\n          bottom: 3.5rem;\n          right: 1rem;\n          width: 50%;\n\n          .gruss-thumb {\n            font-size: 0.7rem;\n            margin-right: 0;\n          }\n\n          .wordart {\n            font-size: 1.5rem;\n            line-height: 1.2rem;\n          }\n        }\n\n        .selection-buttons {\n          .selection-container {\n            margin: 0;\n          }\n        }\n\n        .card-collection {\n          margin-top: -10px;\n          height: 100vh;\n          margin: 0 auto;\n          width: 100%;\n\n          .card {\n            .card-front {\n              .side-outer {\n                .overlay-container {\n                  .overlay-inner {\n                    margin-top: 0.25rem;\n                    padding-bottom: 0.25rem;\n                    .button-toggle-container {\n                      svg {\n                        text {\n                          font-size: 12px;\n                        }\n                      }\n                    }\n                  }\n                }\n\n                .side-inner {\n                  .details-container {\n                    .flex-container {\n                      .text-container {\n                        .text-inner-container {\n                          height: 76%;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          .card-container {\n            height: 100vh;\n            justify-content: left;\n            padding-left: 0.5rem;\n            margin-top: -0.6rem;\n          }\n          .chart-container {\n            .svg-container {\n              .vertical-layout {\n                .description {\n                  h4 {\n                    font-size: 14px;\n                  }\n                }\n              }\n              .horizontal-bottom-layout {\n                .description {\n                  h4 {\n                    font-size: 14px;\n                  }\n                }\n              }\n              &.Mo-chart {\n                .modal-split {\n                  .chart {\n                    .icon {\n                      display: none;\n                    }\n\n                    .no-icon {\n                      display: inline-block;\n                    }\n                  }\n                  .description {\n                    h4 {\n                      font-size: 14px;\n                    }\n                  }\n                }\n                .car-density {\n                  .visualization-container {\n                    .chart {\n                      &.active-chart {\n                        transform: translate(10px, -11px) scale(0.9);\n                        -webkit-transform: translate(10px, -11px) scale(0.9);\n                      }\n                    }\n                  }\n                }\n              }\n\n              &.Ge-chart {\n                .avg-heating {\n                  .visualization-container {\n                    transform: translateY(-10px);\n                    -webkit-transform: translateY(-10px);\n\n                    .chart {\n                      .non-clipped-elements {\n                        -webkit-transform: translate(-15px, 32px);\n                        transform: translate(-15px, 32px);\n\n                        .measure-label {\n                          -webkit-transform: translate(-75%, 6px);\n                          transform: translate(-75%, 6px);\n                        }\n                      }\n                    }\n                  }\n                  .description {\n                    h4 {\n                      font-size: 14px;\n                    }\n                  }\n                }\n                .newbuildings-energy {\n                  .description {\n                    .title {\n                      h4 {\n                        font-size: 14px;\n                      }\n                    }\n                    .legend {\n                      width: 100%;\n                    }\n                  }\n                }\n              }\n\n              &.La-chart {\n                .animal-density {\n                  .visualization-container {\n                    height: 60%;\n                    .chart {\n                      transform: translateY(-20px);\n                      -webkit-transform: translateY(-20px);\n                    }\n                  }\n                  .description {\n                    height: 40%;\n                    .legend {\n                      transform: translate(0, -40px);\n                      -webkit-transform: translate(0, -40px);\n                      svg {\n                        height: 50px;\n                      }\n                    }\n                    .caption {\n                      p {\n                        display: none;\n                      }\n                    }\n                  }\n                }\n              }\n\n              &.Ab-chart {\n                .biotonne-weight {\n                  .description {\n                    span {\n                      &.footnote {\n                        font-size: 14px;\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          .card {\n            &-ordered {\n              margin: 0.5rem 1.5rem -40px 1rem;\n              //original ratio changed for styling\n              width: calc($portait-postcardwidth/2.4);\n              height: calc($portait-postcardwidth/1.7);\n            }\n          }\n        }\n\n        .side-container {\n          width: $portait-postcardwidth;\n          height: calc($portait-postcardwidth * 1.5);\n        }\n\n        .social-media-layout {\n          .word-art-title {\n            -webkit-transform: scale(0.8) translate(-5px, -8px);\n            transform: scale(0.8) translate(-5px, -8px);\n          }\n        }\n\n        .info-container {\n          .info-container-content {\n            &.open {\n              width: 80vw;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}