/* https://gwfh.mranftl.com/fonts */
@font-face {
    font-display: swap;
    font-family: "Merriweather";
    font-style: normal;
    font-weight: 300;
    src: url("../Fonts/merriweather-v30-latin-300.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Merriweather";
    font-style: normal;
    font-weight: 400;
    src: url("../Fonts/merriweather-v30-latin-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Merriweather";
    font-style: normal;
    font-weight: 700;
    src: url("../Fonts/merriweather-v30-latin-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Merriweather Sans";
    font-style: normal;
    font-weight: 700;
    src: url("../Fonts/merriweather-sans-v26-latin-700.woff2") format("woff2");
}

/* Global Styles :: Overrides */    

.disclaimer .scroll-top {
    z-index: 9;
}

/* Content Element Styles */

.content_element-energiekostentool {
    overflow-x: clip;
    font-family: Merriweather, serif;
    /* background: #e3e3e3; */
    background: #fff;
    /* background-image: url(../Images/curved_background.svg); */
    /* background-image: url("data:image/svg+xml,%3Csvg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 1440 755.64'%3E%3C!-- Generator: Adobe Illustrator 29.8.2, SVG Export Plug-In . SVG Version: 2.1.1 Build 3) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23e3e3e3; %7D .st1 %7B fill: %23efefef; %7D %3C/style%3E%3C/defs%3E%3Crect class='st1' y='0' width='1440' height='755.64'/%3E%3Cpath class='st0' d='M1440,159.75c-111.71-63.53-249.12-113.66-364.06-137.58-232.49-56.47-479.98-2.49-704.96,132.88C234.9,236.91,92.75,372.98,0,472.55v283.09h1440V159.75Z'/%3E%3C/svg%3E"); */
    background-image: url(../Images/curved_background_2025.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 4rem;
}
.content_element-energiekostentool.first_steps_active {
    background-color: #e3e3e3;
}
#first_steps_illustration {
    display: none;
}
.first_steps_active #first_steps_illustration {
    display: block; 
    position: absolute;
    width: 39%;
    right: -3.5rem;
    height: auto;
    top: 12rem;
}
@media (max-width: 767px) {
    .first_steps_active #first_steps_illustration {
        order: 2;
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
        height: auto;
        margin-top: 1.5rem;
    }
}
.content_element-energiekostentool * {
    box-sizing: border-box;
}
#plugin__energiekostentool {
    position: relative;
    margin: auto;
    padding: 6.875em 0em;
    max-width: 71.25em;
}
@media (min-width: 1024px) {
    #plugin__energiekostentool {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 1023px) {
    #plugin__energiekostentool {
        padding: 3.4375em 0;
    }
}
@media (max-width: 767px) {
     #plugin__energiekostentool {
        padding: 0 0 3.4375em 0;
        display: flex;
        flex-direction: column;
    }
}
@media (max-width: 767px) {
    .content_element-energiekostentool.first_steps_active #plugin__energiekostentool {
        padding: 3.4375em 0 3.4375em 0;
    }
}

[disabled] {
    cursor: not-allowed !important;
}
[hidden] {
    display: none !important;
}
abbr[title],
[title] {
    cursor: help !important;
    text-decoration: none;
}
.is-busy {
    cursor: wait;
}
h1 {
    margin: 0 0 1.1em 0;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    line-height: 1.257;
    letter-spacing: -0.016em;
}
h2 {
    margin: 0 0 0.5em 0;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.5;
}
a {
    color: inherit;
}
a:focus,
a:active,
a:hover {
    color: #eb6c43;
}
label,
button {
    cursor: pointer;
}
.content_element-energiekostentool :focus,
body.using-keyboard .content_element-energiekostentool :focus,
.content_element-energiekostentool :focus,
.content_element-energiekostentool button:hover,
.content_element-energiekostentool button:active {
    outline: 5px auto Highlight !important;
    outline: 5px auto -webkit-focus-ring-color !important;
}
figure {
    margin: 0;
}

label {
    display: block;
    margin: 0 0 1.25em 0;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.75;
}

#select__graph {
    display: none;
}

/* --------------------------------------------------------------------------
    Panels
-------------------------------------------------------------------------- */
/* #panel__input__wunschfahrzeug {
    order: 1;
}
#panel__settings {
    order: 2;
}
#panel__group__data {
    order: 3;
}
#panel__preispfad {
    order: 4;
}
#panel__total_result {
    order: 5;
}
#panel__input__vergleichsfahrzeug {
    order: 5;
} */

.panel {
    position: relative;
    margin: 1.875em 0;
    /* padding: 1.875em 1.25em; */
    padding: 3.75em 3.75em;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0.5em;
    background: #fff;
}
.panel > :first-child {
    margin-top: 0;
}

#panel__group__settings {
    /* position: sticky;
    top: 5.5em; */
    /* background: #e3e3e3; */
    /* border-radius: 0.625em; */
    z-index: 1;
    background-color: #fff;
}
@media (max-width: 1023px) {
    #panel__group__settings {
        position: relative;
        top: auto;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
    }
}
@media (max-width: 767px) {
    .panel {
        padding: 1.875em 1.25em;
    }
}

#panel__settings {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0 0 1.25em 0;
    width: 100%;
    padding: 0.5em 1em 0 1em;
}
@media (max-width: 1023px) {
    #panel__settings {
        flex-direction: column;
        padding: 0;
        background-color: #fff;
    }
}
/* .accordion #accordion-panel-edit_vehicles {
    height: 0px !important;
    transition: height 0.1s ease-in-out;
    transition-delay: 0.5s;
}
.accordion.open #accordion-panel-edit_vehicles {
    height: auto !important;
    transition: height 0.1s ease-in-out;
    transition-delay: 0.5s;
} */

#panel__info_small,
#panel__info {
    display: none;
    border-radius: 0 0.625em 0 0;
    padding: 2em;
    max-width: 70ch;
    color: #fff;
    background-color: #586e35;
}
#panel__info_small {
    margin: 1em 0;
}
#panel__info {
    margin: 0 1em 1em 1em;
}
/* @media (min-width: 1024px) {
    #panel__info_small {
        display: none;
    }
}
@media (max-width: 1023px) {
    #panel__info {
        display: none;
    }
} */

#panel__group__data {
    position: relative;
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    gap: 1.9375em;
    /* margin-bottom: 1.9375em; */
    padding: 0 1em;
}
@media (min-width: 1024px) and (max-width: 1142px) {
    #panel__group__data > div {
        flex-grow: 1;
    }
}
@media (max-width: 1023px) {
    #panel__group__data {
        flex-direction: column;
    }
}

#panel__input__headline {
    margin: 0 0 2.56em 0;
    border-radius: 0.5em 0.5em 0 0;
    padding: 1.25em;
    text-align: center;
    font-family: Merriweather Sans;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875em;
    background: #D34618;
    color: #fff;
}
#panel__input__wunschfahrzeug {
    margin: 0 1em;
    max-width: 41.5625em;
    /* max-width: 625px; */
    max-width: 66%;
    padding: 0;
}
@media (max-width: 767px) {
    #panel__input__wunschfahrzeug {
        max-width: 100%;
    }
}

#panel__input__wunschfahrzeug {

    .form-section {
        padding: 2rem 1.5rem 2rem 1.5rem;
        border-bottom: 1px solid #DCDCDC;

        &.form-section--fahrzeugbestaetigung {
            border-bottom: none;
        }
    }
}

#panel__input__wunschfahrzeug .ekt__infobox {
    max-width: 100%;
    background-color: #E9FCF1;
}

#panel__input__wunschfahrzeug #wrap__data_input_method__1__wunschfahrzeug {
    padding: 0 1.5rem;
    padding-top: 1.5em;
}

#panel__input__wunschfahrzeug #button__skip_hsn_tsn,
#panel__input__wunschfahrzeug #button__jump_to_hsn_tsn {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 300;
    color: #102542;
    text-align: left;
    background: transparent;
    padding: 0;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.1em;
    text-decoration-color: #102542;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
}

#panel__input__wunschfahrzeug .ekt__infobox {
    margin: 1.5rem;
    background-color: #E9FCF1;
    &.ekt__infobox-red {
        background-color: #FAE2DE;
        margin: 1.5rem 0;
    }
}

#panel__input__wunschfahrzeug .ekt__infobox_skip_hsn_tsn {
    margin: 1.5rem 0;
}

/* Deaktivierte Formular-Elemente im Wunschfahrzeug-Bereich optisch abschwächen */
#panel__input__wunschfahrzeug input[disabled],
#panel__input__wunschfahrzeug select[disabled],
#panel__input__wunschfahrzeug button[disabled] {
    opacity: 0.5;
}

#panel__table {
    margin: 0;
    /* max-width: 41.5625em;
    max-width: 625px; */
    box-shadow: none;
    z-index: 3;
    padding-top: 0;
    background: transparent;
}
@media (max-width: 767px) {
    #panel__table {
        padding-left: 0px;
        padding-right: 0px;
    }
}
#panel__chart {
    margin: 0;
    /* max-width: 29.25em; */
    /* max-width: 20.875em; */
    flex-grow: 1;
    z-index: 3;
    background: transparent;
    padding-top: 0;
}
@media (max-width: 1023px) {
    #panel__table,
    #panel__chart {
        max-width: 100%;
    }
}
@media (max-width: 767px) {
    #panel__chart {
        padding-left: 0;
        padding-right: 0;
    }  
}
#panel__table .like-table-caption {
    display: none;
}

#group__show_hide_years {
    display: none;
}

#group__show_hide_years.modus-pkw_label {
    display: none;
}

#panel__table .year-card-info-row.contains-info-button {
    display: none;
}

#panel__input__vergleichsfahrzeug {
    margin: 0;
    padding: 1em 0em;
    box-shadow: none;
    border-radius: 0;
}
#panel__input__vergleichsfahrzeug .button-group button.active{
    background-color: #102542;
    color: #fff;
}

section {
    margin: 1.875em 0 0 0;
}

#wrap__vergleichsfahrzeug label {
    min-height: 3.5em;
}
#wrap__vergleichsfahrzeug {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

#section__data_input_method__vergleichsfahrzeug {
    width: 100%;
}

#section__data_input_method__vergleichsfahrzeug .button-group {
    flex-direction: row;
    flex-wrap: nowrap;
}

#section__data_input_method__vergleichsfahrzeug .button-group button {
    width: auto;
    max-width: 49%;
}

#wrap__data_input_method__1__vergleichsfahrzeug,
#wrap__data_input_method__2__vergleichsfahrzeug {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
#wrap__data_input_method__1__vergleichsfahrzeug > *,
#wrap__data_input_method__2__vergleichsfahrzeug > * {
    flex-basis: calc(100% / 3 - 2 / 3 * 1em);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 767px) {
    #wrap__data_input_method__1__vergleichsfahrzeug > *,
    #wrap__data_input_method__2__vergleichsfahrzeug > * {
        flex-basis: 100%;
    }
}
#text_or {
    padding: 0.6875em;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.75;
}

#wrap__faq {
    margin-top: 5rem;
}
@media (max-width: 1023px) {
    #wrap__faq {
        margin-left: 1em;
        margin-right: 1em;
    }
}

#wrap__faq__headline {
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
}

#wrap__faq__headline h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
#wrap__faq__headline p {
    margin-bottom: 2.5rem;
}
/* --------------------------------------------------------------------------
    Accordion
-------------------------------------------------------------------------- */
.accordion {
    background-color: transparent;
    border-top: 1px solid #DCDCDC;
    width: 100%;
    padding: 1.5rem 0.5rem 1rem 0;
}
.accordion:last-child {
    border-bottom: 1px solid #DCDCDC;
}
.accordion__header {
    margin: 0;
}

#i-chevron-bottom {
    fill: #102542 !important;
}

.accordion__header button span {
    line-height: 29px;
}
.accordion__panel {
    margin: 0;
}
.accordion__content {
    margin: 0;
}
.accordion__content label {
    margin-top: 1rem;
}

.form-section.is-disabled,
.accordion--form.is-disabled {
    opacity: 0.5;
}

.form-section.is-disabled .accordion__content,
.accordion--form.is-disabled .accordion__content {
    pointer-events: none;
}

.form-section.is-disabled .accordion__header button,
.accordion--form.is-disabled .accordion__header button {
    cursor: default;
}

#panel__settings .accordion {
    border-bottom: none;
    padding: 1.5rem 0.5rem 0.25rem 0;
}
#panel__settings .accordion:last-child {
    border-bottom: 1px solid #DCDCDC;
    padding-bottom: 1.25rem;
}

#panel__settings .accordion__panel {
    max-width: 100%;
}

#panel__settings .accordion.open .accordion__panel {
    margin-top: 2rem;
}

#panel__settings .accordion__header label {
    display: block;
    margin: 0;
    font-family: Merriweather Sans, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #102542;
}

