/**
* Layout Elements
*/

section[class^=group-] {
  position:relative;
  display:none;
}

section[class^=group-].group-active {
  display:block;
}

.guide-active .header,
.guide-active .footer,
.guide-active .colophon,
.guide-active .lang-switch-s,

.map-active .header,
.map-active .footer,
.map-active .colophon,
.map-active .lang-switch-s,
.save-results {
  display:none;
}
/* map-active << guide-results*/
.group-result {
  height:100vh;
  background: #DDD;
}

.map {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1002;
}

.group-active .carousel-indicators {
  position:fixed;
}

.button-row.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-unit);
}

.button-row.center {position:relative}
.button-row.center .info {
  top: calc(var(--element-height) / 2 + var(--padding) - var(--spacing-unit));
  top:0;
  position: absolute;
  left: calc(50% + 110px + 1vw);
  height:var(--element-height);
  width:var(--element-height);
  border-radius:50%;
}

h3 .info {
  top: -0.7vw;
  left: 0.7vw;
}

.group-content > .layout:first-child > .column >.block-type-text:last-child p {max-width:100%;text-align:center; margin: 0 auto;}

.arrow-circle { width: 18.9vw; }

.illu {margin: var(--spacing-unit) 0;}

.btn-link.__dark {margin-bottom:1rem}

#content > section:first-child {
    background-image: url('/assets/icons/guide-start.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media screen and (max-width:767px) and (orientation:portrait) {
    #content > section:first-child {
        background-image: url('/assets/icons/startscreen-mobile.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
    }
}

.actions.top-right, .actions.bottom-right {
    z-index:10002;
}



@media screen and (max-width: 800px) {
    .arrow-circle { width: 72.58vw; }

    .main > .grid > .column:first-child {
        padding-bottom: calc(4 * var(--spacing-unit) + var(--element-height));
    }
}