/* --------------------------------------------------------------------------
    Button-Group
-------------------------------------------------------------------------- */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.button-group.ghost {
    justify-content: center;
}
.button-group.primary-single {
    margin: 0.625em 0 2.56em 0;
    justify-content: center;
}
.button-group.secondary {
    margin: 0.625em 0;
    justify-content: center;
}
@media (max-width: 767px) {
    #panel__input__vergleichsfahrzeug .button-group.ghost {
        flex-direction: column;
        align-items: center;
    }
}
.button-group button {
    border-radius: 0.3125em;
    border: 1px solid #102542;
    padding: 0.6875em;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.75;
    hyphens: auto;
}
.button-group.primary button {
    flex-grow: 1;
    color: #102542;
    background: transparent;
    width: 100%;
}
.button-group.primary-single button {
    color: #102542;
    background: transparent;
}
.button-group.ghost button {
    color: #000;
    background: transparent;
}
.button-group.secondary button {
    padding: 0.6875em 1.25em;
    max-width: 18.6875em;
    color: #fff;
    background: #D34618;
}
.button-group [aria-pressed="true"] {
    font-weight: 700;
}
.button-group.primary [aria-pressed="true"] {
    color: #fff;
    background: #102542;
}
.button-group.ghost button::before {
    display: inline-block;
    content: "";
    border-radius: 100%;
    margin-right: 0.625em;
    width: 1.25em;
    height: 1.25em;
    vertical-align: sub;
    background-color: #e3e3e3;
}
.button-group.ghost [aria-pressed="true"]::before {
    background-color: #ff6760;
}
/* --------------------------------------------------------------------------
    Input Text Datalist
-------------------------------------------------------------------------- */
input[type="text"][list] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    border-radius: 0.3125em;
    border: 1px solid #102542;
    padding: 0.6875em;
    width: 100%;
    height: auto;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.75;
    color: #102542;
}
input[type="text"][list]::-webkit-calendar-picker-indicator {
    opacity: 0;
}
input[type="text"][list]::placeholder {
    color: #102542;
}
datalist {
    cursor: pointer !important;
}
option {
    cursor: pointer !important;
}
datalist option {
    cursor: pointer !important;
}

/* --------------------------------------------------------------------------
    Buttons for select
-------------------------------------------------------------------------- */
.round-button {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0.75em 0 0 0;
    padding: 0;
}

@media (max-width: 767px) {
    .round-button {
        justify-content: start;
        align-items: start;
        /* flex-direction: column; */
    }
}

.round-button button {
    border-radius: 55px;
    border: 1px solid #05547C;
    background-color: #ECF2F8;
    padding: 0.6875em 1em;
    width: auto;
    height: auto;
    font-family: Merriweather, serif;
    font-weight: 700;
    line-height: 1.75;
    font-size: 100%;
    color: #102542;
}
.round-button button.active {
    border-radius: 55px;
    border: 1px solid #05547C;
    background-color: #05547C;
    padding: 0.6875em 1em;
    width: auto;
    height: auto;
    font-family: Merriweather, serif;
    font-weight: 700;
    line-height: 1.75;
    font-size: 100%;
    color: #fff;
}

/* --------------------------------------------------------------------------
    Select
-------------------------------------------------------------------------- */
.select-component {
    margin: 1.875em 0 0 0;
}
@media (max-width: 1023px) {
    #panel__group__settings {
        /* margin: 1.875em 0em; */
        margin: 1.875em 0em 0em 0em;
        /* border-radius: 0.5em; */
        padding: 0.875em 1.25em 1.875em 1.25em;
        background: #fff;
        /* box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); */
    }
}
.select-component-co2_preispfad {
    position: relative;
    min-width: 7.375em;
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    z-index: 3;
    background-color: #fff;
    border-radius: 0.5em;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
    text-align: center;
    margin-top: -1rem;
}

@media (max-width: 767px) {
    .select-component-co2_preispfad {
        text-align: left;
    }
}
.select-component label {
    margin: 0 0 0.5em 0;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.5;
}
.select-component-co2_preispfad label {
    margin: 0;
    border-radius: 0 0.625em 0 0;
    padding: 0.62em 0em;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.25em;
    text-align: center;
    /* color: #fff; */
    /* background-color: #102542; */
}
.select-component-co2_preispfad label.modus-pkw_label {
    background-color: #586e35;
}
@media (max-width: 1023px) {
    .select-component-co2_preispfad label {
        margin: 0 0 0.5em 0;
        width: auto;
        padding: 0;
        /* font-size: 1.25em; */
        line-height: 1.875em;
        text-align: left;
        color: #102542;
        background-color: transparent;
    }
    .select-component-co2_preispfad label.modus-pkw_label {
        background-color: transparent;
    }
}

.select-component-co2_preispfad .button-group {
    justify-content: center;
}

.szenario-radio-group {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    justify-content: center;
    align-items: center;
}
@media (max-width: 767px) {
    .szenario-radio-group {
        gap: 0;
        justify-content: start;
        align-items: start;
        flex-direction: column;
    }
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.75;
    margin: 0;
}

.radio-label input[type="radio"] {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    accent-color: #102542;
}

.radio-label span {
    user-select: none;
    font-family: "Merriweather", serif;
    font-weight: 600;
}

.szenario-radio-group input[type="radio"] {
    border-color: #102542;
    margin-right: 0rem;
}
.szenario-radio-group input[type="radio"]:hover {
    border-color: #102542;
    background-color: #102542;
}

.szenario-radio-group input[type="radio"]:checked {
    background-color: #102542;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1em;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4104 0L4.2962 5.67215L1.71048 2.91275L0 4.51556L4.17737 8.97354L12 1.72311L10.4104 0Z' fill='white'/%3E%3C/svg%3E");
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    border-radius: 0.3125em;
    border: 1px solid #102542;
    padding: 0.6875em;
    width: 100%;
    height: auto;
    font-family: Merriweather, serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.75;
    color: #102542;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><path d="M1,1 L8,8 L15,1" stroke="%23102542" fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" /></svg>');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 0.6875em);
    background-position-y: center;
    background-size: 1em;
    cursor: pointer;
}
select[disabled] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><path d="M1,1 L8,8 L15,1" stroke="%23102542" stroke-opacity="0.25" fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" /></svg>');
    border: 1px solid #e3e3e3;
}
/* --------------------------------------------------------------------------
    Input Range Component
-------------------------------------------------------------------------- */
label[for="range__fahrleistung"] {
    white-space: nowrap;
}
.input_range-component {
    position: relative;
    margin: 0;
    width: 100%;
}
#component__haltedauer {
    min-width: fit-content;
}
.input_range-component label {
    margin: 0;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.875em;
}
.input_range-sublabels {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    margin: 0.62em 0 0 0;
    width: 100%;
}
.input_range-sublabels label {
    font-family: Merriweather;
    font-size: 0.875em;
    font-style: normal;
    font-weight: 700;
    line-height: 0.875em; /* 100% */
    color: #102542;
}
.ekt__infobox {
    display: flex;
    align-items: flex-start;
    max-width: 75%;
    gap: 1em;
    background-color: #FFE5E5;
    border-radius: 0.625em;
    padding: 1em 2em;
    margin: 1.5em 0;
    position: relative;
    text-align: left;
}

@media (max-width: 767px) {
    .ekt__infobox {
        max-width: 100%;
        padding: 1em 1em;
    }
}

#panel__info_small_wrap {
    max-width: 75%;
    margin: 1.5rem;
}

#panel__info_small {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    background-color: #FFE5E5;
    border-radius: 0.625em;
    padding: 1em 2em;
    margin: 0;
    margin-left: 2rem;
    position: relative;
    text-align: left;
    color: #102542;
}

@media only screen and (max-width: 1039px) {
    #panel__info_small_wrap {
        margin-left: 0px;
    }
    #panel__info_small {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 767px) {
    #panel__info_small_wrap {
        max-width: 100%;
        margin-right: 0px;
        margin-left: 0px;
    }
    #panel__info_small {
        max-width: 100%;
    }
}

.ekt__infobox__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    background-color: #707C8E;
    border-radius: 50%;
    flex-shrink: 0;
    position: absolute;
    top: -5.5px;
    left: -5.5px;
    border: 1px solid #fff;
}
.ekt__infobox__icon-text {
    color: #fff;
    font-family: "Merriweather", serif;
    font-size: 0.875em;
    font-weight: 700;
    line-height: 1;
}
.ekt__infobox__text {
    color: #102542;
    font-weight: 300;
    font-family: "Merriweather", serif;
    font-size: 0.875em;
    line-height: 1.5;
    flex: 1;
}
.input_range-slider_wrap {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0.76em 0 2.13em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}
.input_range-inputoutput_wrap {
    display: flex;
    justify-content: left;
    gap: 2rem;
}

@media (max-width: 767px) {
    .input_range-inputoutput_wrap {
        flex-direction: column;
    }
}

.input_range-inputoutput_column {
    display: flex;
    gap: 0.5ch;
    align-items: center;
}
.input_range-inputoutput-unit {
    font-size: 1em;
}
.input_range-inputoutput-unit .nowrap{
    display: block;
}
output {
    display: inline-block;
    padding: 0;
    min-width: 7ch;
    height: 3.125em;
    font-family: Merriweather;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: calc(3.125em - 2px);
    text-align: center;
    border: 1px solid rgba(112, 124, 142, 0.60);
    background: #F4F4F4;
    border-radius: 0.3125em;
    color: #102542;
}
input[type="number"] {
    border: 1px solid rgba(112, 124, 142, 0.60);
    background: #F4F4F4;
    padding: 0;
    max-width: 7ch;
    border-radius: 0.3125em;
    height: 3.125em;
    font-family: Merriweather;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: calc(3.125em - 2px);
    text-align: center;
    color: #102542;
}

input[type="range"] {
    /* emoving default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    position: relative;
    outline: none;
    border-radius: 15px;
    width: 100%;
    height: 1.875em;
    height: 0.75rem;
    background: transparent;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}
input[type="range"]:active {
    cursor: grabbing;
}

.input_range-background {
    position: absolute;
    border-radius: 15px;
    width: 100%;
    /* height: 1.875em; */
    height: 0.75rem;
    /* background-color: #102542;
    background-image: linear-gradient(#ffa484, #ffa484); */
    background-color: #447ebc;
    background-image: linear-gradient(#102542, #102542);
    background-repeat: no-repeat;
}
.input_range-background.modus-pkw_label {
    background-color: #292b2d;
    background-image: linear-gradient(#818181, #818181);
}

.ticks {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    /* height: 1.875em; */
    height: 4px;
}
.tick {
    width: 4px;
    height: 4px;
    /* background-color: #ECF2F8; */
    background-color:#8792a1;
    border-radius: 4px;
}

.range_datalist {
    position: absolute;
    top: 1.875em;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
.range_datalist option {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 2ch;
    line-height: 1;
    font-size: 12px;
    transform: translateY(0.5em);
    text-indent: -9999px;
}
#datalist__ladeprofil.range_datalist {
    top: 1.5em;
}

#datalist__ladeprofil.range_datalist option {
    text-indent: 0px;
}
#input_range-component__ladeprofil .input_range-inputoutput_wrap {
    padding-top: 0.75rem;
}

.range_datalist option.even {
    transform: translateY(-4.5em);
}

/* Thumb: webkit */
/* input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 41px;
    width: 41px;
    background-color: #102542;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    border-radius: 50%;
    border: 1px solid #fff;
    transition: 0.2s ease-in-out;
} */
/* input[type="range"]:disabled::-webkit-slider-thumb {
    background-color: #818181;
} */

/* Thumb: Firefox */
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
    /* background-image: url(../Icons/slider_thumb.svg); */
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    border-radius: 50%;
    border: 1px solid #fff;
    transition: 0.2s ease-in-out;
    height: 30px;
    width: 30px;
    background-color: #102542;  
    border-color: #102542;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
    background-image: none;
}
input[type="range"]:disabled::-webkit-slider-thumb,
input[type="range"]:disabled::-moz-range-thumb {
    background-color: #818181;
    /* background-image: url(../Icons/slider_thumb_grey.svg); */
}

/* Hover, active & focus Thumb: Webkit */
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
    /* box-shadow: 0 0 0 0.25em #112542; */
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

/* Hover, active & focus Thumb: Firefox */
input[type="range"]::-moz-range-thumb:hover,
input[type="range"]:active::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
    /* box-shadow: 0 0 0 0.25em #112542; */
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

.nowrap {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
    Table
-------------------------------------------------------------------------- */
table {
    border-spacing: 0;
    border-collapse: collapse;
}
.table-wide {
    width: 100%;
}
@media screen and (max-width: 767px) {
    .table-wide {
        display: none;
    }
}
.group-table-small {
    display: none;
}
@media screen and (max-width: 767px) {
    .group-table-small {
        display: block;
    }
    .table-small {
        margin-top: 1.25em;
        width: 100%;
    }
}
.comparison-panel__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.comparison-panel__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.comparison-panel__scenario {
    font-size: 0.875rem;
    color: #5C5C5C;
}
.vehicle-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.vehicle-card {
    position: relative;
    padding: 2rem 2rem 2.5rem;
    border-radius: 1.25rem;
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(31, 80, 135, 0.16);
    border-top: 0.5rem solid #F39200;
}

.vehicle-card--secondary {
    border-top-color: #00858C;
}
.vehicle-card__badge {
    position: absolute;
    top: -0.75rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #F9CC58;
    color: #102542;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.vehicle-card__badge:empty {
    display: none;
}
.vehicle-card__name {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.vehicle-card__metrics {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}
.vehicle-card__metric {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 1rem;
    gap: 1rem;
}
.vehicle-card__metric:last-child {
    background: #ECF2F8;
}
.vehicle-card.vehicle-cost-winner .vehicle-card__metric:last-child {
    background-image: url("data:image/svg+xml,%3Csvg width='39' height='48' viewBox='0 0 39 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.13291 47.7892L7.56966 39.7787L0 42.8301L9.62284 25.1074L18.7562 30.0665L9.13291 47.7892Z' fill='%23C7017F'/%3E%3Cpath d='M29.6779 47.7892L31.2412 39.7787L38.8108 42.8301L29.188 25.1074L20.0547 30.0665L29.6779 47.7892Z' fill='%23C7017F'/%3E%3Cpath d='M37.5193 16.7013L36.474 15.4488C36.2339 15.1614 36.0658 14.821 35.9836 14.4556C35.9013 14.0903 35.9074 13.7107 36.0011 13.3481L36.4074 11.7686C36.5465 11.2316 36.4917 10.6627 36.2525 10.1621C36.0134 9.6615 35.6053 9.26136 35.1001 9.03211L33.6148 8.35733C33.2746 8.20189 32.9762 7.96775 32.7443 7.67426C32.5124 7.38076 32.3536 7.03632 32.2811 6.66936L31.9638 5.06914C31.8562 4.5249 31.5599 4.0361 31.1273 3.68883C30.6946 3.34156 30.1533 3.15809 29.5986 3.17074L27.9676 3.20689C27.5932 3.21538 27.2223 3.13453 26.8854 2.97105C26.5485 2.80756 26.2555 2.56616 26.0306 2.26683L25.0499 0.963176C24.7167 0.519256 24.2374 0.207214 23.6967 0.0820575C23.1559 -0.0430992 22.5883 0.0266647 22.094 0.279051L20.6404 1.01964C20.3067 1.18943 19.9374 1.27736 19.563 1.27616C19.1886 1.27496 18.8199 1.18466 18.4873 1.01274L17.0378 0.263207C16.5454 0.00863308 15.979 -0.0642039 15.4383 0.0575033C14.8975 0.179211 14.417 0.48767 14.0811 0.928645L13.0927 2.22661C12.8659 2.52463 12.5713 2.76428 12.2334 2.92572C11.8955 3.08715 11.524 3.16572 11.1496 3.1549L9.51892 3.10818C8.96435 3.09208 8.42188 3.27219 7.98706 3.61679C7.55224 3.96139 7.25297 4.44837 7.14195 4.99196L6.81452 6.59015C6.73946 6.95694 6.57807 7.30057 6.34373 7.59256C6.10939 7.88455 5.80884 8.1165 5.46699 8.26918L3.97727 8.93502C3.47072 9.1611 3.06018 9.55863 2.81792 10.0576C2.57566 10.5567 2.51722 11.1251 2.65289 11.663L3.05142 13.2453C3.14269 13.6085 3.14608 13.9882 3.0613 14.353C2.97652 14.7178 2.80601 15.0571 2.56392 15.3428L1.51092 16.5888C1.15245 17.0123 0.954921 17.5487 0.953137 18.1035C0.951354 18.6584 1.14543 19.196 1.50117 19.6218L2.54686 20.8739C2.78676 21.1615 2.95473 21.502 3.03689 21.8674C3.11905 22.2328 3.11303 22.6124 3.01933 22.975L2.61105 24.5545C2.47194 25.0916 2.52679 25.6605 2.76593 26.1611C3.00507 26.6616 3.41317 27.0618 3.91836 27.291L5.40361 27.9658C5.74447 28.1208 6.04355 28.3546 6.2761 28.6481C6.50866 28.9415 6.66801 29.2861 6.74099 29.6534L7.05827 31.2536C7.16592 31.7978 7.46217 32.2866 7.89483 32.6339C8.32749 32.9812 8.86881 33.1646 9.42346 33.152L11.0545 33.1154C11.4289 33.107 11.7999 33.1879 12.1368 33.3515C12.4736 33.515 12.7666 33.7565 12.9915 34.0559L13.9718 35.36C14.3049 35.8032 14.7836 36.1148 15.3237 36.2399C15.8639 36.365 16.4308 36.2957 16.9249 36.0441L18.3784 35.3035C18.712 35.1335 19.0814 35.0454 19.4558 35.0466C19.8303 35.0478 20.199 35.1382 20.5315 35.3104L21.9806 36.0599C22.4733 36.315 23.0401 36.3881 23.5814 36.2663C24.1226 36.1445 24.6035 35.8356 24.9394 35.3941L25.9278 34.0965C26.1546 33.7985 26.4491 33.5588 26.7871 33.3974C27.125 33.236 27.4965 33.1574 27.8709 33.1682L29.5016 33.2146C30.0561 33.2307 30.5985 33.0506 31.0333 32.7061C31.4681 32.3616 31.7674 31.8747 31.8785 31.3312L32.206 29.733C32.2811 29.3662 32.4425 29.0225 32.6769 28.7305C32.9113 28.4385 33.212 28.2066 33.5539 28.054L35.0436 27.3881C35.5502 27.162 35.9608 26.7644 36.2031 26.2653C36.4454 25.7662 36.5038 25.1977 36.368 24.6597L35.9695 23.0778C35.8784 22.7145 35.8751 22.3348 35.9598 21.97C36.0446 21.6052 36.215 21.2658 36.457 20.9799L37.51 19.7344C37.8684 19.3108 38.0658 18.7744 38.0675 18.2195C38.0692 17.6647 37.8751 17.127 37.5193 16.7013Z' fill='%23F39200'/%3E%3Cpath d='M31.5509 19.4556C32.2676 12.7972 27.4509 6.81837 20.7925 6.10161C14.134 5.38485 8.15518 10.2016 7.43843 16.86C6.72167 23.5185 11.5384 29.4973 18.1969 30.2141C24.8553 30.9308 30.8341 26.1141 31.5509 19.4556Z' fill='%23FFDC64'/%3E%3Cpath d='M19.9183 26.1157C19.5361 26.1157 19.1696 25.9639 18.8994 25.6937C18.6292 25.4234 18.4773 25.0569 18.4773 24.6747V14.3787L17.4442 15.0844C17.1285 15.2877 16.7459 15.3597 16.3779 15.2851C16.0099 15.2106 15.6854 14.9953 15.4737 14.6852C15.2619 14.3751 15.1796 13.9946 15.2441 13.6247C15.3086 13.2548 15.515 12.9247 15.8192 12.7046L19.1066 10.4588C19.3231 10.3109 19.5759 10.2249 19.8377 10.21C20.0995 10.1951 20.3604 10.2519 20.5923 10.3743C20.8242 10.4967 21.0182 10.6801 21.1536 10.9047C21.289 11.1293 21.3605 11.3865 21.3605 11.6487V24.6747C21.3605 24.8641 21.3232 25.0515 21.2507 25.2265C21.1782 25.4014 21.072 25.5603 20.938 25.6941C20.8041 25.8279 20.6451 25.934 20.4701 26.0064C20.2951 26.0787 20.1076 26.1159 19.9183 26.1157Z' fill='%23102542'/%3E%3C/svg%3E");
    background-position: calc(100% - 0.75rem) center;
    background-size: auto 48px;
    background-repeat: no-repeat;
}

.vehicle-card__total {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.vehicle-card__total span {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5C5C5C;
}
.vehicle-card__total strong {
    font-size: 1.75rem;
    font-family: "Merriweather Sans", sans-serif;
}
.vehicle-card--winner {
    border-color: #F9CC58;
    box-shadow: 0 30px 70px rgba(249, 204, 88, 0.35);
}
.comparison-footnote {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #5C5C5C;
}
.comparison-footnote__text {
    font-style: italic;
}
.visually-hidden {
    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;
    border: 0 !important;
}
#figcaption__table {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.button-edit_fahrzeug {
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    z-index: 1;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.272191 15.0437L0.182812 15.1331C-0.0609375 15.3769 -0.0609375 15.7731 0.182812 16.0169C0.426562 16.2606 0.822813 16.2606 1.06656 16.0169L1.15594 15.9275C1.55594 16.1181 2.01719 16.1644 2.45781 16.0444C3.39219 15.7894 4.39094 15.5169 4.88844 15.3813C5.20282 15.2956 5.49032 15.1287 5.72094 14.8981L15.6509 4.96812C16.0022 4.61687 16.1997 4.14 16.1997 3.6425C16.1997 3.145 16.0022 2.66813 15.6509 2.31688L13.8828 0.548749C13.5316 0.197499 13.0547 0 12.5572 0C12.0597 0 11.5828 0.197499 11.2316 0.548749C8.88593 2.89437 2.59531 9.185 1.30156 10.4787C1.07093 10.7094 0.904061 10.9969 0.818436 11.3112C0.682811 11.8088 0.410309 12.8075 0.155309 13.7419C0.0353085 14.1825 0.0815658 14.6438 0.272191 15.0437ZM9.90531 3.6425L12.5572 6.29437L4.83719 14.0144C4.75969 14.0912 4.66407 14.1469 4.55969 14.1756L2.12844 14.8381C1.91219 14.8975 1.68094 14.8363 1.52219 14.6775C1.36344 14.5188 1.30219 14.2875 1.36156 14.0712L2.02406 11.64C2.05281 11.5356 2.10843 11.44 2.18531 11.3625L9.90531 3.6425ZM13.4409 5.41062L10.7891 2.75875L12.1153 1.43312C12.2322 1.31562 12.3916 1.25 12.5572 1.25C12.7228 1.25 12.8816 1.31562 12.9991 1.43312L14.7666 3.20062C14.8841 3.31812 14.9497 3.47687 14.9497 3.6425C14.9497 3.80812 14.8841 3.9675 14.7666 4.08437L13.4409 5.41062Z' fill='%23102542'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}


@media (max-width: 767px) {
    #figcaption__table {
        margin-top: 40px;
    }
}

#figcaption__table .table_legend {
    border-radius: 0.5rem;
    background: #FFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
    width: 40%;
    justify-content: center;
    text-align: center;
    position: relative;
}
@media (max-width: 767px) {
    #figcaption__table .table_legend {
        padding: 1rem 1rem;
        width: 48%;
    }
}
#figcaption__table .table_legend {
    border-top: 10px solid #F39200;
}

#figcaption__table #table_legend__wunschfahrzeug__label {
    position: relative;
    padding-bottom: 40px;
    display: inline-block;
    width: 100%;
    font-weight: 700;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75 2.12936C7.30489 1.01734 8.47558 0.25 9.82895 0.25C11.7174 0.25 13.25 1.74335 13.25 3.58338C13.25 5.52874 12.2346 7.31277 11.0024 8.74679C9.19195 10.8541 6.92858 12.2015 6.92858 12.2015C6.81911 12.2662 6.68089 12.2662 6.57142 12.2015C6.57142 12.2015 4.30805 10.8541 2.49763 8.74679C1.26537 7.31277 0.25 5.52874 0.25 3.58338C0.25 1.74335 1.78263 0.25 3.67105 0.25C5.02442 0.25 6.19511 1.01734 6.75 2.12936ZM12.5658 3.58338C12.5658 2.11136 11.3397 0.916676 9.82895 0.916676C8.31821 0.916676 7.09211 2.11136 7.09211 3.58338V3.59605C7.08458 3.77405 6.93405 3.91672 6.75 3.91672C6.56253 3.91672 6.41063 3.77005 6.4079 3.58805V3.58338C6.4079 2.11136 5.18179 0.916676 3.67105 0.916676C2.16032 0.916676 0.934211 2.11136 0.934211 3.58338C0.934211 5.3714 1.88937 7.00076 3.02174 8.31878C4.46063 9.9928 6.19647 11.1675 6.75 11.5208C7.30353 11.1675 9.03937 9.9928 10.4783 8.31878C11.6106 7.00076 12.5658 5.3714 12.5658 3.58338ZM9.82895 2.58337C10.3955 2.58337 10.8553 3.03137 10.8553 3.58338C10.8553 3.76738 11.0085 3.91672 11.1974 3.91672C11.3862 3.91672 11.5395 3.76738 11.5395 3.58338C11.5395 2.66337 10.7732 1.91669 9.82895 1.91669C9.64011 1.91669 9.48684 2.06603 9.48684 2.25003C9.48684 2.43403 9.64011 2.58337 9.82895 2.58337Z' fill='%23F39200' stroke='%23F39200' stroke-width='0.5'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center calc(100% - 11px);
    background-size: 22px 21px;
}
#figcaption__table #table_legend__wunschfahrzeug__label:before,
#figcaption__table #table_legend__wunschfahrzeug__label:after {
    content: '';
    display: inline-block;
    width: calc(50% - 30px);
    height: 2px;
    position: absolute;
    bottom: 20px;
    background-color: #F39200;
}
#figcaption__table #table_legend__wunschfahrzeug__label:before {
    left: 0px;
}

#figcaption__table #table_legend__wunschfahrzeug__label:after {
    right: 0px;
}