/* ===== Bootstrap styles ====== */

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  
  .btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
  }
  
  /* end */
  
  #guideForm {z-index:99}
  
  .carousel-item {
    width: 100vw;
    min-height: 100vh;
    min-height: var(--window-inner-height);
    padding: var(--spacing-unit);
    
    background: var(--purple-light);
  }
  
  .glossary a {
    text-decoration: underline;
  }

  #glossary_production-impact,
  #glossary_impact-per-wear,
  #glossary_potential-savings {
    background-color: var(--color-brightgreen);
  }

  .question-inner { 
    position:relative;
    height: 100%;
    min-height:calc(100vh - 2 * var(--spacing-unit));
    border: var(--border-dashed);
    border-radius: var(--spacing-unit);
    background: var(--color-purple);
    padding: 0 calc(3 * var(--spacing-unit));
    gap: calc(3 * var(--spacing-unit));
  }
  
  
  
  .question-inner .question-right {
    padding: calc(3 * var(--spacing-unit)) 0;
  }
  
  .question-inner h2 {
    margin-bottom:1rem;
    font-size:2.6em;
    text-align:left;
  }
  
  
  .carousel-item.disabled .question-inner {
    opacity:0.5;
    pointer-events: none;
  }

  .guide-control {
    padding-right:10px;
    line-height:40px;
    font-weight:500;
  
    opacity: 1;
    cursor: pointer;
  }
  
  h2,.form-group {max-width:1040px;}
  
  .section-title {
    text-transform:uppercase;
    font-size:42px;
    margin-bottom:80px;
  }
  
  
  .layout.vertical__center .block-type-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .guide-form p.desc {
    font-size:18px;
    margin-bottom:80px;
    max-width: 420px;
    text-align: center;
  }
  
  .question-hidden {display:none}
  
  .btn-outline-primary:hover {
    border-style: dashed;
  }
  
  .btn[type="submit"] {
    margin: 100px auto;
    display: block;
    padding-left:2em;
    padding-right:2em;
    font-size:1.5em
  }
  
  #close {
    width:40px;
    height:40px;
    border:thin solid var(--color-dark);
    display:inline-flex;
    justify-content: center;
    align-items:center;
    border-radius:20px;
    cursor:pointer;
  }
  
  #close:before {
    content:"\2715";
    content:"";
    width: 0.8em;
    height: 0.8em;
    background: url(/assets/icons/plus.svg) no-repeat;
    transform: rotate(45deg);
    display:inline-block;
  }

  .group-guide.group-active .top-right {
    position:fixed;
  }
  
  .info {
    width: var(--element-height);
    height:var(--element-height);
    border:thin solid var(--color-dark);
    display:inline-flex;
    justify-content: center;
    align-items:center;
    border-radius:50%;
    position:relative;
    cursor:pointer;
    font-size: 18px;
    top:-10px;
  }
  
  .info:hover {
    background: var(--color-dark);
    color:white;
  }
  
  #progressbar {
    height: calc(100vh - 40px);
    width:10px;
    border: 1px solid var(--color-dark);
    border-radius:10px;
    background: inherit;
    display:flex;
    position: fixed;
    right:20px;
    top: 20px;
    overflow: hidden;
  }
  
  #progressbar.hidden {visibility:hidden;}
  
  progress { -webkit-appearance: none; transition: all 0.25s ease-in-out; }
  progress::-ms-fill {background: white}
  progress::-moz-progress-bar { background-color:white; }
  ::-webkit-progress-bar { background-color: inherit; }
  progress::-webkit-progress-value { background-color: white; border-right:var(--border-solid) }
  progress::-webkit-progress-value { transition: width 0.25s ease-in-out; }
  
  #progressbar .part {
    height:100%;
    width: 33%;
  }
  
  #progressbar .part > div {
    display: block;
    background: white;
    height: 100%;
    width:0;
  }
  
  #progressbar .part2 {
    border-left: 1px solid var(--color-dark);
    border-right: 1px solid var(--color-dark);
  }
  
  /* Input Range */
  
  :root {
    --range-height: 20px;
    --range-radius: 10px;
  }
  
  .frequency-range {
    margin-bottom: var(--padding)
  }
  input[type="range"] {
    background:transparent;
    -webkit-appearance: none;
    position: relative;
    z-index: 2;
    height:12px;
  }
  
  input[type=range]:focus {
    outline: none;
  }
  
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border-radius: 20px;
    border: var(--border-solid);
  }
  
  input[type=range]::-webkit-slider-thumb {
    border: var(--border-solid);
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -17px;
    box-shadow: none;
  }
  
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
  }
  
  input[type=range]::-webkit-slider-thumb:hover {
    background: black;
  }
  
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border-radius: 20px;
    border: thin solid var(--color-dark);
  }
  
  input[type=range]::-moz-range-thumb {
    border: 1px solid var(--color-dark);
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    box-shadow:none;
  }
  
  input[type=range]::-ms-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border-radius: 20px;
    border: thin solid var(--color-dark);
  }
  
  input[type=range]::-ms-fill-lower {
    background: #ffffff;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }
  input[type=range]::-ms-fill-upper {
    background: transparent;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }
  input[type=range]::-ms-thumb {
    border: 1px solid var(--color-dark);
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    box-shadow:none;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #fff;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #fff;
  }
  
  input[type="range"] + datalist {
    display:flex;
    position: relative;
    z-index: 1;
    top:10px;
    margin: 0 -50px;
    justify-content:space-between;
  
  }
  
  input[type="range"] + datalist option {
    width: 100px;
    font-size: 14px;
    height: 20px;
    position:relative;
    white-space: pre-wrap;
  }
  
  input[type="range"] + datalist option[label] {
    color: #2B2E34;
    text-align: center;
  }
  
  input[type="range"] + datalist option:first-child,
  input[type="range"] + datalist option:last-child {
    visibility: visible;
  }
  
  .datalist {
    display:flex;
    justify-content:space-between;
    margin: -15px -40px 0;
  }
  .datalist-opt {
    width:100px;
    overflow-wrap: break-word;
    display:inline-block;
    text-align:center;
    font-size:14px;
    font-weight: 500;
    vertical-align:top;
    position:relative;
    color: #2B2E34;
    height:50px;
  }
  
  .datalist-opt::after {
    content:"";
    width:1px;
    height:10px;
    background:var(--color-dark);
    position:absolute;
    top:0;
    left:50%;
  }
  
  .datalist-opt:first-child::after,
  .datalist-opt:last-child::after {
    display:none;
  }
  
  span.name {
    position: absolute;
    top: 30px;
    margin-left: -50%;
    text-align: center;
    width: 100%;
  }
  
  p.desc {font-weight:var(--font-weight-thin);}
  
  .inline-glossary {
    max-width: 12em;
    margin: 0 auto 1em;
    font-size: 11px;
    font-weight: var(--font-weight-thin);
  }
  
  .btn-check:focus+.btn-outline-primary, .btn-outline-primary:focus {outline:none; box-shadow:none}
  .unit-group {
    display:flex;
    border:thin solid var(--color-dark);
    border-radius: 40px;
    background:white;
    width:400px;
    max-width:100%;
  }
  
  .unit-form-element {
    position:relative;
  }
  
  .unit-group .inline-glossary {
    position: absolute;
    top:115%;
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 5px;;
  }
  
  .unit-form-element {flex: 1 1 100%;}
  .unit-form-element .btn {margin:0;border-radius:0;}
  
  .unit-form-element:first-of-type .btn {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  
  .unit-form-element:last-of-type .btn {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
  .unit-form-element .btn-outline-primary {
    border:0 none;
    border-right:thin solid var(--color-dark);
    width:100%;
  }
  
  .unit-form-element:last-of-type .btn-outline-primary {border-right:0}
  
  .num-group {
    display:flex;
    justify-content:center;
    align-items: center;
    margin-bottom:40px
  }
  
  .num-group .plus, .num-group .min {
    width:40px;
    height:40px;
    border: thin solid var(--color-dark);
    background: white;
    border-radius:20px;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size:20px;
    font-weight:500;
    margin:0;
    padding: 0 0 1px 1px;
  }
  
  .num-group .plus:hover, .num-group .min:hover,
  .num-group .plus:focus, .num-group .min:focus {background:var(--color-dark);color:white}
  
  .numfield {
    background: transparent;
    border: 2px dashed var(--color-dark);
    width: 140px;
    height: 140px;
    border-radius: 70px;
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    margin:0 16px;
  }
  
  input[type=number] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
  }
  
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  
  input[type=number]:focus {outline:none}
  
  .location input {font-weight:500;font-size:14px}
  
  #places:not(:empty) {
    max-height: 200px;
    overflow-y: scroll;
    background: white;
    border: thin solid var(--color-dark);
    position: absolute;
    width: 100%;
    z-index:999;
  }
  
  #places ul {
    margin:0;
    padding: 0.6em 1em;
  }
  
  #places li { cursor:pointer; line-height: 1.6em; }
  
  #selected {
    width:100%;
    margin-top:20px;
  }
  
  #selected span {
    cursor:crosshair;
    font-size:14px;
    font-weight:500;
    margin:0 1em 1em 0;
    line-height:20px;
    display:inline-block;
  }
  
  #selected span:before {
    content:"\2715";
    width:20px;
    height:20px;
    border:thin solid var(--color-dark);
    background:white;
    display:inline-flex;
    justify-content: center;
    align-items:center;
    margin-right:10px;
    font-size:12px;
    border-radius:10px;
  }
  
  #selected span:hover:before {
    background:var(--color-dark);color:white;
  }
  
  .getloc {
    display:block;
    cursor:pointer;
    text-decoration:underline;
    font-weight:500;
    margin:1em auto;
    text-align:left;
  }
  
  .spinner {
    height: 20px;
    width:20px;
    background: url('/assets/icons/spinner-purple.gif') no-repeat center;
    background-size: contain;
    display: inline-block;
    position: absolute;
    margin-left: 5px;
    visibility:hidden;
  }
  
  .form-group.select,
  .form-group.multiselect {
    text-align:left;
  }
  
  .form-element .btn {margin: 0 3px 1em;}
  input[type="checkbox"].btn-check {position:absolute}
  
  .glossary {
    display:none;
    position: fixed;
    top: var(--spacing-unit);
    left: var(--spacing-unit);
    right: var(--spacing-unit);
    bottom:var(--spacing-unit);
    background: white;
    z-index: 10003;
    overflow:scroll;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    height: calc(var(--window-inner-height) - calc(2 * var(--spacing-unit)));
    border: var(--border-dashed);
    border-radius:22px;
  }
  
  .show.glossary { display: flex; }
  
  .glossary .inner-wrapper {
    max-width:600px;
    padding:80px 1em;
  }
  
  .glossary .inner-wrapper h3 {margin: 0 auto 80px;}
  
  .glossary .inner-wrapper .btn {
    margin: 0 auto;
    text-transform: uppercase;
    display: block;
    min-width: 225px;
    width:fit-content;
  }
  
  .glossary h4 {
    text-align: left;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
  }
  
  .glossary p:last-of-type { margin-bottom:80px; }
  .quit-warning-screen .inner-wrapper > h3 { margin-bottom: 1rem; }
  .quit-warning-screen p { text-align:center; }
  
  .quit-warning-screen .btn-group {
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
  }
  
  .quit-warning-screen .btn-group > .btn {
    margin: 0 calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    width: 12em;
  }
  
  
  
  #result .leaflet-control-container .leaflet-top.leaflet-left {
    --aside-width: calc(50vw - var(--spacing-unit));
    top: var(--spacing-unit);
    overflow: scroll;
    height:calc(100vh - 2 * var(--spacing-unit));
    height:calc(var(--window-inner-height) - 2 * var(--spacing-unit));
    pointer-events: all;
  }
  
  .result-headline {
    background:white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:14px;
    font-weight:500;
    padding: 1rem;
    border-bottom:thin solid var(--color-dark);
  }
  
  .result-inner {
    display:flex;
    flex-wrap:wrap;
  }
  
  .collapsible + .result-inner {
    border-bottom: var(--border-dashed);
  }
  
  .result-group-headline {
      background:rgb(240,240,240);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size:14px;
      font-weight: var(--font-weight-bold);
      padding: 0 var(--spacing-unit);
      line-height: var(--element-height);
      border-bottom:thin solid var(--color-dark);
      position:relative;
      cursor:pointer;
  }
  
  .result-group:first-child .result-group-headline {
    border-top:0 none;
  }
  
  .result-group-headline.collapsible::after {
    content:'';
    width:0;
    height:0;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-top: .8em solid var(--color-darker);
    border-bottom: 0 none;
    position: absolute;
    right: calc(var(--spacing-unit) * 0.65);
    top: calc(50% - .4em);
  }
  
  .result-group-headline.collapsible.hidden {border-bottom: 0 none;}
  
  .result-group-headline.collapsible.hidden::after {
    border-bottom: 0.8em solid var(--color-darker);
    border-top: 0 none;
  }
  
  .result-group-headline.collapsed + .result-inner .listItem:nth-child(n+5) {
    display:none;
  }
  
  .result-group-headline.collapsible.hidden + .result-inner, .result-group-headline.collapsible.hidden + .result-inner + .show-all {display:none;}
  
  .result-inner .listItem {
    flex: 0 1 50%;
    border: none;
  }
  
  .result-inner .listItem:nth-child(n+3) {
      border-top: thin dashed var(--color-dark);
  }
  
  .result-inner .listItem:nth-child(odd) {
      border-right: thin dashed var(--color-dark);
  }
  
  .btn.show-all { 
    text-transform: uppercase;
    margin: var(--spacing-unit) auto;
    display: block;
    width: 10em;
  }
  
  .no-result-message {
    font-size: 22px;
    text-align: center;
    font-weight: 500;
    margin: var(--spacing-unit);
  }
  
  .result-footer > div {
    border-bottom: thin dashed var(--color-dark);
    padding: calc(4 *  var(--spacing-unit));
  }
  
  .result-footer > div:last-child {border-bottom:0 none}
  
  .result-footer > div h4 {
    margin-bottom: calc(2 * var(--spacing-unit));
    max-width:75%;
  }
  
  .result-footer > div .field {
    margin-bottom: calc(2 * var(--spacing-unit));
    max-width:50%;
  }
  
  .listItem {position:relative}
  .listItem.active {
    background: #D0B6E5;
  }
  
  .leaflet-tooltip {background-color: var(--color-purple)}
  
  .top-right { display: flex; position: absolute; gap: 10px;}
  .top-right .button-group, .bottom-right .button-group { position:relative; }

  .actions.bottom-right {
    bottom: var(--spacing-unit);
    right: calc(3 * var(--spacing-unit) + 80px) ;
    display: flex;
    position:absolute;
  }
  
  #guideForm .top-right {
    top: calc(2 * var(--spacing-unit));
    right: calc(2 * var(--spacing-unit));
  }
  
  @media screen and (min-width:768px) {
  
    .question-inner h2 {
      max-width:20em;
    }

    
  }
  
  .carousel-controls .disabled {opacity:0.5;cursor:auto;pointer-events:none}
  
  .top-right .button-group .btn, .bottom-right .button-group .btn {text-transform:uppercase}
  
  .top-right .button-group .btn:hover,
  .bottom-right .button-group .btn:hover {
    background: white;
    color:var(--color-dark);
    border-style:dashed;
  }
  
  .top-right .button-group .inner,
  .bottom-right .button-group .inner {
    border: thin solid var(--color-dark);
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
    position:absolute;
    bottom: calc(var(--element-height) + .5* var(--spacing-unit));
    display:none;
  }
  
  .top-right .button-group.show .inner,
  .bottom-right .button-group.show .inner {
    display:block;
    z-index:99;
  }
  
  .top-right .button-group.save-results {display:none!important}

  .bottom-right .button-group.save-results .inner,
  .top-right .button-group.save-results .inner {
    width:400px;
  }
  
  .save-results form {
    display:flex;
  }
  
  .save-results form input {
    flex: 1 1 50%;
    width: 50%;
    min-width:0;
  }
  
  #share-block {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items:center;
    text-align:center;
  }
  
  #share-block.show { display:flex; }
  
  #share-block a {
    flex: 0 0 40%;
    margin: 5%;
    display:block;
    line-height:0;
  }
  
  #share-block a svg {max-width:100%}
  
  #share-block a:hover {opacity:0.8}
  
  .save-results > .btn:after {
    content:"";
    background-image: url(/assets/icons/arrow-simple.svg);
    transform: rotate(-90deg) translateX(-0.25em);
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    margin-left: 0.5em;
    background-size: contain;
  }

  .bottom-right .btn {margin-bottom:0}
  
  .show-all .btn {background:var(--color-yellow)}
  .save-results .btn,.share-guide .btn {background:var(--purple-light);}
  .share-guide > .btn:after,
  .show-all > .btn:after {
    content:"";
    background-image: url(/assets/icons/arrow-simple.svg);
    transform: rotate(135deg) translateX(0.3em);
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    margin-left: 0.5em;
    background-size: contain;
  }

  .edit-guide > .btn:after {
    content:"";
    background-image: url(/assets/icons/arrow-simple.svg);
    transform: rotate(90deg) translateX(.2em);
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    margin-left: 0.5em;
    background-size: contain;
    filter: invert();
  }

  .edit-guide .btn {
    background: var(--color-dark);
    color: var(--color-white);
  }
  
  .edit-guide .btn a {
    color: var(--color-white);
  }
  .edit-guide .btn:after {
    filter: invert(1);
  }
  
  .form-element { display:inline-block;vertical-align: top; }
  .form-element.field-break { display: block; }
  .form-element.field-break > * { display:none; }
  
  /* Non-functional buttons */
  
  label[for="o4_neu"],
  label[for="o4_gebraucht"],
  .field-inactive label {
      border:thin dashed var(--color-white);
      color:#fff;
      background:transparent;
      pointer-events:none;
  }
  
  
  .leaflet-pane.leaflet-overlay-pane path.leaflet-interactive:hover { fill: var(--color-purple)!important }
  
  
  
  /* Bootstrap Carousel */
  
  
  .carousel {
    position: relative;
  }
    
  .carousel.pointer-event {
    touch-action: pan-y;
  }
    
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .carousel-inner::after {
    display: block;
    clear: both;
    content: "";
  }
    
  .carousel-item {
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
  }
    
  .carousel-item.active,
  .carousel-item-next,
  .carousel-item-prev {
    display: block;
  }
  
  
  
  .carousel-indicators {
    right: calc(2 * var(--spacing-unit));
    top: 17vh;
    bottom: 17vh;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    list-style: none;
    position:absolute;
  }

 
    .carousel-indicators [data-bs-target] {
      flex: 1 1 auto;
      width: 10px;
      padding: 0;
      margin-top: 3px;
      margin-bottom: 3px;
      text-indent: -999px;
      cursor: pointer;
      background: var(--purple-light) 0% 0% no-repeat padding-box;
  
      border-radius: 5px;
  
      transition: opacity 0.6s ease;
    }
    @media (prefers-reduced-motion: reduce) {
      .carousel-indicators [data-bs-target] {
        transition: none;
      }
    }
    .carousel-indicators .active {
      background: rgba(255,255,255,0.44) 0% 0% no-repeat padding-box;
    }
    
    
    
  
  .visually-hidden,
  .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  .carousel-item:first-of-type .carousel-control-prev {display:none;}
  
  
  .carousel-control-prev.hidden,
  .carousel-control-next.hidden {opacity:0;cursor:auto}
  
  .carousel-controls.desktop {
    margin-top: calc(2 * var(--spacing-unit))
  }
  .carousel-controls .btn-outline-primary {
    background:transparent;
    text-transform: uppercase;
  }
  
  .leaflet-top.leaflet-left:before {
    content: "Your Results";
    padding: 0 var(--spacing-unit);
    line-height: var(--element-height);
    border-bottom: var(--border-solid);
    display: block;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--purple-light);
  }
  
  html[lang="de"] .leaflet-top.leaflet-left:before { content: "Deine Ergebnisse"; }
  
  #viewSwitch { z-index:9999; }
  
  #viewSwitch>div.activeView { background: var(--color-purple) }
  
  .showMap {display:none;}
  
  
  
  @media screen and (max-width: 767px) {
  
    .lang-switch-s.top-right { display:none; }
    .column h2 { font-size:7vw; }
    .glossary p:last-of-type {margin-bottom:40px;}
    #result .leaflet-control-container .leaflet-top.leaflet-left {
      --aside-width: calc(100vw - 2* var(--spacing-unit));
      top: calc(2*var(--spacing-unit) + var(--element-height));
      height: calc(100vh - 2 * var(--spacing-unit) - var(--element-height) + 1px);
      height: calc(var(--window-inner-height) - 2 * var(--spacing-unit) - var(--element-height) + 1px);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: 0;
    }
    .result-inner {display:block;}
    .actions.top-right {
      right: var(--spacing-unit);
      top: var(--spacing-unit);
      justify-content: space-between;
    }
    .actions.top-right .btn {margin:0}
  
    .guide-results .actions.top-right {left:var(--spacing-unit)}
  

    .question-inner:first-child .section-title {
      font-size: 14px;
      line-height: 1em;
      text-transform: uppercase;
      font-weight: var(--font-weight-bold);
      letter-spacing: 0.3px;
      top: var(--spacing-unit);
      display: block;
      text-align: center;
      position: absolute;
      width: 100%;
      z-index: 9;
    }
  
    .carousel-control-next,
    .carousel-control-prev {
      background: white;
      height: 40px;
      width: 40px;
      border-radius: 20px;
      border: thin solid black;
      top: auto;
      bottom: 1em;
      position:fixed;
    }
  
  
    #progressbar {
      right: calc(2 * var(--spacing-unit));
      height: calc(100vh - 80px - 4em);
      top: calc(40px + 2em);
    }
  
    .question-inner.vertical__center { justify-content: flex-start; }
    .question-inner.vertical__center.part-intro { justify-content: center; }
    .part-intro.column h2 { font-size:9vw; }
    .question-inner h2 + .form-group, .question-inner p + .form-group { margin-top: calc(2 * var(--spacing-unit)); }
    .question-inner .desc {text-align:center; font-size:12px;}
  
    .info:not([aria-controls="#glossary_climate"]) {
      position: fixed;
      left: 1em;
      top: 1em;
    }

   
  
    .info[aria-controls="#data-notice"] { position:relative; }
    .quit-warning-screen .btn-group > .btn {width:fit-content}
    .form-element {display:block;}
    .top-right {top:1em;right:1em;}
    
    
    .glossary .inner-wrapper {padding:1em 1em 100px;}
    .glossary .inner-wrapper h3 {
      margin-bottom: 40px;
    }
  
    .form-group.range {
      width: 100%;
      position:relative;
      margin-left:auto;
      margin-right:auto;
    }
  
    .question-inner p + .form-group.range {margin-top:80px;}
    input[type="range"] { width: 100%!important; }
    input[type=range]::-webkit-slider-runnable-track { height: 10px; }
    input[type=range]::-webkit-slider-thumb {margin-top:-16px;}
    .datalist-opt::after { height:10px; top:1px; }
    .datalist-opt:last-child {color: transparent;}
  
    /*span.name {
      display: block;
      width: 300px;
      text-align: center;
      left: 50%;
      margin-left: -150px;
      top: auto;
      position:fixed;
      font-size:12px;
      margin-top: calc(-1 * var(--element-height));
    }*/
  
    .form-group.unit { width: 100%; margin-top: 80px; }
    .getloc {font-size:14px;}
  
    .result-group .result-inner .listItem {
      border-right: 0 none;
      border-top: 0 none;
      border-bottom: thin dashed var(--color-dark);
    }
  
    .result-inner .listItem:last-child {border-bottom: 0 none;}
    .result-footer > div {padding: 4em 1em;}
    .result-footer input[type="email"] {width: 100%;}
    .result-footer > div .field {max-width:100%;}
    #mc_embed_signup_scroll {margin-top:1em;}
  
  }
  
  @media screen and (max-width: 480px) {
    .datalist {
      margin-left: -1em!important;
      width: calc(100% + 2em)!important;
    }
    .datalist-opt::after {
      height: 10px;
      top: 0;
    }
  }
  
  #q7_serviceType .field-vermieten,
  #q7_serviceType .field-rent_out,
  #q7_serviceType .field-i_don_t_know {
    display:none !important;
  }
  
  /* C02 Calculator */
  
  .climate-impact-display {
    display: flex;
    position: fixed;
    bottom: calc(2* var(--spacing-unit));
    right: calc(2* var(--spacing-unit));
    flex-direction: row-reverse;
    gap: 10px;
    z-index: 3;
    pointer-events:none;
    /*
    border-radius: 10px;
    overflow:hidden;
    gap:1px;
    background:var(--color-dark);
    */
  }
  
  .climate-impact-display * {
    pointer-events:all
  }
  
  .climate-impact-display .inner-container {
    background: #88D6A3 0% 0% no-repeat padding-box;
    border-radius:10px;
    width: clamp(333px, 23.75vw, 33vw);
    align-self: flex-end;
    display: flex;
    flex-direction: column-reverse;

    /*border-radius:0;*/
  }

  @media screen and (min-width:768px) {
     
    .climate-impact-display .inner-container {
      max-width: 31vw;
    }

  }
  
  .climate-impact-display .inner-container.hidden {
    display: none;
  }
  
  .climate-impact-display .inner-container.disabled {
    opacity:0.65;
  }
  
  .climate-impact-display .inner-container .description {
    padding:13px 16px;
    font-size: 14px;
    font-weight:400;
  }
  
  .climate-impact-display .inner-container.collapsed .description {
    display:none;
  }
  
  .climate-impact-display .inner-container .description .readmore {
    margin-top: 10px;
    cursor:pointer;
    display: block;
    text-decoration: underline;
    text-align: right;
  }
  
  .climate-impact-display .inner-container .top-row {
    display: flex;
    font: normal normal bold 14px/30px Inter;
    gap: .75em;
    position:relative;
    background: #94EFB4;
    padding:5px 32px 5px 6px;
    border-radius:10px;
    cursor:pointer;

    /*border-radius:0;*/
  }
  .climate-impact-display .inner-container .top-row .label {
    overflow: hidden;
    white-space: nowrap;
  }
  
  .climate-impact-display .inner-container .toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-top: 12px solid #2B2E34;
    border-bottom:0;
    border-left: 7px transparent solid;
    border-right: 7px transparent solid;
    
    box-sizing: border-box;
  }
  
  .climate-impact-display .inner-container.collapsed .toggle {
    border-bottom: 12px solid #2B2E34;
    border-left: 7px transparent solid;
    border-right: 7px transparent solid;
    border-top:0 none;
  }
  
  .climate-impact-display .inner-container .top-row .number-display {
    border: var(--border-solid);
    border-radius: 8px;
    padding:0px 8px;
  }

  /* */

  .stepper-form-element {
    display:flex;
}