#figcaption__table .table_legend.--is_electro {
    border-top: 10px solid #00858C;
}

#figcaption__table #table_legend__vergleichsfahrzeug__label {
    position: relative;
    padding-bottom: 40px;
    display: inline-block;
    width: 100%;
    font-weight: 700;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.2842 13.955L16.5342 1.60879C16.4873 1.45251 16.3311 1.35874 16.1748 1.39L12.6748 2.03075C12.3154 0.85864 11.0967 0.108489 9.84668 0.342911C8.59668 0.561705 7.7373 1.70256 7.7998 2.93718L4.2998 3.57794C4.19043 3.59356 4.09668 3.68733 4.06543 3.79673L0.31543 16.143C0.299805 16.1742 0.299805 16.2055 0.299805 16.2367C0.299805 18.4716 2.12793 20.3 4.3623 20.3C6.59668 20.3 8.4248 18.4716 8.4248 16.2367C8.4248 16.2055 8.4248 16.1742 8.40918 16.143L4.76855 4.14055L7.9248 3.56231C8.25293 4.59377 9.22168 5.29703 10.2998 5.29703C10.4404 5.29703 10.5967 5.2814 10.7529 5.25015C12.0029 5.01573 12.8623 3.8905 12.7998 2.65588L15.7998 2.09326L12.2061 13.955C12.1748 13.9863 12.1748 14.0175 12.1748 14.0488C12.1748 16.2836 14.0029 18.1121 16.2373 18.1121C18.4717 18.1121 20.2998 16.2836 20.2998 14.0488C20.2998 14.0175 20.2998 13.9863 20.2842 13.955ZM4.3623 19.6749C2.56543 19.6749 1.09668 18.2996 0.94043 16.5493H7.78418C7.62793 18.2996 6.15918 19.6749 4.3623 19.6749ZM2.9873 15.9242C3.12793 15.299 3.69043 14.8302 4.3623 14.8302C5.03418 14.8302 5.59668 15.299 5.7373 15.9242H2.9873ZM7.69043 15.9242H6.3623C6.20605 14.9552 5.37793 14.2051 4.3623 14.2051C3.34668 14.2051 2.50293 14.9552 2.3623 15.9242H1.03418L4.3623 4.96884L7.69043 15.9242ZM10.6436 4.64065C9.62793 4.82819 8.64355 4.15618 8.45605 3.12472C8.3623 2.62462 8.47168 2.14015 8.75293 1.71819C9.03418 1.31186 9.47168 1.03055 9.95605 0.936781C10.0811 0.936781 10.1904 0.921152 10.2998 0.921152C11.1904 0.921152 11.9717 1.56191 12.1436 2.45271C12.3311 3.48417 11.6592 4.45311 10.6436 4.64065ZM16.2373 2.7809L19.5654 13.7362H18.3623L16.4717 11.8452C16.3467 11.7202 16.1592 11.7202 16.0342 11.8452L14.1123 13.7362H12.9092L16.2373 2.7809ZM17.4717 13.7362H15.0029L16.2373 12.5016L17.4717 13.7362ZM16.2373 17.487C14.4404 17.487 12.9717 16.1117 12.8154 14.3614H19.6592C19.5029 16.1117 18.0342 17.487 16.2373 17.487Z' fill='%2300858C' stroke='%2300858C' stroke-width='0.6'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center calc(100% - 11px);
    background-size: 22px 21px;
}
#figcaption__table #table_legend__vergleichsfahrzeug__label:before,
#figcaption__table #table_legend__vergleichsfahrzeug__label:after {
    content: '';
    display: inline-block;
    width: calc(50% - 30px);
    height: 2px;
    position: absolute;
    bottom: 20px;
    background-color: #00858C;
}
#figcaption__table #table_legend__vergleichsfahrzeug__label:before {
    left: 0px;
}

#figcaption__table #table_legend__vergleichsfahrzeug__label:after {
    right: 0px;
}


#figcaption__table__wunschfahrzeug,
#figcaption__table__vergleichsfahrzeug {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 125%;
    display: flex;
    flex-direction: column;
    word-break: normal;
}

#figcaption__table__wunschfahrzeug span,
#figcaption__table__vergleichsfahrzeug span {
    display: block;
    font-size: 1em;
    line-height: 125%;
    word-wrap: break-word;
}

#figcaption__table .table_legend span.fahrzeug-leistung {
    margin-top: 0.5rem;
}

#figcaption__table .table_legend span.fahrzeug-leistung,
#figcaption__table .table_legend span.fahrzeug-typ  {
    font-family: Merriweather, serif;
    font-size: 0.7em;
    font-weight: 300;
    margin-top: 0.5rem;
}

#figcaption__table .table_legend .fahrzeug-leistung-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5583 9.42805C14.4091 9.42805 14.2641 9.39905 14.1274 9.34529L13.0338 8.91038C12.6527 8.75712 12.4082 8.39671 12.4082 7.98668V7.6139C12.4082 7.47301 12.3336 7.34875 12.2218 7.29912C11.327 6.92221 10.7511 6.01502 10.7511 4.98368C10.7511 4.37488 10.9583 3.7867 11.3394 3.33104L11.849 3.75357C11.5714 4.08898 11.414 4.52814 11.414 4.98368C11.414 5.73337 11.8406 6.4168 12.4786 6.68607C12.8391 6.83521 13.071 7.19974 13.071 7.60977V7.98255C13.071 8.11919 13.1539 8.23933 13.2782 8.28908L14.3677 8.72399C14.4257 8.74874 14.492 8.76124 14.5541 8.76124C14.8317 8.76124 15.0554 8.5376 15.0554 8.26008V3.46355C15.0554 2.73462 14.6079 2.13819 14.0611 2.13819H13.5268L14.1854 0.825083C9.95579 0.994971 6.09901 3.17365 4.25958 6.46655L3.67969 6.14352C5.71367 2.5026 10.0511 0.150024 14.728 0.150024H15.2625L14.5541 1.56652C15.2293 1.81504 15.7223 2.5731 15.7223 3.46355V8.2642C15.7223 8.90625 15.2004 9.42805 14.5583 9.42805Z' fill='%23112643' stroke='%23102542' stroke-width='0.3'/%3E%3Cpath d='M0.8125 7.7713H4.78944V8.43398H0.8125V7.7713Z' fill='%23112643' stroke='%23102542' stroke-width='0.3'/%3E%3Cpath d='M2.13672 9.75946H6.11366V10.4221H2.13672V9.75946Z' fill='%23112643' stroke='%23102542' stroke-width='0.3'/%3E%3Cpath d='M0.148438 11.7476H4.12538V12.4102H0.148438V11.7476Z' fill='%23112643' stroke='%23102542' stroke-width='0.3'/%3E%3Cpath d='M8.0366 14.15L7.73828 13.5577L7.9372 13.4583C9.05984 12.8909 9.75988 11.7601 9.75988 10.501V9.47788C9.75988 8.50455 10.1411 7.5891 10.8288 6.90154L11.446 6.28436L11.9141 6.7524L11.2969 7.36958C10.7335 7.93288 10.4228 8.68256 10.4228 9.47788V10.501C10.4228 12.0086 9.58597 13.3713 8.23953 14.0506L8.0366 14.15Z' fill='%23112643' stroke='%23102542' stroke-width='0.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;
    height: 16px;
    width: 17px;
    display: inline-block;
    margin-right: 0.5rem;
    position: relative;
    top: 2px;
}

#figcaption__table .table_legend.--is_electro .fahrzeug-typ-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8323 1.63401C14.7893 1.63583 13.9176 1.68204 13.1314 2.15764C12.8397 1.25732 12.2089 0.624647 12.1789 0.594792C12.0824 0.499256 11.9307 0.499256 11.8342 0.594792C11.8039 0.624647 11.1737 1.2568 10.8807 2.15661C10.0952 1.68256 9.22677 1.63557 9.17952 1.63349C9.04203 1.62596 8.93228 1.73084 8.91978 1.86844C8.91403 1.93256 8.78729 3.44894 9.63526 4.45935C10.2837 5.23168 11.29 5.4578 11.7567 5.52297V13.3967C11.7567 13.7147 11.6382 14.0112 11.4225 14.2334C11.2067 14.4572 10.9207 14.5805 10.6167 14.5805C9.988 14.5805 9.47676 14.0493 9.47676 13.3967V10.9382C9.47676 10.4802 9.30502 10.05 8.99353 9.72657C8.68179 9.40284 8.26755 9.22448 7.82682 9.22448C6.9171 9.22448 6.17687 9.99319 6.17687 10.9382V12.3271C6.17687 12.7284 6.02612 13.1057 5.75263 13.3897C5.47914 13.6739 5.11565 13.8302 4.72942 13.8302C3.93144 13.8302 3.28196 13.1558 3.28196 12.3271V10.7344C4.07969 10.6775 4.71217 9.98722 4.71217 9.14478C4.71217 9.06275 4.70392 8.98019 4.69142 8.89764C5.34865 8.40697 5.77913 7.60815 5.77913 6.70523V4.81371C6.05862 4.67041 6.25312 4.37419 6.25312 4.02917C6.25312 3.54682 5.87638 3.15455 5.41239 3.15169V0.851287C5.41239 0.436949 5.0879 0.0999756 4.68892 0.0999756C4.28993 0.0999756 3.96544 0.436949 3.96544 0.851287V3.15091H2.38899V0.851287C2.38899 0.436949 2.0645 0.0999756 1.66551 0.0999756C1.26653 0.0999756 0.942036 0.436949 0.942036 0.851287V3.15143C0.478301 3.15429 0.101562 3.54656 0.101562 4.02891C0.101562 4.37315 0.295306 4.66885 0.573797 4.81267V6.70523C0.573797 7.60789 1.00453 8.40671 1.66226 8.89738C1.65026 8.97682 1.64301 9.05911 1.64301 9.14504C1.64301 9.88234 2.127 10.5031 2.78148 10.6848V12.3273C2.78148 13.4426 3.65495 14.3497 4.72892 14.3497C5.2489 14.3497 5.73788 14.1392 6.10562 13.757C6.47361 13.3749 6.67635 12.8673 6.67635 12.3273V10.9384C6.67635 10.2798 7.19209 9.74396 7.82632 9.74396C8.13356 9.74396 8.4223 9.86832 8.63954 10.0939C8.85678 10.3193 8.97628 10.6191 8.97628 10.9384V13.3969C8.97628 14.3359 9.71201 15.1 10.6162 15.1C11.0537 15.1 11.4652 14.9227 11.7747 14.6018C12.0852 14.2825 12.2562 13.8544 12.2562 13.3969V5.52271C12.3112 5.51466 12.3712 5.50505 12.4397 5.49129C12.9122 5.40458 13.7919 5.15536 14.3771 4.45883C15.2253 3.44946 15.0973 1.93308 15.0913 1.8687C15.0788 1.73136 14.9648 1.62622 14.8318 1.63401H14.8323ZM4.46567 0.851287C4.46567 0.723299 4.56592 0.619195 4.68917 0.619195C4.81241 0.619195 4.91266 0.723299 4.91266 0.851287V3.15091H4.46592L4.46567 0.851287ZM1.44252 0.851287C1.44252 0.723299 1.54277 0.619195 1.66601 0.619195C1.78926 0.619195 1.88951 0.723299 1.88951 0.851287V3.15091H1.44277L1.44252 0.851287ZM0.947286 3.67013H5.40764C5.59814 3.67013 5.75313 3.83109 5.75313 4.02891C5.75313 4.22674 5.59814 4.38743 5.40764 4.38743H0.947286C0.756792 4.38743 0.602047 4.22648 0.602047 4.02891C0.602047 3.83135 0.757042 3.67013 0.947286 3.67013ZM1.07428 6.70497V4.90665H5.27915V6.70497C5.27915 7.908 4.33668 8.88673 3.17821 8.88673C2.01975 8.88673 1.07428 7.90774 1.07428 6.70497ZM2.14725 9.18425C2.46374 9.32625 2.81198 9.40595 3.17821 9.40595C3.54445 9.40595 3.89219 9.32625 4.20843 9.18399C4.18793 9.75876 3.73445 10.2206 3.17646 10.2206C2.61848 10.2206 2.168 9.75876 2.1475 9.18425H2.14725ZM12.0067 1.16567C12.2142 1.41879 12.5504 1.89881 12.7002 2.47593C12.6172 2.54965 12.5359 2.63117 12.4582 2.72255C12.2564 2.96269 12.1127 3.23295 12.0069 3.50476C11.9007 3.23295 11.7552 2.96347 11.5532 2.72281C11.4772 2.63247 11.3952 2.55199 11.311 2.47593C11.4615 1.90089 11.7989 1.41957 12.0067 1.16567ZM9.41102 2.18101C9.8265 2.24539 10.6585 2.44711 11.1765 3.0642C11.6919 3.67844 11.7722 4.56371 11.7777 5.00089C11.3612 4.93573 10.5277 4.73245 10.0122 4.11822C9.49676 3.50372 9.41652 2.61793 9.41102 2.18101ZM14.0009 4.11744C13.5164 4.69377 12.7607 4.90536 12.3494 4.98064C12.3242 4.98583 12.3017 4.98947 12.2784 4.99362C12.2774 4.88381 12.2717 4.75141 12.2579 4.60265C12.3057 4.15249 12.4449 3.5289 12.8342 3.06524C12.9032 2.98398 12.9754 2.91103 13.0512 2.84613C13.5604 2.3996 14.2386 2.23864 14.6009 2.18205C14.5959 2.61897 14.5164 3.50424 14.0009 4.11744Z' fill='%23102542' stroke='%23102542' stroke-width='0.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;
    height: 15px;
    width: 16px;
    display: inline-block;
    margin-right: 0.3rem;
    position: relative;
    top: 1px;
}
#figcaption__table .table_legend.--not_electro .fahrzeug-typ-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0332 4.5054L9.81523 4.17669L9.51144 4.43195C9.36446 4.55309 9.17454 4.5755 9.00338 4.49185C8.82975 4.40701 8.72928 4.24077 8.73462 4.04727C8.73568 4.00916 8.73622 3.97013 8.73622 3.93125C8.73622 3.08724 8.48318 2.27557 8.0045 1.58398C7.62232 1.03184 7.1186 0.586009 6.53166 0.277032C6.31809 0.164602 6.08984 0.0825939 5.85455 0.0288985L5.72789 0L5.65535 0.337477C5.64448 0.378587 5.37337 1.35422 4.02253 2.4799C3.92599 2.56034 3.82549 2.6419 3.71908 2.72822C2.61777 3.62173 1.10947 4.84543 1.16558 7.29824C1.19451 8.56331 1.7121 9.74707 2.62307 10.6315C3.53191 11.5139 4.7302 11.9999 5.99721 12C5.99733 12 5.99747 12 5.99759 12C6.006 12 6.01434 11.9997 6.02273 11.9997C6.03412 11.9996 6.04552 11.9995 6.05686 11.9993C8.69483 11.9674 10.8311 9.81189 10.8311 7.16648C10.8311 6.21571 10.5552 5.29553 10.0332 4.5054ZM5.99759 11.2969C5.11664 11.2969 4.39994 10.5802 4.39994 9.69923C4.39994 8.51214 5.51843 7.38751 5.99798 6.95994C6.17475 7.11719 6.43816 7.36933 6.70163 7.68688C7.44021 8.57718 7.59525 9.27262 7.59525 9.69923C7.59525 10.5802 6.87853 11.2969 5.99759 11.2969ZM8.04164 10.7547C8.20564 10.4384 8.2984 10.0795 8.2984 9.69928C8.2984 8.91042 7.94325 8.08232 7.2428 7.23798C6.73627 6.62739 6.23318 6.23772 6.21202 6.22143L5.99761 6.05643L5.7832 6.22143C5.76206 6.23772 5.25897 6.62739 4.75242 7.23798C4.05199 8.0823 3.69684 8.91039 3.69684 9.69928C3.69684 10.0818 3.79078 10.4427 3.95662 10.7604C3.65294 10.5879 3.36932 10.3761 3.11285 10.1271C2.33512 9.37195 1.8932 8.36163 1.86852 7.28221C1.84715 6.34731 2.08326 5.54279 2.59038 4.82267C3.03925 4.18524 3.63578 3.70128 4.1621 3.2743C4.27033 3.18645 4.37259 3.10351 4.47267 3.02012C5.51151 2.1544 5.98786 1.35289 6.19481 0.894377C6.68574 1.15099 7.10712 1.52285 7.42643 1.9842C7.82335 2.55765 8.03316 3.23096 8.03316 3.9313C8.03316 3.96355 8.03274 3.99568 8.03182 4.02781C8.01884 4.49759 8.27283 4.91748 8.69471 5.12364C8.99159 5.26871 9.32091 5.2825 9.61594 5.17278C9.95185 5.78101 10.128 6.46389 10.128 7.16652C10.128 8.70093 9.28693 10.0425 8.04164 10.7547Z' fill='%23102542'/%3E%3Cpath d='M3.74718 5.5041L3.25 6.00128L3.74718 6.49846L4.24436 6.00128L3.74718 5.5041Z' fill='%23102542'/%3E%3Cpath d='M5.00109 4.2527L4.50391 4.74988L5.00109 5.24706L5.49827 4.74988L5.00109 4.2527Z' fill='%23102542'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;
    height: 15px;
    width: 16px;
    display: inline-block;
    margin-right: 0.3rem;
    position: relative;
    top: 1px;
}

#figcaption__table .table_legend.--is_hybrid .fahrzeug-typ-icon {
    background-image: url("../Icons/fahrzeug_typ_hybrid.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;
    height: 16px;
    width: 36px;
    display: inline-block;
    margin-right: 0.3rem;
    position: relative;
    top: 3px;
}

@media (max-width: 767px) {
    #figcaption__table__wunschfahrzeug,
    #figcaption__table__vergleichsfahrzeug {
        font-size: 100%;
    }
}

#th_description {
    margin-bottom: -1.5em;
    text-align: right;
    font-size: 66.6667%;
    display: none; 
}
th[scope="col"] {
    font-family: "Merriweather Sans", sans-serif;
    padding: 0 0.71429em;
    height: 5.57143em;
    font-size: 0.875em;
    line-height: 1.5;
    color: #fff;
    background: #1d5187;
    hyphens: auto;
    min-width: 4em;
}
@media (max-width: 767px) {
    th[scope="col"] {
        height: 3.125em;
    }
}
th,
td {
    line-height: 1.75;
    border-bottom: 0.5em solid #fff;
    text-align: center;
}
@media (max-width: 767px) {
    th,
    td {
        border-bottom: none;
    }
}
th[scope="col"]:nth-child(1) {
    width: auto;
}
th[scope="col"]:nth-child(2) {
    width: auto;
}
th[scope="col"]:nth-child(3) {
    width: auto;
}
th[scope="col"]:nth-child(4) {
    width: auto;
}
th[scope="col"]:nth-child(5) {
    width: 27%;
}
th[scope="col"]:last-child,
td:last-child {
    border-left: 0.5em solid #fff;
    font-weight: 700;
}
@media (max-width: 767px) {
    th[scope="row"]:first-child,
    td:first-child {
        text-align: left;
    }
    th[scope="col"]:last-child,
    td:last-child {
        border-left: none;
        text-align: right;
        font-weight: 400;
    }  
}

th[colspan="2"][scope="col"],
th[colspan="2"] {
    border-bottom: 0.5em solid #fff;
    border-left: none;
    text-align: left;
}
th[scope="col"].th-col-year {
    color: #1d5187;
}
th[scope="row"],
td {
    padding: 0.625em;
    color: #000;
    background: #efefef;
}
@media (max-width: 767px) {
    th[scope="row"],
    td {
        padding: 0.3125em 0.625em;
    }
}

.th-text {
    display: inline-block;
    padding: 0.5em 0;
    text-align: left;
}
.th_span-year {
    white-space: nowrap;
}
tfoot:not(.modus-pkw_label) td:last-child {
    background: #fae2de;
}
.td_span-divider {
    display: inline-block;
    margin: 0 0.1em;
}
.td_span-unit {
    display: inline-block;
    margin: 0 0 0 0.2em;
}
.td_span-wunschfahrzeug {
    color: #1f5087;
    white-space: nowrap;
}
.td_span-vergleichsfahrzeug {
    color: #586e35;
    white-space: nowrap;
}
.table_legend strong {
    display: block;
    line-height: 1.75;
}
.table_legend strong::before {
    /* display: inline-block; */
    display: none;
    content: "";
    margin-right: 0.35em;
    width: 1.25em;
    height: 1.25em;
    vertical-align: sub;
}
/* .table_legend.wunschfahrzeug strong::before {
    background-color: #1f5087;
}
.table_legend.vergleichsfahrzeug strong::before {
    background-color: #586e35;
} */

/* --------------------------------------------------------------------------
    Yearly cost cards
-------------------------------------------------------------------------- */
.year-card-info-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}
.year-card-info-row__label {
    font-weight: 600;
}
.year-card-info-row__button--mobile {
    display: none;
    margin-bottom: 1rem;
}
.card-label-sources {
    display: none;
}
.year-card-slider__strings {
    display: none;
}
.year-card-slider {
    position: relative;
    margin-top: 1.5rem;
}
.year-card-slider__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}
.year-card-slider__header-description {
    width: 100%;
    text-align: center;
    font-family: Merriweather, serif;
    font-size: 1rem;
    font-weight: 300;
}
.year-card-slider__header-description--hidden  {
    display: none;
}
.year-card-slider__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Merriweather, serif;
    color: #1f2a37;
    min-width: 184px;
    font-size: 2rem;
}
.year-card-slider__label-helper {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
}
.year-card-slider__nav {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    /* border: 1px solid #CBD5F5; */
    /* background: #fff; */
    /* color: #1f2a37; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); */
    appearance: none;
    border: none;
    background-color: transparent;
}
.year-card-slider__nav:not(:disabled):hover {
    color: #F39200;
    border-color: #F39200;
}
.year-card-slider__nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.year-card-slider__icon {
    width: 20px;
    height: 20px;
}
.year-card-slider__viewport {
    /* overflow: hidden; */
    position: relative;
    cursor: grab;
    /* Erlaubt vertikales Scrollen, horizontales Wischen übernimmt JS */
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.year-card-slider__viewport.is-dragging {
    cursor: grabbing;
}
.year-card-grid {
    display: flex;
    gap: 2rem;
    /* margin-left: -1rem;
    margin-right: -1rem; */
    will-change: transform;
    transition: transform 0.45s ease;
}
.year-card {
    flex: 0 0 100%;
    max-width: 100%;
    border-radius: 1rem;
    box-sizing: border-box;
    padding: 0 0rem 1.5rem;
    opacity: 0.5;
    margin-top: 0;
}

@media (max-width: 768px) {
    .year-card {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

.year-card.slide-active {
    opacity: 1;
}
.year-card--summary {
    padding: 0;
    margin-top: 0rem;
}
.year-card__eyebrow {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0;
}
.year-card__description {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0;
}
.year-card__summary-body .year-card__eyebrow,
.year-card__summary-body .year-card__description {
    display: none;
}
.year-card__year {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2a37;
}
.year-card__vehicles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
@media (max-width: 768px) {
    .year-card__vehicles {
        grid-template-columns: none;
    }
}

.vehicle-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 0;
    box-shadow: 0 12px 24px rgba(31, 80, 135, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-top: none;
    border-left: 10px solid #00858C;
    position: relative;
    overflow: hidden;
}
.vehicle-card.--is_electro {
    border-left-color: #00858C;
}
.vehicle-card.--not_electro {
    border-left-color: #F39200;
}
.vehicle-card__badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    box-shadow: none;
    border-radius: 0px;
    background-color: transparent;
    text-indent: -99999px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75 2.12936C7.30489 1.01734 8.47558 0.25 9.82895 0.25C11.7174 0.25 13.25 1.74335 13.25 3.58338C13.25 5.52874 12.2346 7.31277 11.0024 8.74679C9.19195 10.8541 6.92858 12.2015 6.92858 12.2015C6.81911 12.2662 6.68089 12.2662 6.57142 12.2015C6.57142 12.2015 4.30805 10.8541 2.49763 8.74679C1.26537 7.31277 0.25 5.52874 0.25 3.58338C0.25 1.74335 1.78263 0.25 3.67105 0.25C5.02442 0.25 6.19511 1.01734 6.75 2.12936ZM12.5658 3.58338C12.5658 2.11136 11.3397 0.916676 9.82895 0.916676C8.31821 0.916676 7.09211 2.11136 7.09211 3.58338V3.59605C7.08458 3.77405 6.93405 3.91672 6.75 3.91672C6.56253 3.91672 6.41063 3.77005 6.4079 3.58805V3.58338C6.4079 2.11136 5.18179 0.916676 3.67105 0.916676C2.16032 0.916676 0.934211 2.11136 0.934211 3.58338C0.934211 5.3714 1.88937 7.00076 3.02174 8.31878C4.46063 9.9928 6.19647 11.1675 6.75 11.5208C7.30353 11.1675 9.03937 9.9928 10.4783 8.31878C11.6106 7.00076 12.5658 5.3714 12.5658 3.58338ZM9.82895 2.58337C10.3955 2.58337 10.8553 3.03137 10.8553 3.58338C10.8553 3.76738 11.0085 3.91672 11.1974 3.91672C11.3862 3.91672 11.5395 3.76738 11.5395 3.58338C11.5395 2.66337 10.7732 1.91669 9.82895 1.91669C9.64011 1.91669 9.48684 2.06603 9.48684 2.25003C9.48684 2.43403 9.64011 2.58337 9.82895 2.58337Z' fill='%23F39200' stroke='%23F39200' stroke-width='0.5'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center calc(100% - 11px);
    background-size: 22px 21px;
}
.vehicle-card--vergleichsfahrzeug .vehicle-card__badge {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.2842 13.955L16.5342 1.60879C16.4873 1.45251 16.3311 1.35874 16.1748 1.39L12.6748 2.03075C12.3154 0.85864 11.0967 0.108489 9.84668 0.342911C8.59668 0.561705 7.7373 1.70256 7.7998 2.93718L4.2998 3.57794C4.19043 3.59356 4.09668 3.68733 4.06543 3.79673L0.31543 16.143C0.299805 16.1742 0.299805 16.2055 0.299805 16.2367C0.299805 18.4716 2.12793 20.3 4.3623 20.3C6.59668 20.3 8.4248 18.4716 8.4248 16.2367C8.4248 16.2055 8.4248 16.1742 8.40918 16.143L4.76855 4.14055L7.9248 3.56231C8.25293 4.59377 9.22168 5.29703 10.2998 5.29703C10.4404 5.29703 10.5967 5.2814 10.7529 5.25015C12.0029 5.01573 12.8623 3.8905 12.7998 2.65588L15.7998 2.09326L12.2061 13.955C12.1748 13.9863 12.1748 14.0175 12.1748 14.0488C12.1748 16.2836 14.0029 18.1121 16.2373 18.1121C18.4717 18.1121 20.2998 16.2836 20.2998 14.0488C20.2998 14.0175 20.2998 13.9863 20.2842 13.955ZM4.3623 19.6749C2.56543 19.6749 1.09668 18.2996 0.94043 16.5493H7.78418C7.62793 18.2996 6.15918 19.6749 4.3623 19.6749ZM2.9873 15.9242C3.12793 15.299 3.69043 14.8302 4.3623 14.8302C5.03418 14.8302 5.59668 15.299 5.7373 15.9242H2.9873ZM7.69043 15.9242H6.3623C6.20605 14.9552 5.37793 14.2051 4.3623 14.2051C3.34668 14.2051 2.50293 14.9552 2.3623 15.9242H1.03418L4.3623 4.96884L7.69043 15.9242ZM10.6436 4.64065C9.62793 4.82819 8.64355 4.15618 8.45605 3.12472C8.3623 2.62462 8.47168 2.14015 8.75293 1.71819C9.03418 1.31186 9.47168 1.03055 9.95605 0.936781C10.0811 0.936781 10.1904 0.921152 10.2998 0.921152C11.1904 0.921152 11.9717 1.56191 12.1436 2.45271C12.3311 3.48417 11.6592 4.45311 10.6436 4.64065ZM16.2373 2.7809L19.5654 13.7362H18.3623L16.4717 11.8452C16.3467 11.7202 16.1592 11.7202 16.0342 11.8452L14.1123 13.7362H12.9092L16.2373 2.7809ZM17.4717 13.7362H15.0029L16.2373 12.5016L17.4717 13.7362ZM16.2373 17.487C14.4404 17.487 12.9717 16.1117 12.8154 14.3614H19.6592C19.5029 16.1117 18.0342 17.487 16.2373 17.487Z' fill='%2300858C' stroke='%2300858C' stroke-width='0.6'/%3E%3C/svg%3E%0A");
}
.vehicle-card__title {
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
    font-family: Merriweather, serif;
    font-weight: 700;
    color: #1f2a37;
    /* margin: 0 0 1rem; */
    margin: 0 0;
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
}

.vehicle-card__title .fahrzeug-aufbau,
.vehicle-card__title .fahrzeug-typ {
    display: none;
}

.vehicle-card__metrics {
    margin: 0;
}
.vehicle-card__metrics dt,
.vehicle-card__metrics dd {
    margin: 0;
}
.vehicle-card__metric {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-bottom: 0rem;
    padding: 1rem 1.25rem;
    gap: 0rem;
}
.vehicle-card__metric:last-child {
    margin-bottom: 0;
}
.vehicle-card__metric-label {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: #364152;
}
.vehicle-card__metric-value {
    font-family: Merriweather, serif !important;
    font-weight: 400 !important;
    color: #1f5087;
}
.vehicle-card__metric-unit {
    margin-left: 0.25rem;
}
@media (max-width: 768px) {
    .year-card-info-row {
        display: none;
    }
    .year-card-info-row__button--mobile {
        display: inline-flex;
    }
}

/* --------------------------------------------------------------------------
    Chart
-------------------------------------------------------------------------- */

#panel__chart {
    box-shadow: none;
}

#chart {
    position: relative;
    display: block;
    margin-top: 1em;
    width: 100%;
}
#chart_column_1,
#chart_x_axis {
    display: none;
}
#chart_column_2 {
    width: 100%;
    position: relative;
}
@media (min-width: 1024px) and (max-width: 1200px) {
    .y-axis-label,
    .x-axis-label {
        font-size: 0.75em;
    }
}
@media (max-width: 430px) {
    .y-axis-label,
    .x-axis-label {
        font-size: 0.75em;
    }
}
#chart_data {
    position: relative;
}
.chart-slider__track {
    display: flex;
    gap: 2rem;
    padding: 0 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    box-sizing: border-box;
    will-change: transform;
    transition: transform 0.45s ease;
}
.chart-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    /* opacity: 0.4; */
    filter: blur(4px);
    padding: 2.5rem !important;
    margin-bottom: 1.25rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
    transition: filter 0.3s ease;
}
@media (max-width: 767px) {
    .chart-row {
        padding: 0rem !important;
        box-shadow: none;
        margin-top: 1rem;
        border-radius: 0rem;
        background-color: transparent;
    }
}