.stepper-form-element .btn {
    margin: 0 0 1em;
}

.stepper-form-element .btn.min {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.stepper-form-element .btn.plus {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
} 

.stepper-form-element input[type="number"] {
    border: 0 none;
    text-align: right;
    font-weight: 500;
    
    line-height: calc(var(--element-height) - 2px);
    height: calc(var(--element-height) - 2px);
    width: 2.5em;
    background:transparent;
    
}

.stepper-form-element .btn-check:checked + .btn-outline-primary input[type="number"] {
    color:white;
    
}

.stepper-form-element label.btn {
    border-radius:0;
    border-left:0 none;
    border-right:0 none;
    padding-left:0;
    
}

.stepper-form-element label.btn:active input[type="number"] {
    color:white;
}

.form-group.stepper + .glossary + .info {display:none}
 
.stepper-form-element + .info{
  height: var(--element-height);
  width: var(--element-height);
  top:0;
  margin-left:10px;
}


@media screen and (min-width:481px) {
  .stepper-container {
    display:flex;
  }
}

@media screen and (max-width:480px) {

  .stepper-form-element .btn {
    padding: 0 1em;
  }

  .question-inner > .column {
    overflow:hidden !important;
  }

  .question-inner .question-right {
    padding-top:calc(3 * var(--spacing-unit));
  }

}

.stepper-form-element {
  max-width:100%;
}
.stepper-form-element .btn.min,
.stepper-form-element .btn.plus {
  text-overflow:clip;
}

.form-group.radio .form-element {
  position:relative;
  margin-bottom:1em;
  display:flex;

}

.form-group.radio input,
.form-group.radio span,
.form-group.radio label {
  cursor:pointer;
}

.form-group.radio label {
  padding-left:1.5em;
}

.form-group.radio input[type="radio"] {
  position: relative;
  z-index: 1;
  opacity: 0;
  width:20px;
  height:20px;
}

.form-group.radio input[type="radio"] + span {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: var(--border-solid);
  display:inline-block;
  position:absolute;
  top:0;
  left:0;
  background:#fff;
}

.form-group.radio input[type="radio"]:checked + span {
  content: "";
  background: var(--color-dark);
}

   /* Infobox */
  .infobox {
    position: absolute;
    top: var(--spacing-unit);
    left: var(--spacing-unit);
    z-index: 3;
    background:#D0B6E5;
    border: var(--border-solid);
    border-radius: 10px;
    padding: calc(.75 * var(--spacing-unit));
    font-size:12px;
    font-weight:400;
    width: 23.75vw;
  }
  
  .infobox h3 {
    font-size: 12px;
    display: inline;
    text-align: left;
  }
  
  .infobox .read-more {
    text-decoration: underline;
    text-align: right;
    display:block;
    cursor: pointer;
  }
  
  .climate-results {
    background: #94EFB4;
    padding: var(--spacing-unit);
    border-radius: var(--spacing-unit);
  }
  
  .climate-results .result-production-impact > div,
  .climate-results .result-impact-per-wear > div,
  .climate-results .result-potential-savings-kg > div,
  .climate-results .result-potential-savings-rate > div,
  .climate-results .result-hd {
    border: var(--border-solid);
    padding: var(--spacing-unit);
    border-radius: var(--spacing-unit);
  }

  
  .climate-results div[class*="row-"] {
    display:flex;
    gap:20px;
  }
  .climate-results div[class*="row-"] p {
    font-weight:400;
    font-size: 1.2vw;
    margin:10px 0 6px;
  }
  
  .climate-results .row-1 > div > div {width:67%}
  
  .climate-results {
    font-size: 14px;
  }
  
  
  .climate-results .size-m {
    font-size:25px;
  }
  
  
  .climate-results .size-xl {
    font-size:58px;
  }
  
  .climate-results .size-l {
    font-size: 35px;
  }
  

  @media screen and (max-width:480px) {
    .climate-results .label {
      font-size:3vw;
    }
    .climate-results div[class*="row-"] p {
      font-size:4vw;
    }
    .climate-results .size-l {font-size:5vw;}
    .result-hd .label,
    .result-hd .num {
      font-size:4vw;
    }

    .climate-results .size-xl {
      font-size:7vw;
    }
  
    .result-hd > div {
      gap: 1em !important;
    }

    .result-hd > div > div {
      width: 50%;
    }
    .climate-results .result-impact-per-wear > div{padding: calc(.75* var(--spacing-unit));}


    /*TODO: Own dropdown on mobile */
    .actions .edit-guide, .actions .show-all, .actions .save-results, .actions .share-guide {
      display:none;
    }

    button#close-guide {
      background: var(--color-purple);
    }

  }

  .question-plural,
  .show-plural .question-singular {
    display:none;
  }
  
  .show-plural .question-plural {
    display:block;
  }

  .question-left .illustration {
    max-width: 80%;
  }
  
  .illustration svg {
    max-width: 100%;
  }
  
  #glossary-production-impact,
  #glossary-impact-per-wear,
  #glossary-potential-savings {
    background: var(--color-brightgreen) !important;
  
  }
  
  #glossary-production-impact .btn-outline-primary,
  #glossary-impact-per-wear .btn-outline-primary,
  #glossary-potential-savings .btn-outline-primary {
    background:transparent;
  }

  #final.result {
    display:none;
  }

  #final.result.show {
    display:block;
  }

  .mobile.carousel-controls {
    display: none;
  }
  /** MOBILE GUIDE STYLES */
  @media screen and (max-width:767px) {

    .carousel-item {
      padding: calc(var(--spacing-unit) / 2)
    }

  
    
    .question-inner {
      padding: var(--spacing-unit);
      gap:0;
      grid-template-rows: min-content 1fr;

    }

    .question-inner > .column {
      overflow:visible;
      width:100%;
    }

    .infobox {
      position:absolute;
      width:40px;
      height:40px;
      border-radius:20px;
      background: transparent;
      left:var(--spacing-unit);
      top:var(--spacing-unit);
    }

    .infobox .read-more::after {
      content: "i";
      font-size: 20px;
      text-decoration: none;
      color: var(--color-dark);
      line-height: 40px;
      width: 40px;
      text-align: center;
      display: inline-block;
      margin-left: -12px;
      margin-top: -12px;
      text-indent: 0;
      height: 40px;
      font-weight: 500;
    }

    .infobox h3 {
      display:none;
    }

    .infobox p {
      text-indent: 40px;
      font-size: 0;
      color: transparent;
    } 

    .question-inner .question-right {
    }

    /* Hide illustrations */
    .question-inner .illustration {
      display:none;
    }

    .question-title, .question-inner h2 {
      text-align:center;
      margin: 0 auto 1rem;
    }

    .form-group.select,
    .form-group.multiselect {
      text-align:center;
    }

    .question-inner .desc {
      font-size: var(--font-size-1);
    }

    .stepper.form-group {
      text-align:center;
    }

    .stepper-form-element {
      justify-content:center;
    }

     
    .stepper-form-element + .info {
      position: static;
    }

    .stepper-group > div {justify-content:center;}

    #guideForm .top-right {
      top: var(--spacing-unit);
      right: var(--spacing-unit);
    }

    .carousel-indicators {
      top: unset;
      bottom: calc(var(--spacing-unit) + 20px - 6px);
      right:calc(2 * var(--spacing-unit) + 40px);
      left: calc(2 * var(--spacing-unit) + 40px);
      flex-direction:row;
      gap: 6px;
    }

    .desktop.carousel-controls {
      display: none;
    }

    .mobile.carousel-controls {
      display: block;
    }

    .carousel-indicators [data-bs-target] {
      width: auto;
      height:6px;
    }

    
    .carousel-controls .carousel-control-prev,
    .carousel-controls .carousel-control-next {
      margin:0;
      padding:0;
      bottom: var(--spacing-unit);
      background: #FFFFFF url(/assets/icons/arrow-simple.svg) no-repeat;
      background-position: center;
      font-size:0;
      color:transparent;
      text-indent:40px;
      transform: rotate(-90deg);
      width:40px;
      height:40px;
    }

    

    .carousel-controls .carousel-control-prev {
      left: var(--spacing-unit);
      transform: rotate(90deg)
    }

    .carousel-controls .carousel-control-next {
      right: var(--spacing-unit);
      transform: rotate(-90deg)
    }

    .climate-impact-display {
      bottom: calc(2 * var(--spacing-unit) + 40px);
      left: var(--spacing-unit);
      right: var(--spacing-unit);
      flex-direction: column-reverse;
      gap: 3px;
    }

    .climate-impact-display .inner-container {
      width: 100%;
      min-width:0;
    }

    .datalist { margin-bottom: 4em; }

    #submitQuery {
      margin-left:auto;
      margin-right:auto;
    }

    #final p {
      text-align: center;
    }

    .climate-results {
      padding:.75em;
    }

    .climate-results p {
      text-align:left!important;
    }

    .button-row.center .info {position:static;}
    .climate-results .row-1 > div > div {width:100%;}

    .climate-results .result-production-impact > div, .climate-results .result-impact-per-wear > div, .climate-results .result-potential-savings-kg > div, .climate-results .result-potential-savings-rate > div, .climate-results .result-hd {
      padding:.75em;
    }
    .climate-results .label,
    .climate-results .size-l {
      font-size:4vw;
    }

    .climate-results div[class*="row-"] {
      gap:.75em;
    }

  }

  .marker-cluster {
    background: var(--purple-light);
    
  }
  .marker-cluster span {
    color:var(--color-dark);
    font-size:16px;
  }