.chart-row--summary {
    padding-top: 0;
}
.chart-row.slide-active {
    /* opacity: 1; */
    filter: blur(0px);
    transition: filter 0.3s ease;
}
.chart-row__axis {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: #102542;
}
.chart-row__content {
    display: block;
}
.chart-row__chart {
    position: relative;
    padding: 1.5rem 0 2.5rem;
}
.chart-row__grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}
.chart-row__grid .grid_line2 {
    height: 100%;
}
.group-stacked_bars {
    position: relative;
    padding: 0 2px;
    z-index: 2;
}
.stacked_bars-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.stacked_bars {
    display: flex;
}
.stacked_bars .bar {
    margin-bottom: 2px;
    height: 2em;
    transition: transform 0.2s;
}
.stacked_bars__label {
    font-size: 0.95em;
    font-weight: 600;
    text-align: left;
    color: #102542;
    line-height: 1.2;
}

.stacked_bars-wrap.--not_electro .stacked_bars__label {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75 2.12936C7.30489 1.01734 8.47558 0.25 9.82895 0.25C11.7174 0.25 13.25 1.74335 13.25 3.58338C13.25 5.52874 12.2346 7.31277 11.0024 8.74679C9.19195 10.8541 6.92858 12.2015 6.92858 12.2015C6.81911 12.2662 6.68089 12.2662 6.57142 12.2015C6.57142 12.2015 4.30805 10.8541 2.49763 8.74679C1.26537 7.31277 0.25 5.52874 0.25 3.58338C0.25 1.74335 1.78263 0.25 3.67105 0.25C5.02442 0.25 6.19511 1.01734 6.75 2.12936ZM12.5658 3.58338C12.5658 2.11136 11.3397 0.916676 9.82895 0.916676C8.31821 0.916676 7.09211 2.11136 7.09211 3.58338V3.59605C7.08458 3.77405 6.93405 3.91672 6.75 3.91672C6.56253 3.91672 6.41063 3.77005 6.4079 3.58805V3.58338C6.4079 2.11136 5.18179 0.916676 3.67105 0.916676C2.16032 0.916676 0.934211 2.11136 0.934211 3.58338C0.934211 5.3714 1.88937 7.00076 3.02174 8.31878C4.46063 9.9928 6.19647 11.1675 6.75 11.5208C7.30353 11.1675 9.03937 9.9928 10.4783 8.31878C11.6106 7.00076 12.5658 5.3714 12.5658 3.58338ZM9.82895 2.58337C10.3955 2.58337 10.8553 3.03137 10.8553 3.58338C10.8553 3.76738 11.0085 3.91672 11.1974 3.91672C11.3862 3.91672 11.5395 3.76738 11.5395 3.58338C11.5395 2.66337 10.7732 1.91669 9.82895 1.91669C9.64011 1.91669 9.48684 2.06603 9.48684 2.25003C9.48684 2.43403 9.64011 2.58337 9.82895 2.58337Z' fill='%23F39200' stroke='%23F39200' stroke-width='0.5'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 13px 12px;
    padding-left: 20px;
}
.stacked_bars-wrap.--is_electro .stacked_bars__label {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.2842 13.955L16.5342 1.60879C16.4873 1.45251 16.3311 1.35874 16.1748 1.39L12.6748 2.03075C12.3154 0.85864 11.0967 0.108489 9.84668 0.342911C8.59668 0.561705 7.7373 1.70256 7.7998 2.93718L4.2998 3.57794C4.19043 3.59356 4.09668 3.68733 4.06543 3.79673L0.31543 16.143C0.299805 16.1742 0.299805 16.2055 0.299805 16.2367C0.299805 18.4716 2.12793 20.3 4.3623 20.3C6.59668 20.3 8.4248 18.4716 8.4248 16.2367C8.4248 16.2055 8.4248 16.1742 8.40918 16.143L4.76855 4.14055L7.9248 3.56231C8.25293 4.59377 9.22168 5.29703 10.2998 5.29703C10.4404 5.29703 10.5967 5.2814 10.7529 5.25015C12.0029 5.01573 12.8623 3.8905 12.7998 2.65588L15.7998 2.09326L12.2061 13.955C12.1748 13.9863 12.1748 14.0175 12.1748 14.0488C12.1748 16.2836 14.0029 18.1121 16.2373 18.1121C18.4717 18.1121 20.2998 16.2836 20.2998 14.0488C20.2998 14.0175 20.2998 13.9863 20.2842 13.955ZM4.3623 19.6749C2.56543 19.6749 1.09668 18.2996 0.94043 16.5493H7.78418C7.62793 18.2996 6.15918 19.6749 4.3623 19.6749ZM2.9873 15.9242C3.12793 15.299 3.69043 14.8302 4.3623 14.8302C5.03418 14.8302 5.59668 15.299 5.7373 15.9242H2.9873ZM7.69043 15.9242H6.3623C6.20605 14.9552 5.37793 14.2051 4.3623 14.2051C3.34668 14.2051 2.50293 14.9552 2.3623 15.9242H1.03418L4.3623 4.96884L7.69043 15.9242ZM10.6436 4.64065C9.62793 4.82819 8.64355 4.15618 8.45605 3.12472C8.3623 2.62462 8.47168 2.14015 8.75293 1.71819C9.03418 1.31186 9.47168 1.03055 9.95605 0.936781C10.0811 0.936781 10.1904 0.921152 10.2998 0.921152C11.1904 0.921152 11.9717 1.56191 12.1436 2.45271C12.3311 3.48417 11.6592 4.45311 10.6436 4.64065ZM16.2373 2.7809L19.5654 13.7362H18.3623L16.4717 11.8452C16.3467 11.7202 16.1592 11.7202 16.0342 11.8452L14.1123 13.7362H12.9092L16.2373 2.7809ZM17.4717 13.7362H15.0029L16.2373 12.5016L17.4717 13.7362ZM16.2373 17.487C14.4404 17.487 12.9717 16.1117 12.8154 14.3614H19.6592C19.5029 16.1117 18.0342 17.487 16.2373 17.487Z' fill='%2300858C' stroke='%2300858C' stroke-width='0.6'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 13px 12px;
    padding-left: 20px;
}

.stacked_bars.vergleichsfahrzeug {
    margin-top: 2em;
}
.wunschfahrzeug .bar {
    transform-origin: top;
}
.vergleichsfahrzeug .bar {
    transform-origin: bottom;
}
.switch-wunschfahrzeug .vergleichsfahrzeug .bar,
.switch-vergleichsfahrzeug .wunschfahrzeug .bar {
    transform: scaleY(0);
}
.switch-wunschfahrzeug .wunschfahrzeug .bar,
.switch-vergleichsfahrzeug .vergleichsfahrzeug .bar {
    transform: scaleY(2);
}
.stacked_bars.--not_electro .co2_preis {
    background-color: #A06204;
}
.stacked_bars.--not_electro .kraftstoffkosten {
    background-color: #F39200;
}
.stacked_bars.--not_electro .kfz_steuer {
    background-color: #FDD131;
}
.stacked_bars.--is_electro .co2_preis {
    background-color: #005A5F;
}
.stacked_bars.--is_electro .kraftstoffkosten {
    background-color: #00858C;
}
.stacked_bars.--is_electro .kfz_steuer {
    background-color: #00E0F4;
}
#chart_gridlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}
.grid_line2 {
    width: 2px;
    height: calc(100% - 1em);
    background: rgba(112, 124, 142, 0.20);
}
.grid_line2.thick {
    background-color: #C9C9C9;
    opacity: 1;
}

#figcaption__chart {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
    line-height: 1.75;
    width: 100%;
    justify-content: center;
}

#chart_legend__wunschfahrzeug,
#chart_legend__vergleichsfahrzeug {
    border-radius: 0.5rem;
    background: #FFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
    padding: 1.5rem 1rem;
    width: 40%;
}
#chart_legend__wunschfahrzeug {
    border-left: 10px solid #F39200;   
}

#chart_legend__wunschfahrzeug .kfz_steuer,
#chart_legend__wunschfahrzeug .kraftstoffkosten,
#chart_legend__wunschfahrzeug .co2_preis {
    display: block;
    float: left;
}
#chart_legend__wunschfahrzeug .kfz_steuer,
#chart_legend__wunschfahrzeug .kraftstoffkosten {
    margin-right: 3rem;
}

#chart_legend__wunschfahrzeug .kraftstoffkosten .nowrap {
    display: none;
}

#chart_legend__vergleichsfahrzeug {
    border-left: 10px solid #00858C;
}

#chart_legend__vergleichsfahrzeug.--not_electro {
    border-left-color: #F39200;
}

#chart_legend__vergleichsfahrzeug .kfz_steuer,
#chart_legend__vergleichsfahrzeug .kraftstoffkosten,
#chart_legend__vergleichsfahrzeug .co2_preis {
    display: block;
    float: left;
}

/* --------------------------------------------------------------------------
    View switch (Diagramm / Tabelle)
-------------------------------------------------------------------------- */

.view-switch {
    display: flex;
    justify-content: center;
    /* margin: 0 0 1.5rem; */
    margin: 0;
    position: relative;
    z-index: 2;
}

.view-switch__tabs {
    display: inline-flex;
    gap: 1rem;
    background: #ffffff;
    padding: 0.75rem;
    border-radius: 0.3125em;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.view-switch__button {
    border: none;
    background: transparent;
    color: #102542;
    font-family: Merriweather, serif;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.3125em;
    cursor: pointer;
    font-size: 0.95rem;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.view-switch__button.is-active {
    background-color: #102542;
    color: #ffffff;
}

.view-switch__button:focus-visible {
    outline: 2px solid #102542;
    outline-offset: 2px;
}
#chart_legend__vergleichsfahrzeug .kfz_steuer,
#chart_legend__vergleichsfahrzeug .kraftstoffkosten {
    margin-right: 3rem;
}
#chart_legend__vergleichsfahrzeug .kraftstoffkosten .nowrap {
    display: none;
}

#figcaption__chart__wunschfahrzeug,
#figcaption__chart__vergleichsfahrzeug {
    word-break: normal;
}

.chart_legend .co2_preis::before,
.chart_legend .kraftstoffkosten::before,
.chart_legend .kfz_steuer::before {
    display: inline-block;
    content: "";
    margin-right: 0.35em;
    width: 1.25em;
    height: 1.25em;
    vertical-align: sub;
}
.chart_legend.--not_electro .co2_preis::before {
    background: #A06204;
}
.chart_legend.--not_electro .kraftstoffkosten::before {
    background: #F39200;
}
.chart_legend.--not_electro .kfz_steuer::before {
    background: #FDD131;
}
.chart_legend.--is_electro .co2_preis::before {
    background: #005A5F;
}
.chart_legend.--is_electro .kraftstoffkosten::before {
    background: #00858C;
}
.chart_legend.--is_electro .kfz_steuer::before {
    background: #00E0F4;
}

@media (max-width: 767px) {
    #figcaption__chart {
        flex-direction: column;
        gap: 0.5em;
        justify-content: start;
        margin-top: -2rem;
        z-index: 2;
        position: relative;
    }
    
    #chart_legend__wunschfahrzeug,
    #chart_legend__vergleichsfahrzeug {
        padding: 1.5rem 1rem;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
    Total result
-------------------------------------------------------------------------- */
#panel__total_result {
    position: relative;
    margin-top: -8rem;
    z-index: 1;
}

@media only screen and (min-width: 1366px) {
    #panel__table[hidden] ~ #panel__total_result {
        position: absolute;
        top: 8em;
        right: -14em;
    }
}

#bubble_costs {
    display: inline-flex !important;
    flex-direction: row;
    justify-content: center;
    /* justify-content: space-evenly; */
    align-items: center;
    /* margin-bottom: -6em; */
    min-width: 25em;
    padding: 0 2em;
    /* aspect-ratio: 330 / 245;
    -webkit-clip-path: url(#clip_path__costs_total);
    clip-path: url(#clip_path__costs_total); */
    color: #fff;
    background: #112542;
    width: 100%;
    /* padding-top: 10rem;
    padding-bottom: 2rem; */
    padding-top: 6rem;
    padding-bottom: 0rem;
}

@media (max-width: 767px) {
    #bubble_costs {
        font-size: 0.875em;
        padding-left: 0;
        padding-right: 0;
        padding-top: 8rem;
        padding-bottom: 4rem;
        justify-content: space-evenly;
    }
}

#bubble_costs_wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: 100%;
    z-index: 2;
    background-color: #112542;
}

#bubble_costs_wrap::before,
#bubble_costs_wrap::after {
    content: '';
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top:0px;
    background-color: #112542;
    z-index: 1;
}
#bubble_costs_wrap::before {
    left: -100%;
}
#bubble_costs_wrap::after {
    right: -100%;
}

#bubble_costs_illustration {
    position: relative;
    z-index: 3;
    margin-bottom: -14rem;

    width: 150%;
    height: auto;
    left: -25%;
}

@media (max-width: 767px) {
    #bubble_costs_illustration {
        width: 180%;
        left: -40%;
    }
}


#bubble_costs_illustration_wrap {
    position: relative;
    z-index: 3;
}
@media (max-width: 767px) {
    #bubble_costs_illustration {
        padding-bottom: 4rem;
    }
}


#button_detail_settings_wrap {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='247' height='197' viewBox='0 0 247 197' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M191.016 14.0326C215.262 30.5632 249.617 54.4535 246.842 87.5146C243.921 120.414 230.775 149.099 206.675 175.839C182.429 202.58 137.735 183.943 108.085 187.184C78.2883 190.263 36.3378 209.873 21.5857 183.132C6.68758 156.392 0 139.861 0 103.721C0 67.4186 6.68758 30.239 21.5857 13.5464C36.4839 -2.98409 69.0553 0.257193 101.627 0.257193C134.344 0.419257 166.77 -2.65996 191.016 14.0326Z' fill='%23294E81'/%3E%3C/svg%3E");
    color: #294E81;
    font-size: 0.875rem;
    width: 247px;
    height: 197px;
    border: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: pointer;
}

@media (max-width: 767px) {
    #button_detail_settings_wrap {
        transform: scale(0.66) translateY(-35%);
        transform-origin: top left;
    }
}

#button_detail_settings {
    appearance: none;
    border: none;
    outline: none;  
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    font-family: Merriweather, serif;
}

.button-detail_settings__text_top {
    color: #FFF;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 1px;
    /* padding-bottom: 2rem; */
    position: relative;
}
.button-detail_settings__text_middle {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2272_4980)'%3E%3Cpath d='M18.9763 7.90051L17.5725 7.66237C17.4263 7.19026 17.2382 6.73486 17.0085 6.30036L17.8357 5.14306C18.1866 4.65006 18.1323 3.97741 17.702 3.55126L16.457 2.30623C16.223 2.07227 15.9138 1.94275 15.5838 1.94275C15.3247 1.94275 15.0782 2.02213 14.8693 2.17254L13.7079 2.99977C13.2567 2.76163 12.7845 2.56526 12.2957 2.41904L12.0618 1.03196C11.9615 0.434507 11.4476 0 10.8418 0H9.08288C8.47707 0 7.96318 0.434507 7.86291 1.03196L7.62059 2.45246C7.15266 2.59869 6.69726 2.79087 6.26276 3.02484L5.11382 2.1976C4.90492 2.0472 4.65424 1.96782 4.39521 1.96782C4.06515 1.96782 3.7518 2.09733 3.52202 2.3313L2.27281 3.57633C1.84666 4.00248 1.78817 4.67513 2.13911 5.16813L2.9747 6.34214C2.74492 6.78082 2.56109 7.23622 2.41904 7.70833L1.03196 7.94229C0.434507 8.04256 0 8.55645 0 9.16226V10.9212C0 11.527 0.434507 12.0409 1.03196 12.1411L2.45246 12.3835C2.59869 12.8514 2.79087 13.3068 3.02484 13.7413L2.20178 14.8861C1.85083 15.3791 1.90515 16.0517 2.33548 16.4779L3.58051 17.7229C3.81447 17.9569 4.12364 18.0864 4.4537 18.0864C4.71273 18.0864 4.95923 18.007 5.16813 17.8566L6.34214 17.021C6.76411 17.2424 7.20697 17.4221 7.66237 17.5641L7.89634 18.9679C7.99661 19.5654 8.5105 19.9999 9.1163 19.9999H10.8794C11.4852 19.9999 11.9991 19.5654 12.0994 18.9679L12.3375 17.5641C12.8096 17.4179 13.265 17.2299 13.6995 17.0001L14.8568 17.8273C15.0657 17.9777 15.3164 18.0571 15.5754 18.0571C15.9055 18.0571 16.2146 17.9276 16.4486 17.6936L17.6936 16.4486C18.1198 16.0225 18.1783 15.3498 17.8273 14.8568L17.0001 13.6953C17.2299 13.2567 17.4221 12.8013 17.5641 12.3333L18.9679 12.0994C19.5654 11.9991 19.9999 11.4852 19.9999 10.8794V9.12048C20.0082 8.51467 19.5737 8.00078 18.9763 7.90051ZM18.8802 10.8794C18.8802 10.9337 18.8426 10.9797 18.7883 10.988L17.0335 11.2805C16.8121 11.3181 16.6366 11.481 16.5823 11.6941C16.4235 12.3083 16.1812 12.8973 15.8553 13.4447C15.7425 13.6368 15.7509 13.875 15.8804 14.0588L16.9124 15.5127C16.9416 15.5545 16.9374 15.6172 16.8998 15.6548L15.6548 16.8998C15.6256 16.9291 15.5963 16.9333 15.5754 16.9333C15.5504 16.9333 15.5295 16.9249 15.5127 16.9124L14.063 15.8804C13.8833 15.7509 13.641 15.7425 13.4488 15.8553C12.9015 16.1812 12.3124 16.4235 11.6983 16.5823C11.481 16.6366 11.3181 16.8163 11.2847 17.0335L10.988 18.7883C10.9797 18.8426 10.9337 18.8802 10.8794 18.8802H9.12048C9.06616 18.8802 9.02021 18.8426 9.01185 18.7883L8.71939 17.0335C8.68179 16.8121 8.51885 16.6366 8.30578 16.5823C7.70833 16.4277 7.13177 16.1896 6.59281 15.8804C6.50508 15.8303 6.40481 15.8052 6.30871 15.8052C6.19591 15.8052 6.07893 15.8386 5.98283 15.9097L4.52055 16.95C4.49966 16.9625 4.47877 16.9709 4.45788 16.9709C4.44117 16.9709 4.40774 16.9667 4.3785 16.9374L3.13347 15.6924C3.09587 15.6548 3.09169 15.5963 3.12093 15.5504L4.14871 14.109C4.27823 13.9251 4.28658 13.6828 4.17378 13.4906C3.8479 12.9475 3.59722 12.3584 3.43846 11.7442C3.37997 11.5312 3.20449 11.3682 2.98724 11.3306L1.21996 11.0298C1.16565 11.0214 1.12805 10.9755 1.12805 10.9212V9.16226C1.12805 9.10794 1.16565 9.06199 1.21996 9.05363L2.96217 8.76117C3.1836 8.72357 3.36325 8.56063 3.41757 8.34338C3.57215 7.72922 3.8103 7.13595 4.132 6.58864C4.2448 6.39645 4.23227 6.15831 4.10275 5.97865L3.06244 4.51637C3.0332 4.47459 3.03737 4.41192 3.07498 4.37432L4.32001 3.12929C4.34925 3.10004 4.3785 3.09587 4.39939 3.09587C4.42446 3.09587 4.44535 3.10422 4.46206 3.11676L5.90345 4.14453C6.08728 4.27405 6.3296 4.2824 6.52179 4.1696C7.06492 3.84372 7.65402 3.59304 8.26817 3.43428C8.48125 3.37579 8.64419 3.20031 8.68179 2.98306L8.9826 1.21579C8.99096 1.16147 9.03692 1.12387 9.09123 1.12387H10.8502C10.9045 1.12387 10.9504 1.16147 10.9588 1.21579L11.2512 2.95799C11.2888 3.17942 11.4518 3.35908 11.669 3.41339C12.2999 3.57215 12.9015 3.81865 13.4614 4.14871C13.6536 4.26152 13.8917 4.25316 14.0755 4.12364L15.5169 3.08751C15.5378 3.07498 15.5587 3.06662 15.5796 3.06662C15.5963 3.06662 15.6297 3.0708 15.659 3.10004L16.904 4.34507C16.9416 4.38268 16.9458 4.44117 16.9165 4.48712L15.8846 5.93687C15.7551 6.11653 15.7467 6.35885 15.8595 6.55103C16.1854 7.09835 16.4277 7.68744 16.5865 8.3016C16.6408 8.51885 16.8204 8.68179 17.0377 8.71522L18.7924 9.01185C18.8468 9.02021 18.8844 9.06616 18.8844 9.12048V10.8794H18.8802Z' fill='white'/%3E%3Cpath d='M10.0033 5.68201C7.62189 5.68201 5.6875 7.6164 5.6875 9.99783C5.6875 12.3793 7.62189 14.3137 10.0033 14.3137C12.3848 14.3137 14.3192 12.3793 14.3192 9.99783C14.3192 7.6164 12.3848 5.68201 10.0033 5.68201ZM10.0033 13.1856C8.24441 13.1856 6.81555 11.7568 6.81555 9.99783C6.81555 8.23892 8.24441 6.81005 10.0033 6.81005C11.7622 6.81005 13.1911 8.23892 13.1911 9.99783C13.1911 11.7568 11.7622 13.1856 10.0033 13.1856Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2272_4980'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.button-detail_settings__text_middle::before,
.button-detail_settings__text_middle::after {
    content: '';
    display: inline-block;
    position: absolute;
    height: 2px;
    width: 40%;
    /* width: calc(50% + 30px); */
    border-radius: 2px;
    background-color: #FFF;
    top: 50%;
    transform: translateY(-50%);
}
.button-detail_settings__text_middle::before {
    left: 0;
}
.button-detail_settings__text_middle::after {
    right: 0;
}
.button-detail_settings__text_bottom {
    color: #FFF;
    text-align: center;
    font-size: 1rem;
    font-weight: 300;
    line-height: 20px; /* 125% */
    text-decoration-line: underline;
}


.bubble_costs-text {
    line-height: 1.256875;
    letter-spacing: 2.36px;
}
.bubble_costs-text.gesamtkosten {
    display: none;
}
#bubble_costs__wunschfahrzeug,
#bubble_costs__vergleichsfahrzeug {
    font-family: "Merriweather Sans", sans-serif;
    /* font-size: 4em; */
    font-size: 3.125em;
    font-weight: 700;
    line-height: 1.340833333333333;
    white-space: nowrap;
    position: relative;
    display: inline-block;
}
@media (max-width: 767px) {
    #bubble_costs__wunschfahrzeug,
    #bubble_costs__vergleichsfahrzeug {
        font-size: 2.15em;
    }
} 


#bubble_costs__wunschfahrzeug_wrap,
#bubble_costs__vergleichsfahrzeug_wrap {
    position: relative;
    text-align: center;
    padding: 2em;
    width: 40%;
}

#bubble_costs__wunschfahrzeug_label,
#bubble_costs__vergleichsfahrzeug_label {
    letter-spacing: 2.364px;
    display: block;
}
@media (max-width: 767px) {
    #bubble_costs__wunschfahrzeug_label,
    #bubble_costs__vergleichsfahrzeug_label {
        font-size: 0.875rem;
    }
}  

@media (max-width: 767px) {
    #bubble_costs__wunschfahrzeug_wrap,
    #bubble_costs__vergleichsfahrzeug_wrap {
        padding: 0em;
    }
}   

#bubble_costs__wunschfahrzeug:after,
#bubble_costs__vergleichsfahrzeug:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 5px;
    display: inline-block;
    border-radius: 40px;
    background-color: #F39200;
}
#bubble_costs__vergleichsfahrzeug:after {
    background-color: #00858C;
}

#bubble_costs__vergleichsfahrzeug.--not_electro:after {
    background-color: #F39200;
}

.button-info {
    margin: 0;
    border: 1px solid #fff;
    padding: 0;
    width: 2.34375em;
    height: 2.34375em;
    vertical-align: middle;
    font-family: Merriweather, serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #ff6760;
    border-radius: 100%;
}
.contains-info-button {
    position: relative;
}
#button__open_dialog__kfzsteuer_2,
#button__open_dialog__kfzsteuer_1 {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(112.5%, -50%);
}
@media (min-width: 1024px) {
    #button__open_dialog__kfzsteuer_1 {
        transform: translate(75%, -120%);
    }
}
#button__open_dialog__co2_preispfad {
    position: absolute;
    top: 0.25em;
    right: 0.25em;
}
@media (max-width: 1023px) {
    #button__open_dialog__co2_preispfad {
        position: static;
    }
}

#wrap__export_pdf {
    position: relative;
    /* margin-top: 2rem; */
    /* bottom: -0.625em; */
    bottom: 0em;
    left: 0;
    width: 100%;
    /* transform: translateY(50%); */
}

/* --------------------------------------------------------------------------
    Dialog
-------------------------------------------------------------------------- */
::backdrop {
    background: rgba(4, 12, 24, 0.70);
}

#dialog {
    position: fixed;
    /* padding: 1.88em 1.88em 2em 1.88em; */
    /* max-width: 70ch; */
    padding: 7em;
    max-width: 80%;
    font-family: Merriweather;
    font-size: 1em;
    font-style: normal;
    font-weight: 300;
    line-height: 1.75em;
    border-radius: 10px;
    background: #FFF;
    border: none;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 767px) {
    #dialog {
        padding: 4em 1em 2em 1em;
    }
}
#button__close_dialog {
    position: absolute;
    /* top: 0.26em;
    right: 0.26em; */
    top: 2em;
    right: 2em;
    margin: 0;
    border: none;
    padding: 0.5em;
    background: transparent;
}
.bg-scrolling-element-when-modal-active {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
}
.dialog-paragraph {
    margin: 0;
}
.dialog-image {
    max-width: 100%;
    height: auto;
}
.dialog-content--fahrzeugwechsel {
    text-align: center;
}
.dialog-content--fahrzeugwechsel h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #102542;
}
.dialog-content--fahrzeugwechsel p {
    margin: 0 auto 2rem;
    max-width: 60ch;
    color: #0F1F39;
}
.dialog-content__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.content__fahrzeugbestaetigung {
    flex-direction: column;
}
.dialog-content__button {
    border: none;
    border-radius: 6px;
    padding: 0.75em 1.75em;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.dialog-content__button:not(.dialog-content__button--primary) {
    background-color: transparent;
    color: #102542;
    border: 1px solid #102542;
}
.dialog-content__button--secondary {
    background: #F1862F;
}
.dialog-content__button--secondary:hover,
.dialog-content__button--secondary:focus-visible {
    background: #d87326;
}
.dialog-content__button--primary {
    background: #C74C1E;
}
.dialog-content__button--primary:hover,
.dialog-content__button--primary:focus-visible {
    background: #a23d18;
}
.dialog-content__button:disabled {
    background-color: #818181;
    cursor: not-allowed;
    opacity: 0.6;
}
.dialog-content__button:disabled:hover,
.dialog-content__button:disabled:focus-visible {
    background-color: #818181;
}

/* --------------------------------------------------------------------------
    Print
-------------------------------------------------------------------------- */
@media print {
    html {
        /* Etwas kleinere Grundschrift, damit mehr Inhalt auf eine Seite passt */
        font-size: 80%;
    }

    @page {
        size: A4;
        /* Kleinere Seitenränder, um den nutzbaren Bereich zu vergrößern */
        margin: 5mm;
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .meta-menu__list,
    ul.breadcrumbs,
    .page-header__lead,
    .header-main .navbar__list > :last-child,
    .sharing,
    .disclaimer,
    footer {
        display: none;
    }

    #botui-start,
    #button__export_pdf,
    #table_legend__wunschfahrzeug__label,
    #table_legend__vergleichsfahrzeug__label,
    #bubble_costs_illustration,
    #group__show_hide_years,
    .button-info,
    #select__graph,
    #panel__input__vergleichsfahrzeug,
    #panel__group__settings,
    #panel__info_small,
    #panel__info,
    #navigation-main,
    #button_detail_settings_wrap,
    #wrap__faq,
    .year-card-slider__header-description,
    .year-card-slider__header {
        display: none;
    }

    .header-main {
        padding: 0 1em;
    }

    .header-main__inner {
        margin: 0;
        padding: 0;
        height: auto;
        background-color: transparent;
    }

    .page-header {
        margin: 0.25em 0 0.25em 0;
        padding: 0 0.5em;
    }

    .header-main .meta-menu {
        display: flex;
        justify-content: flex-end;
    }

    .header-main__inner > .container {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .meta-menu .float-right {
        width: auto;
        height: 35px;
        display: block;
        margin-top: 10px;
    }

    .header-main .navbar__logo-link img {
        width: auto;
        height: 30px;
        display: block;
        margin-top: 14px;
    }

    .container,
    .header-main__inner > .container {
        margin: auto;
        padding: 0;
        max-width: none;
        width: auto;
        height: auto;
    }

    .page-header__title {
        margin: 12px 0 5px 0;
    }

    .page-header__title > p {
        margin: 0;
    }

    .content_element-energiekostentool {
        /* Weniger Abstand nach oben im Druck und kein Hintergrundbild im Druck */
        margin-top: 1rem;
        background: none !important;
    }

    #plugin__energiekostentool {
        /* Weniger Innenabstand und leicht kleinere Schrift im Plugin-Bereich */
        padding: 0.75em 0 0 0;
        font-size: 85%;
    }

    #panel__group__data {
        flex-direction: column;
        margin-bottom: -1em;
    }

    /* Reihenfolge der Elemente im Druck:
       1. #figcaption__table
       2. #bubble_costs (in #panel__total_result)
       3. Diagramme (Panel Chart)
       4. Tabellen (Panel Table)
       5. #figcaption__chart (innerhalb des Chart-Panels) */
    #figcaption__table {
        order: 1;
        margin-top: 0 !important;
    }

    #panel__total_result {
        order: 2;
        width: 100%;
        margin-top: 0.25rem;
    }

    #panel__chart {
        order: 3;
        max-width: none;
        flex-grow: 1;
        page-break-before: auto;
        margin-top: 0.5rem;
        padding-bottom: 1rem;
    }

    #panel__table {
        order: 4;
        max-width: none;
        flex-grow: 1;
        margin-top: 0.5rem;
        display: block !important;
        /* display: none !important; */
    }

    /* View-Switch und CO2-Preispfad-Auswahl im Druck ausblenden */
    .view-switch,
    .select-component-co2_preispfad {
        display: none !important;
    }

    #figcaption__chart {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    #figcaption__chart > div {
        flex-basis: 100%;
        border-radius: 0.25rem;
        background: #FFF;
        /* Im Druck kleinere/keine Schatten, um Platz zu sparen */
        box-shadow: none;
        padding: 0.5rem 0.75rem;
    }

    #chart {
        margin: 0;
        /* max-width: 66%; */
        max-width: 100%;
    }

    .stacked_bars .bar {
        margin-bottom: 1px;
        height: 0.5em;
    }

    #bubble_costs_wrap {
        display: flex;
    }

    /* Bubble-Kosten-Bereich im Druck immer anzeigen */
    #bubble_costs,
    #bubble_costs[hidden] {
        display: inline-flex !important;
        padding: 1.5em 2em;
        font-size: 0.8em;
    }

    /* Alle Jahres-Diagramme untereinander anzeigen:
       Slider-Effekte und Unschärfe im Druck deaktivieren */

    /* Slider-Clones bei Diagrammen und Tabellen ausblenden */
    [data-slider-clone="true"],
    .chart-row[data-slider-clone="true"],
    .year-card[data-slider-clone="true"] {
        display: none !important;
    }

    .chart-slider__track {
        transform: none !important;
    }

    /* Nur Summary-Versionen der Diagramme anzeigen */
    .chart-row:not(.chart-row--summary) {
        display: none !important;
    }
    
    .chart-row--summary {
        filter: none !important;
        opacity: 1 !important;
        page-break-inside: avoid;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0rem;
        padding-top: 0 !important;
    }
    
    /* Jahreszahl über Diagrammen anzeigen */
    .chart-row--summary::before {
        content: attr(data-year);
        display: block;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
        font-family: "Merriweather Sans", sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }
    
    #panel__chart {
        flex-direction: column;
    }
    
    #chart_data {
        flex-direction: column;
    }

    /* Jahres-Tabellen: nur Summary-Versionen anzeigen */
    .year-card-grid {
        transform: none !important;
        flex-direction: column;
    }

    .year-card:not(.year-card--summary) {
        display: none !important;
    }
    
    .year-card--summary {
        opacity: 1 !important;
        filter: none !important;
        page-break-inside: avoid;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0rem;
        padding-top: 0 !important;
    }
    .year-card-slider {
        margin-top: 0rem;
    }
    /* Jahreszahl über Tabellen anzeigen */
    .year-card--summary::before {
        content: attr(data-year);
        display: block;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
        font-family: "Merriweather Sans", sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }

    /* Vehicle-cards in der Tabelle nebeneinander anzeigen */
    .year-card__vehicles {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    /* Navigationselemente der Slider im Druck ausblenden */
    .year-card-slider__nav,
    .year-card-slider__header-description {
        display: none !important;
    }
    .vehicle-card__title {
        font-size: 1rem;
        padding: 1.25rem 1.75rem 0.5rem 1.25rem;
    }
    .vehicle-card__metric {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    th[scope="row"],
    td {
        /* Weniger Zellenabstand, damit Tabellen kompakter werden */
        padding: 0.2em 0.4em;
        font-size: 0.85em;
    }
    th[scope="col"] {
        height: 2.25em;
    }
    th,
    td {
        border-bottom: none;
    } 
    th[scope="row"]:first-child,
    td:first-child {
        text-align: left;
    }
    th[scope="col"]:last-child,
    td:last-child {
        border-left: none;
        text-align: right;
        font-weight: 400;
    }  
}