@charset "UTF-8";
/* @import url("fonts/stylesheet.css");*/
@import url("fonts/ebert/stylesheet.css");

html{
    background-image: url("bilder/hauptgrafik/startgrafik_widescreen.svg");
    background-position: center top;
    background-size: auto 149.8%;
    background-repeat: no-repeat;
}


body {
    margin: 0;
    overflow: hidden;
    font-family: 'Ebert';
    font-weight: 500;

    --farbe-violett: #7c397b;
    --farbe-mint: #659997;
    --farbe-hellblau: #4494b6;
    --farbe-dunkelrot: #981d5b;
    --farbe-rot: #df3333;
    --farbe-dunkelblau: #1a66a1;
    --farbe-orange: #f29626;

    --farbe-violett-light: #decede;
    --farbe-mint-light: #cfebe9;
    --farbe-hellblau-light: #d6ebf5;
    --farbe-dunkelrot-light: #e8cddb;
    --farbe-rot-light: #f3b3b3;
    --farbe-dunkelblau-light: #b3cce0;
    --farbe-orange-light: #fcead4;

    --farbe-violett-schrift: #5b085a;
    --farbe-mint-schrift: #005251;
    --farbe-hellblau-schrift: #004880;
    --farbe-dunkelrot-schrift: #7f0442;
    --farbe-rot-schrift: #a10000;
    --farbe-dunkelblau-schrift: #004071;
    --farbe-orange-schrift: #7f3600;

    --farbe-violett-rgb: 124, 57, 123;
    --farbe-mint-rgb: 101, 153, 151;
    --farbe-hellblau-rgb: 68, 148, 182;
    --farbe-dunkelrot-rgb: 152, 29, 91;
    --farbe-rot-rgb: 223, 51, 51;
    --farbe-dunkelblau-rgb: 26, 102, 161;
    --farbe-orange-rgb: 242, 150, 38;

    --farbe-violett-light-rgb: 222, 206, 222;
    --farbe-mint-light-rgb: 207, 235, 233;
    --farbe-hellblau-light-rgb: 214, 235, 245;
    --farbe-dunkelrot-light-rgb: 232, 205, 219;
    --farbe-rot-light-rgb: 243, 179, 179;
    --farbe-dunkelblau-light-rgb: 179, 204, 224;
    --farbe-orange-light-rgb: 252, 234, 212;

    --farbe-violett-light-backdrop: #f9f5f9;
    --farbe-mint-light-backdrop: #f6fbfb;
    --farbe-hellblau-light-backdrop: #f7fbfd;
    --farbe-dunkelrot-light-backdrop: #fbf5f8;
    --farbe-rot-light-backdrop: #fdf0f0;
    --farbe-dunkelblau-light-backdrop: #f0f5f9;
    --farbe-orange-light-backdrop: #fffbf7;

    --farbe-violett-schrift-rgb: 91, 8, 90;
    --farbe-mint-schrift-rgb: 0, 82, 81;
    --farbe-hellblau-schrift-rgb: 0, 72, 128;
    --farbe-dunkelrot-schrift-rgb: 127, 4, 66;
    --farbe-rot-schrift-rgb: 161, 0, 0;
    --farbe-dunkelblau-schrift-rgb: 0, 64, 113;
    --farbe-orange-schrift-rgb: 127, 54, 0;

     /* ggf auch farben der personas */
    --farbe-lotta: var(--farbe-hellblau);
    --farbe-asis: var(--farbe-violett);
    --farbe-olga: var(--farbe-dunkelblau);
    --farbe-selin: var(--farbe-rot);
    --farbe-ulrich: var(--farbe-dunkelrot);
    --farbe-thomas: var(--farbe-mint);

    --farbe-lotta-light: var(--farbe-hellblau-light);
    --farbe-asis-light: var(--farbe-violett-light);
    --farbe-olga-light: var(--farbe-dunkelblau-light);
    --farbe-selin-light: var(--farbe-rot-light);
    --farbe-ulrich-light: var(--farbe-dunkelrot-light);
    --farbe-thomas-light: var(--farbe-mint-light);

    --farbe-lotta-schrift: var(--farbe-hellblau-schrift);
    --farbe-asis-schrift: var(--farbe-violett-schrift);
    --farbe-olga-schrift: var(--farbe-dunkelblau-schrift);
    --farbe-selin-schrift: var(--farbe-rot-schrift);
    --farbe-ulrich-schrift: var(--farbe-dunkelrot-schrift);
    --farbe-thomas-schrift: var(--farbe-mint-schrift);



}

.infografik_wrapper,
.infografik_wrapper #popups .popup_window,
.infografik_wrapper .modal,
.infografik_wrapper .modal .dialog_content,
.infografik_wrapper #popups .popup_window .popup_content,
.modal.route .route_wrapper,
.modal.persona .station_wrapper,
.infografik_wrapper #popups .popup_window .ui-accordion .ui-accordion-content.ui-accordion-content
{
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */

}


.infografik_wrapper::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window .popup_content::-webkit-scrollbar,
.infografik_wrapper .modal::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content::-webkit-scrollbar,
.modal.route .route_wrapper::-webkit-scrollbar,
.modal.persona .station_wrapper::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window .ui-accordion .ui-accordion-content.ui-accordion-content::-webkit-scrollbar {
    width: 0; /* For Chrome, Safari, and Opera */
    display: none;
}


img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-use©r-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
}

.hintergrund img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.hintergrund img.mobile{
    display: none;
}



#rotate_animation {
    display: none;
    position: absolute;
    top: 26%;
    width: 30%;
    background: rgba(255, 255, 255, 0.8);
    height: 53%;
    left: 36.5%;
    border-radius: 500px;
    z-index: 10000000;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#rotate_animation img {
    margin: 0 auto;
    width: 70%;
    height: 70%;
}

@media only screen and (max-width: 500px) {
    #rotate_animation {
        display: flex;
    }
}

a[href],
input[type='submit'],
input[type='image'],
label[for],
select,
button,
.pointer {
    cursor: pointer;
}

ul {
    margin:  2%;
    padding-left: 5%;
    padding-top: 1%;
}

.flex_break {
    flex-basis: 100%;
    height: 0;
}

.infografik_wrapper {
    background: transparent;
    background-size: cover;
    max-width: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: visible;
    width: 100%;
    height: 100%;
    /*--before-height: 56.25%;*/
    --before-height: 69.49%;
    --safe-space: 0dvh;
}

.infografik_wrapper::before {
    content: '';
    display: block;
    padding-top: var(--before-height);
}

.infografik_wrapper #backgroundimage {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: #d6dcee;
    position: absolute;
    left: 0;
    top: 0;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: contain;
}
.infografik_wrapper .schaltflaechen {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.infografik_wrapper .schaltflaechen .button {
    position: absolute;
    height: auto;
}

.shakehover:not(:focus):hover {
    -webkit-animation: headShake 1s infinite !important;
    animation: headShake 1s infinite !important;

}
.button:focus {
    outline: none;
}

.dauerpulsieren {
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

.pulsehover:hover {
    animation: pulse .6s;
    -webkit-animiation: pulse .6s;
}

.infografik_wrapper #infografik-titel {
    position: absolute;
    width: 23%;
    height: auto;
    left: 22.9%;
    padding: 0 2%;
    box-sizing: border-box;
    bottom: 13.4%;
    z-index: 14;
}

.infografik_wrapper #infografik-titel h1 {
    font-family: 'Ebert Headline';
    color: rgba(255, 255, 255, 1);
    text-transform: none;
    font-size: 100%;
    text-align: left;
    margin: 0;
    line-height: 1;
}

.infografik_wrapper h2 {
    font-size: 100%;
    margin: 0;
    text-align: left;
}

.infografik_wrapper h3 {
    font-size: 140%;
    margin: 0;
    text-align: left;
}

.infografik_wrapper .logo {
    position: fixed;
    width: 12%;
    height: 11.8%;
    left: 2.8%;
    padding: 0;
    box-sizing: border-box;
    bottom: 3%;
    z-index: 14;
}
.infografik_wrapper .logo img {
    width: 100%;
    height: 100%;
}

.hintergrund {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    overflow: visible;
}
.hintergrund img {
    width: 100.34%;
    left: -0.34%;
    position: absolute;
}
.infografik_wrapper .interactive_wrapper {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
    box-sizing: border-box;
}

.hidden {
    display: none;
    visibility: hidden;
}

.schaltflaechen button.button,
button.infobutton {
    border: 0;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    position: relative;
    box-sizing: border-box;
    font-family: Ebert;
    font-size: 120%;
}

button.infobutton {
    width: 4.8%;
    height: 7%;
    right: 1.4%;
    position: fixed;
    top: calc( 1.5% + var(--safe-space));

}

button.infobutton svg {
    width: 100%;
    height: 100%;
}

/* To extend clickable area */
.schaltflaechen button.button::after {
    content: '';
    position: absolute;
    left: 0;
    top: -7%;
    width: 100%;
    height: 115%;
}

#contents {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.modal {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding-left: 0;

}

.modal.alert,
.modal.impressum,
.modal.infopopup {
    align-content: center;
}

.modal.infopopup .dialog_content,
.modal.impressum .dialog_content,
.modal.alert .dialog_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    height: 90%;
    margin: auto;
    background: #ffffff;
    border-radius: 0;
    max-width: 85%;
    box-shadow: 0 0 calc(var(--font-size) * 3) rgba(0,0,0,.6)
}
.modal.impressum .dialog_content {
    width: 60%;
}

.modal .dialog_content {
    box-sizing: border-box;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    overflow: hidden;

}
.modal .dialog_content .content_wrapper {
    border-radius: 0;
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding: 2% 3.5%;
    box-sizing: border-box;
    position: relative;
}


.modal.persona.lotta .dialog_content .content_wrapper {
    background-color: var(--farbe-lotta-light);
}
.modal.persona.thomas .dialog_content .content_wrapper {
    background-color: var(--farbe-thomas-light);
}
.modal.persona.olga .dialog_content .content_wrapper {
    background-color: var(--farbe-olga-light);
}
.modal.persona.selin .dialog_content .content_wrapper {
    background-color: var(--farbe-selin-light);
}
.modal.persona.asis .dialog_content .content_wrapper {
    background-color: var(--farbe-asis-light);
}
.modal.persona.ulrich .dialog_content .content_wrapper {
    background-color: var(--farbe-ulrich-light);
}

.modal.persona.violett .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-violett-light-rgb), 0.2 ) !important;
}
.modal.persona.dunkelrot .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-dunkelrot-light-rgb), 0.2 ) !important;
}
.modal.persona.dunkelblau .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-dunkelblau-light-rgb), 0.2 ) !important;
}
.modal.persona.rot .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-rot-light-rgb), 0.2 ) !important;
}
.modal.persona.mint .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-mint-light-rgb), 0.2 ) !important;
}
.modal.persona.hellblau .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-hellblau-light-rgb), 0.2 ) !important;
}
.modal.persona.orange .dialog_content .content_wrapper {
    background-color: rgba( var(--farbe-orange-light-rgb), 0.2 ) !important;
}



.modal.persona .dialog_content .content_wrapper .steckbrief {
    background-color: #fff;
    border-radius: 0;
    padding: 3%;
    width: 40%;
    font-size: 105%;
    color: #000;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.modal.persona.lotta .dialog_content .content_wrapper .steckbrief {
    color: var(--farbe-lotta-schrift);
}
.modal.persona.thomas .dialog_content .content_wrapper .steckbrief {
    color: var(--farbe-thomas-schrift);
}
.modal.persona.olga .dialog_content .content_wrapper .steckbrief {
    color: var(--farbe-olga-schrift);
}
.modal.persona.asis .dialog_content .content_wrapper .steckbrief {
    color: var(--farbe-asis-schrift);
}
.modal.persona.selin .dialog_content .content_wrapper .steckbrief {
    color: var(--farbe-selin-schrift);
}
.modal.persona.ulrich .dialog_content .content_wrapper .steckbrief {
    color: var(--farbe-ulrich-schrift);
}

.modal.persona .dialog_content .content_wrapper .steckbrief .avatar {
    width: 100%;
    top: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5%;
}
.modal.persona .dialog_content .content_wrapper .steckbrief .avatar .avatar_name {
    font-weight: 600;
    font-size: 150%;
    line-height: 1;
}

.modal.persona .dialog_content .content_wrapper .steckbrief .avatar .avatar_bild {
    width: 30%;
    margin-right: 5%;
}
.modal.persona .dialog_content .content_wrapper .steckbrief .losgehts {
    width: auto;
    margin: 0 auto;
    margin-top: auto;
    padding: 3% 8%;
    border-radius: 0;
    background-color: #000;
    color: #fff;
    border: 0;
    font-size: 120%;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.modal.persona.lotta .dialog_content .content_wrapper .steckbrief .losgehts {
    background-color: var(--farbe-lotta);
}
.modal.persona.thomas .dialog_content .content_wrapper .steckbrief .losgehts {
    background-color: var(--farbe-thomas);
}
.modal.persona.olga .dialog_content .content_wrapper .steckbrief .losgehts {
    background-color: var(--farbe-olga);
}
.modal.persona.selin .dialog_content .content_wrapper .steckbrief .losgehts {
    background-color: var(--farbe-selin);
}
.modal.persona.asis .dialog_content .content_wrapper .steckbrief .losgehts {
    background-color: var(--farbe-asis);
}
.modal.persona.ulrich .dialog_content .content_wrapper .steckbrief .losgehts {
    background-color: var(--farbe-ulrich);
}

.modal.persona .dialog_content .content_wrapper .route {
    position: relative;
    width: 90%;
    padding: 3%;
    box-sizing: border-box;
    color: #000;
    font-weight: 600;
    font-size: 130%;
}
.modal.persona .dialog_content .content_wrapper .route .steckbrief_weg {
    width: 100%;
    margin-top: 5%;
}
.modal.persona.asis .dialog_content .content_wrapper .route {
    color: var(--farbe-asis-schrift);
}
.modal.persona.lotta .dialog_content .content_wrapper .route {
    color: var(--farbe-lotta-schrift);
}
.modal.persona.thomas .dialog_content .content_wrapper .route {
    color: var(--farbe-thomas-schrift);
}
.modal.persona.olga .dialog_content .content_wrapper .route {
    color: var(--farbe-olga-schrift);
}
.modal.persona.ulrich .dialog_content .content_wrapper .route {
    color: var(--farbe-ulrich-schrift);
}
.modal.persona.selin .dialog_content .content_wrapper .route {
    color: var(--farbe-selin-schrift);
}

.modal.persona.violett .dialog_content {
    color: var(--farbe-violett-schrift);
}
.modal.persona.mint .dialog_content {
    color: var(--farbe-mint-schrift);
}
.modal.persona.hellblau .dialog_content {
    color: var(--farbe-hellblau-schrift);
}
.modal.persona.dunkelrot .dialog_content {
    color: var(--farbe-dunkelrot-schrift);
}
.modal.persona.rot .dialog_content {
    color: var(--farbe-rot-schrift);
}
.modal.persona.dunkelblau .dialog_content {
    color: var(--farbe-dunkelblau-schrift);
}
.modal.persona.orange .dialog_content {
    color: var(--farbe-orange-schrift);
}


.modal .dialog_content p,
.modal .dialog_content li {
    margin: 0;
    font-size: 100%;
    line-height: 1.3;
    margin-bottom: 2%;
}

.modal .dialog_content li {
    margin-bottom: 1.5%;
}

.modal .dialog_content li ul li {
    margin-bottom: 1%;
}

.modal .dialog_content ol {
    padding-left: 5%;
    position: relative;
    list-style-type: none;
}
.modal .dialog_content ol li::marker {
    content: '';
    display: none;
}
.modal .dialog_content ol li:before {
    content: '➊';
    position: absolute;
    left: -0.1%;
    width: auto;
    height: 100%;
    font-size: 180%;
    line-height: 1;
}

.modal .dialog_content ol li:nth-child(2):before {
    content: '➋';
}
.modal .dialog_content ol li:nth-child(3):before {
    content: '➌';
}
.modal .dialog_content ol li:nth-child(4):before {
    content: '➍';
}
.modal .dialog_content ol li:nth-child(5):before {
    content: '➎';
}

::backdrop {
    opacity: 1;
    pointer-events: none;
    backdrop-filter: blur(2px) brightness(90%);
}
.modal.infopopup::backdrop {
    background-color: rgba(var(--farbe-dunkelblau-rgb), 0.6) !important;
}

.modal.antwortinfos::backdrop,
.modal.feedback::backdrop {
    background-color: rgba(0, 0, 0, 0.2);
}

.modal.station.asis::backdrop {
    background-color: var(--farbe-violett-light-backdrop);
}
.modal.station.violett::backdrop {
    background-color: var(--farbe-violett-light-backdrop) !important;
}
.modal.station.thomas::backdrop {
    background-color: var(--farbe-mint-light-backdrop);
}
.modal.station.mint::backdrop {
    background-color: var(--farbe-mint-light-backdrop) !important;
}
.modal.station.lotta::backdrop {
    background-color: var(--farbe-hellblau-light-backdrop);
}
.modal.station.hellblau::backdrop {
    background-color: var(--farbe-hellblau-light-backdrop) !important;
}
.modal.station.selin::backdrop {
    background-color: var(--farbe-rot-light-backdrop);
}
.modal.station.rot::backdrop {
    background-color: var(--farbe-rot-light-backdrop) !important;
}
.modal.station.ulrich::backdrop {
    background-color: var(--farbe-dunkelrot-light-backdrop);
}
.modal.station.dunkelrot::backdrop {
    background-color: var(--farbe-dunkelrot-light-backdrop) !important;
}
.modal.station.olga::backdrop {
    background-color: var(--farbe-dunkelblau-light-backdrop);
}
.modal.station.dunkelblau::backdrop {
    background-color: var(--farbe-dunkelblau-light-backdrop) !important;
}
.modal.station.orange::backdrop {
    background-color: var(--farbe-orange-light-backdrop) !important;
}


.modal.persona.station .dialog_content,
.modal.persona.station .dialog_content .content_wrapper {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.modal.persona .station_wrapper {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1%;
}

.modal.persona .station_wrapper .station_infos,
.modal.persona .station_wrapper .station_quiz {
    width: 46%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    display: none;
}
.modal.persona .station_wrapper .station_quiz {
    width: 50%;
}

.modal.persona .station_wrapper .station_infos:focus-visible,
.modal.persona .station_wrapper .station_quiz:focus-visible {
    outline-width: 0;
    outline-style: none;
}

.modal.persona .station_wrapper .station_quiz {
    margin-left: 3%;
}

.modal.persona .station_wrapper .station_quiz.visible,
.modal.persona .station_wrapper .station_infos {
    display: flex;
}



.modal.persona .station_wrapper .station_infos h1 {
    font-size: 200%;
    width: 100%;
    margin: 0;
}
.modal.persona .station_wrapper .station_infos p {
    font-size: 115%;
    padding: 3% 0% 3% 0;
    margin: 4% 0 5% 0;
}

.modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    position: relative;
    border-radius: 0;
    background-color: #000;
    border: calc(var(--font-size) * 0.16) solid transparent;
    color: #fff;
    font-weight: 600;
    font-size: 130%;
    width: 80%;
    padding: 2% 8%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.modal.persona.violett .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-violett);
}
.modal.persona.dunkelblau .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-dunkelblau);
}
.modal.persona.dunkelrot .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-dunkelrot);
}
.modal.persona.rot .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-rot);
}
.modal.persona.mint .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-mint);
}
.modal.persona.hellblau .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-hellblau);
}
.modal.persona.orange .station_wrapper .station_infos button.was_wuerde_mir_helfen {
    background-color: var(--farbe-orange);
}
.modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen svg {
    width: 4%;
    margin-left: 10%;
    transition: transform .2s ease-in-out;
}
.modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen svg path {
    fill: #fff;
}
.modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover {
    background-color: transparent;
    color: #000;
    border-color: #000
}

.modal.persona.violett .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.violett .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path {
    color: var(--farbe-violett);
    border-color: var(--farbe-violett);
    fill: var(--farbe-violett);
}
.modal.persona.dunkelblau .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.dunkelblau .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path {
    color: var(--farbe-dunkelblau);
    border-color: var(--farbe-dunkelblau);
    fill: var(--farbe-dunkelblau);
}
.modal.persona.dunkelrot .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.dunkelrot .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path {
    color: var(--farbe-dunkelrot);
    border-color: var(--farbe-dunkelrot);
    fill: var(--farbe-dunkelrot);
}
.modal.persona.rot .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.rot .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path {
    color: var(--farbe-rot);
    border-color: var(--farbe-rot);
    fill: var(--farbe-rot);
}
.modal.persona.mint .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.mint .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path{
    color: var(--farbe-mint);
    border-color: var(--farbe-mint);
    fill: var(--farbe-mint);
}
.modal.persona.hellblau .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.hellblau .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path {
    color: var(--farbe-hellblau);
    border-color: var(--farbe-hellblau);
    fill: var(--farbe-hellblau);
}
.modal.persona.orange .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover,
.modal.persona.orange .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg path {
    color: var(--farbe-orange);
    border-color: var(--farbe-orange);
    fill: var(--farbe-orange);
}

.modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen:hover svg {
    transform: translateX(40%);
}



.modal.persona .station_wrapper .station_quiz .quiz_frage {
    font-size: 160%;
    margin-bottom: 5%;
    margin-top: 3%;
    line-height: 1;
}
.modal.persona .station_wrapper .station_quiz .quiz_frage p {
    margin: 0;
}
.quiz_antworten_wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0;
    position: relative;
    height: auto;
}

.quiz_antworten_wrapper button.button.quiz_antwort,
.quiz_antworten_wrapper button.button.nextstep,
.wrapper_auswertung button.button.closequiz,
.quiz_antworten_wrapper button.button.auswerten{
    width: 100% !important;
    box-sizing: border-box;
    margin: 2.5% auto;
    padding: 2.8% 5%;
    border-radius: 0;
    border: calc(var(--font-size) * 0.16) solid transparent;
    font-weight: 600;
    font-size: 110%;
    transition: all 0.2s ease-in-out;
    position: relative !important;
    color: #000;
    transition: all 0.1s ease-in-out;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #a1a1a1;
    text-align: center;
}
.modal.violett .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.violett .quiz_antworten_wrapper button.button.nextstep,
.modal.violett .wrapper_auswertung button.button.closequiz,
.modal.violett .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-violett-schrift);
    background-color: var(--farbe-violett-light);
}
.modal.dunkelrot .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.dunkelrot .quiz_antworten_wrapper button.button.nextstep,
.modal.dunkelrot .wrapper_auswertung button.button.closequiz,
.modal.dunkelrot .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-dunkelrot-schrift);
    background-color: var(--farbe-dunkelrot-light);
}
.modal.dunkelblau .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.dunkelblau .quiz_antworten_wrapper button.button.nextstep,
.modal.dunkelblau .wrapper_auswertung button.button.closequiz,
.modal.dunkelblau .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-dunkelblau-schrift);
    background-color: var(--farbe-dunkelblau-light);
}
.modal.rot .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.rot .quiz_antworten_wrapper button.button.nextstep,
.modal.rot .wrapper_auswertung button.button.closequiz,
.modal.rot .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-rot-schrift);
    background-color: var(--farbe-rot-light);
}
.modal.mint .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.mint .quiz_antworten_wrapper button.button.nextstep,
.modal.mint .wrapper_auswertung button.button.closequiz,
.modal.mint .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-mint-schrift);
    background-color: var(--farbe-mint-light);
}
.modal.hellblau .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.hellblau .quiz_antworten_wrapper button.button.nextstep,
.modal.hellblau .wrapper_auswertung button.button.closequiz,
.modal.hellblau .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-hellblau-schrift);
    background-color: var(--farbe-hellblau-light);
}
.modal.orange .quiz_antworten_wrapper button.button.quiz_antwort,
.modal.orange .quiz_antworten_wrapper button.button.nextstep,
.modal.orange .wrapper_auswertung button.button.closequiz,
.modal.orange .quiz_antworten_wrapper button.button.auswerten {
    color: var(--farbe-orange-schrift);
    background-color: var(--farbe-orange-light);
}

.modal .quiz_antworten_wrapper .mehrinfos {
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    width: calc(var(--font-size) * 2.2);
    height: calc(var(--font-size) * 2.2);
    border-radius: 500px;
    position: absolute;
    right: calc(var(--font-size) * -1.1);
    top: calc(var(--font-size) * -1.1);
    font-size: 130%;
    z-index: 10;
}

.quiz_antworten_wrapper button.button.quiz_antwort {
    width: 84% !important;
    margin: 2.5% 0;
    margin-right: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-sizing: border-box;
    border-right-width: 0;
}

.modal .quiz_antworten_wrapper .mehrinfos {
    border-width: calc((var(--font-size) * 0.16));
    border-style: solid;
    border-color: #000;
    width: 16%;
    position: relative;
    height: auto;
    border-radius: 0;
    right: 0;
    top: 0;
    font-size: 150%;
    margin: 2.5% 0;
    box-sizing: border-box;
    flex-grow: 1;
    cursor: pointer;
    font-weight: bold;

}
.modal .quiz_antworten_wrapper .mehrinfos > svg,
.modal .quiz_antworten_wrapper .mehrinfos > img {
    width: 15%;
    animation: mehrinfosattention 1s ease-in-out alternate-reverse infinite;
}

@keyframes mehrinfosattention {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.modal.violett .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-violett);
    border-color: var(--farbe-violett);
}
.modal.dunkelblau .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-dunkelblau);
    border-color: var(--farbe-dunkelblau);
}
.modal.dunkelrot .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-dunkelrot);
    border-color: var(--farbe-dunkelrot);
}
.modal.rot .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-rot);
    border-color: var(--farbe-rot);
}
.modal.mint .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-mint);
    border-color: var(--farbe-mint);
}
.modal.hellblau .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-hellblau);
    border-color: var(--farbe-hellblau);
}
.modal.orange .quiz_antworten_wrapper .mehrinfos {
    background-color: var(--farbe-orange);
    border-color: var(--farbe-orange);
}


.modal.violett .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.violett .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-violett-light);
    color: var(--farbe-violett-schrift);
    fill: var(--farbe-violett-schrift) !important;
}
.modal.dunkelblau .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.dunkelblau .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-dunkelblau-light);
    color: var(--farbe-dunkelblau-schrift);
    fill: var(--farbe-dunkelblau-schrift) !important;
}
.modal.dunkelrot .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.dunkelrot .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-dunkelrot-light);
    color: var(--farbe-dunkelrot-schrift);
    fill: var(--farbe-dunkelrot-schrift) !important;
}
.modal.rot .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.rot .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-rot-light);
    color: var(--farbe-rot-schrift);
    fill: var(--farbe-rot-schrift) !important;
}
.modal.mint .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.mint .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-mint-light);
    color: var(--farbe-mint-schrift);
    fill: var(--farbe-mint-schrift) !important;
}
.modal.hellblau .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.hellblau .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-hellblau-light);
    color: var(--farbe-hellblau-schrift);
    fill: var(--farbe-hellblau-schrift)!important;
}
.modal.orange .quiz_antworten_wrapper .mehrinfos:hover svg path,
.modal.orange .quiz_antworten_wrapper .mehrinfos:hover {
    background-color: var(--farbe-orange-light);
    color: var(--farbe-orange-schrift);
    fill: var(--farbe-orange-schrift) !important;
}

.quiz_antworten_wrapper button.button.auswerten,
.quiz_antworten_wrapper button.button.nextstep,
.wrapper_auswertung button.button.closequiz {
    margin: 5% auto 0 auto;
    width: 45% !important;
    color: #fff;
    justify-content: center;
    border-radius: 0;
    padding: 2%;
}
.modal.violett .quiz_antworten_wrapper button.button.auswerten,
.modal.violett .quiz_antworten_wrapper button.button.nextstep,
.modal.violett .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-violett);
    color: #fff;
}
.modal.mint .quiz_antworten_wrapper button.button.auswerten,
.modal.mint .quiz_antworten_wrapper button.button.nextstep,
.modal.mint .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-mint);
    color: #fff;
}
.modal.dunkelrot .quiz_antworten_wrapper button.button.auswerten,
.modal.dunkelrot .quiz_antworten_wrapper button.button.nextstep,
.modal.dunkelrot .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-dunkelrot);
    color: #fff;
}
.modal.dunkelblau .quiz_antworten_wrapper button.button.auswerten,
.modal.dunkelblau .quiz_antworten_wrapper button.button.nextstep,
.modal.dunkelblau .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-dunkelblau);
    color: #fff;
}
.modal.hellblau .quiz_antworten_wrapper button.button.auswerten,
.modal.hellblau .quiz_antworten_wrapper button.button.nextstep,
.modal.hellblau .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-hellblau);
    color: #fff;
}
.modal.rot .quiz_antworten_wrapper button.button.auswerten,
.modal.rot .quiz_antworten_wrapper button.button.nextstep,
.modal.rot .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-rot);
    color: #fff;
}
.modal.orange .quiz_antworten_wrapper button.button.auswerten,
.modal.orange .quiz_antworten_wrapper button.button.nextstep,
.modal.orange .wrapper_auswertung button.button.closequiz {
    background-color: var(--farbe-orange);
    color: #fff;
}

.quiz_antworten_wrapper button.button.auswerten.disabled {
    display: none;
}
.quiz_antworten_wrapper button.button.nextstep {
    display: none;
}
.quiz_antworten_wrapper button.button.nextstep.visible {
    display: flex;
}
.wrapper_auswertung button.button.closequiz svg,
.quiz_antworten_wrapper button.button.nextstep svg,
.quiz_antworten_wrapper button.button.auswerten svg{
    width: 5%;
    margin-left: 10%;
    transition: transform .2s ease-in-out;
}
.quiz_antworten_wrapper button.button.nextstep svg path,
.quiz_antworten_wrapper button.button.auswerten svg path{
    fill: #fff;
}
@media (hover: hover) {
    .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: #000;
    }

    .modal.violett .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-violett);
    }

    .modal.dunkelblau .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-dunkelblau);
    }

    .modal.dunkelrot .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-dunkelrot);
    }

    .modal.rot .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-rot);
    }

    .modal.mint .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-mint);
    }

    .modal.hellblau .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-hellblau);
    }

    .modal.orange .quiz_antworten_wrapper button.button[status="open"]:hover {
        border-color: var(--farbe-orange);
    }
}

.quiz_antworten_wrapper button.button.auswerten:hover,
.quiz_antworten_wrapper button.button.nextstep:hover {
    color: #000;
    background-color: transparent;
    border-color: #000;
}
.modal.violett .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.violett .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.violett .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.violett .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.violett .quiz_antworten_wrapper button.button[status="selected"] {
    color: var(--farbe-violett-schrift);
    border-color: var(--farbe-violett-schrift);
    fill: var(--farbe-violett-schrift);
    background-color: var(--farbe-violett-light);
}
.modal.dunkelblau .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.dunkelblau .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.dunkelblau .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.dunkelblau .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.dunkelblau .quiz_antworten_wrapper button.button[status="selected"] {
    color: var(--farbe-dunkelblau-schrift);
    border-color: var(--farbe-dunkelblau-schrift);
    fill: var(--farbe-dunkelblau-schrift);
    background-color: var(--farbe-dunkelblau-light);
}
.modal.dunkelrot .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.dunkelrot .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.dunkelrot .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.dunkelrot .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.dunkelrot .quiz_antworten_wrapper button.button[status="selected"] {
    color: var(--farbe-dunkelrot-schrift);
    border-color: var(--farbe-dunkelrot-schrift);
    fill: var(--farbe-dunkelrot-schrift);
    background-color: var(--farbe-dunkelrot-light);
}
.modal.rot .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.rot .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.rot .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.rot .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.rot .quiz_antworten_wrapper button.button[status="selected"] {
    color: var(--farbe-rot-schrift);
    border-color: var(--farbe-rot-schrift);
    fill: var(--farbe-rot-schrift);
    background-color: var(--farbe-rot-light);
}
.modal.mint .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.mint .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.mint .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.mint .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.mint .quiz_antworten_wrapper button.button[status="selected"] {
    color: var(--farbe-mint-schrift);
    border-color: var(--farbe-mint-schrift);
    fill: var(--farbe-mint-schrift);
    background-color: var(--farbe-mint-light);
}
.modal.hellblau .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.hellblau .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.hellblau .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.hellblau .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.hellblau .quiz_antworten_wrapper button.button[status="selected"]{
    color: var(--farbe-hellblau-schrift);
    border-color: var(--farbe-hellblau-schrift);
    fill: var(--farbe-hellblau-schrift);
    background-color: var(--farbe-hellblau-light);
}
.modal.orange .quiz_antworten_wrapper button.button.auswerten:hover,
.modal.orange .quiz_antworten_wrapper button.button.nextstep:hover,
.modal.orange .quiz_antworten_wrapper button.button.nextstep:hover svg path,
.modal.orange .quiz_antworten_wrapper button.button.auswerten:hover svg path,
.modal.orange .quiz_antworten_wrapper button.button[status="selected"]{
    color: var(--farbe-orange-schrift);
    border-color: var(--farbe-orange-schrift);
    fill: var(--farbe-orange-schrift);
    background-color: var(--farbe-orange-light);
}


.quiz_antworten_wrapper button.button.nextstep:hover svg,
.quiz_antworten_wrapper button.button.auswerten:hover svg{
    transform: translateX(40%);
}

.quiz_antworten_wrapper button.button[status="correct"] {
    background-color: mediumseagreen !important;
    border-color: seagreen;
    color: #fff !important;
}

.quiz_antworten_wrapper button.button[status="wrong"] {
    background-color: #d70000 !important;
    border-color: #a80000 !important;
    color: #fff !important;
}

.quiz_antworten_wrapper button.button[status="disabled"][correct="1"] {
    background-color: #fff !important;
    color: seagreen !important;
    border-color: mediumseagreen;
}

.barometer_bereich {
    width: 100%;
    height: auto;
    position: relative;
    left: 0%;
    margin-top: 2%;
    display: flex;
    background-color: #e6e6e6;
    padding: 1.6% 4%;
    box-sizing: border-box;
    border-radius: 500px;
    margin-bottom: 3%;
}

.barometer_bereich .barometer_wrapper_inner {
    width: 100%;
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 7%;
}

.barometer_bereich .bereich_score {
    background-color: #fff;
    width: 100%;
    display: flex;
    height: calc(var(--font-size) * 1);
    border-radius: 500px;
    overflow: hidden;
}

.barometer_bereich .bereich_score_wert {
    width: 8%;
    background: linear-gradient(to right, #ec3f3f, red);
    border-radius: 500px;
    transition: width 2s ease-in-out;
}
.barometer_bereich .bereich_score_wert.low {
    background: linear-gradient(to right, #ec3f3f, red);
}
.barometer_bereich .bereich_score_wert.medium {
    background: linear-gradient(to right, darkorange, orange);
}
.barometer_bereich .bereich_score_wert.full {
    background: linear-gradient(to right, greenyellow, mediumspringgreen);
}

.barometer_bereich .bereich_score_anteil {
    font-size: 140%;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
    display: none;
}
.violett .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-violett-schrift);
}
.mint .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-mint-schrift);
}
.hellblau .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-hellblau-schrift);
}
.dunkelblau .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-dunkelblau-schrift);
}
.dunkelrot .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-dunkelrot-schrift);
}
.rot .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-rot-schrift);
}
.orange .barometer_bereich .bereich_score_anteil {
    color: var(--farbe-orange-schrift);
}






.modal.persona .station_wrapper .station_bild {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    transition: all 1s ease-in-out;
}
.modal.persona .station_bild .station_bild_inner_wrapper {
    position: relative;
    width: 100%;
    height: 97%;
    top: 3%;
    transition: all 1s ease-in-out;
    overflow: hidden;
}

.modal.persona .station_wrapper .station_bild.small {
    right: 50%;
    width: 26%;
}
.modal.persona .station_bild.small .station_bild_inner_wrapper {
    height: 45%;
    top: 55%;
}

/* Specials für Szenen mit wenig Platz */
html:not(.mobile) .modal.persona#popup_asis_station_1 .station_bild.small .station_bild_inner_wrapper {
    height: 36%;
    top: 64%;
}
html:not(.mobile) .modal.persona#popup_asis_station_3 .station_wrapper .station_bild.small {
    right: 40%;
}
html:not(.mobile) .modal.persona#popup_asis_station_3 .station_bild.small .station_bild_inner_wrapper {
    height: 34%;
    top: 66%;
}
html:not(.mobile) .modal.persona#popup_thomas_station_2 .station_wrapper .station_bild.small {
    right: 44%;
    width: 35%;
}
html:not(.mobile) .modal.persona#popup_thomas_station_2 .station_bild.small .station_bild_inner_wrapper {
    height: 40%;
    top: 60%;
}



.modal.persona .station_bild .station_bild_inner_wrapper > img {
    position: absolute;
}
.modal.persona .station_bild .station_bild_inner_wrapper > img {
    animation: bounceInDown 1s ease-in-out;
    animation-fill-mode: both;
    max-height: 100%;
    bottom: 0;
}
.modal.persona .station_bild .station_bild_inner_wrapper .animation_delay_1 {
    animation-delay: 0.1s;
}
.modal.persona .station_bild .station_bild_inner_wrapper .animation_delay_2 {
    animation-delay: 0.2s;
}
.modal.persona .station_bild .station_bild_inner_wrapper .animation_delay_3 {
    animation-delay: 0.3s;
}
.modal.persona .station_bild .station_bild_inner_wrapper .animation_delay_4 {
    animation-delay: 0.4s;
}
.modal.persona .station_bild .station_bild_inner_wrapper .animation_delay_5 {
    animation-delay: 0.5s;
}


/* ********************************** */
/* ************* Routen ************* */
/* ********************************** */

.modal.persona.route .dialog_content,
.modal.persona.route .dialog_content .content_wrapper {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;
    transform: scale(1);
}
.modal.persona .route_wrapper {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1%;
}
.modal.persona .route_wrapper {
    padding: 0;
}

.modal.route .route_wrapper {
    overflow: scroll;
    position: relative;
}
.modal.route .route_wrapper .route_bg_wrap {
    width: 3000px;
    height: 100% !important;
    left: 0;
    top: 0;
    position: relative;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    display: block;
}
.modal.route .route_wrapper .route_bg {
    width: auto;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}
.modal.route .route_wrapper .figur_wrapper {
    z-index: 2;
    position: fixed;
    animation: slideInLeft 1s ease-in-out;
}
.modal.route .figur_wrapper .figur_pin {
    width: 80%;
    margin: 0 auto;
    animation: pin_float 3s ease-in-out infinite;
    display: none !important;
}
.modal.route .figur_wrapper .figur_pin,
.modal.route .route_wrapper .figur_wrapper,
.modal.route .route_wrapper .figur_wrapper .figur {
    pointer-events: none;
}
.modal.route .figur_wrapper .figur_pin.neutral,
.modal.route .figur_wrapper .figur_pin.happy,
.modal.route .figur_wrapper .figur_pin.hidden {
    display: none;
}
.modal.route .figur_wrapper .figur_pin.visible {
    display: block;
}
.modal.route .route_wrapper .figur_wrapper.station_betreten .figur {
    animation: unset;
}

.modal.route .route_wrapper .zielanzeiger.faraway {
    position: fixed;
    right: 0;
    top: 20%;
    width: calc(var(--container-size) * 0.33);
    z-index: 2;
    height: calc(var(--container-size) * 0.33);
    cursor: pointer;
    animation: zielanzeiger_faraway 1s ease-in-out alternate-reverse infinite;
}
@keyframes zielanzeiger_faraway {
    from { transform: translateX(0)}
    to { transform: translateX(-5%)}
}
.modal.route .route_wrapper .zielanzeiger.faraway .pfeil {
    transform: rotate(0deg);
}

.modal.route .route_wrapper .zielanzeiger {
    position: absolute;
    right: 28.9%;
    top: -7%;
    width: calc(var(--container-size) * 0.33);
    z-index: 2;
    height: calc(var(--container-size) * 0.33);
    cursor: pointer;
    transition: top 0.4s ease-in-out;
    animation: zielanzeiger 1s ease-in-out alternate-reverse infinite;
}
@keyframes zielanzeiger {
    from { transform: translateY(0)}
    to { transform: translateY(-5%)}
}

.modal.route .route_wrapper .zielanzeiger .ziel,
.modal.route .route_wrapper .zielanzeiger .pfeil {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    transition: all 0.4s ease-in-out;
    transform: rotate(0deg);
}
.modal.route .route_wrapper .zielanzeiger.target .pfeil {
    transform: rotate(90deg);
}

#popup_ulrich_route_1.modal.route .route_wrapper .zielanzeiger.target {
    right: 28.9%;
    top: -7%;
}
#popup_ulrich_route_2.modal.route .route_wrapper .zielanzeiger.target {
    right: 28.4%;
    top: -5%;
}
#popup_ulrich_route_3.modal.route .route_wrapper .zielanzeiger.target {
    right: 28.9%;
    top: -7%;
}
#popup_ulrich_route_4.modal.route .route_wrapper .zielanzeiger.target {
    right: 30.9%;
    top: -7%;
}

#popup_asis_route_1.modal.route .route_wrapper .zielanzeiger.target {
    right: 35.8%;
    top: -7%;
}
#popup_asis_route_2.modal.route .route_wrapper .zielanzeiger.target {
    right: 18.9%;
    top: -5%;
}
#popup_asis_route_3.modal.route .route_wrapper .zielanzeiger.target {
    right: 15.9%;
    top: -7%;
}
#popup_asis_route_4.modal.route .route_wrapper .zielanzeiger.target {
    right: 1.3%;
    top: -0.5%;
}

#popup_olga_route_1.modal.route .route_wrapper .zielanzeiger.target {
    right: 11.9%;
    top: -3%;
}
#popup_olga_route_2.modal.route .route_wrapper .zielanzeiger.target {
    right: 36.9%;
    top: -5%;
}
#popup_olga_route_3.modal.route .route_wrapper .zielanzeiger.target {
    right: 22.9%;
    top: -7%;
}
#popup_olga_route_4.modal.route .route_wrapper .zielanzeiger.target {
    right: 9.5%;
    top: -7%;
}

#popup_thomas_route_1.modal.route .route_wrapper .zielanzeiger.target {
    right: 36.9%;
    top: 13%;
}
#popup_thomas_route_2.modal.route .route_wrapper .zielanzeiger.target {
    right: 14.5%;
    top: -7%;
}
#popup_thomas_route_3.modal.route .route_wrapper .zielanzeiger.target {
    right: 10.5%;
    top: -7%;
}


#popup_lotta_route_1.modal.route .route_wrapper .zielanzeiger.target {
    right: 32.9%;
    top: -3%;
}
#popup_lotta_route_2.modal.route .route_wrapper .zielanzeiger.target {
    right: 14.9%;
    top: -7%;
}
#popup_lotta_route_3.modal.route .route_wrapper .zielanzeiger.target {
    right: 15.5%;
    top: -7%;
}

#popup_selin_route_1.modal.route .route_wrapper .zielanzeiger.target {
    right: 32.7%;
    top: -5%;
}
#popup_selin_route_2.modal.route .route_wrapper .zielanzeiger.target {
    right: 34.6%;
    top: -7%;
}
#popup_selin_route_3.modal.route .route_wrapper .zielanzeiger.target {
    right: 31.4%;
    top: -7%;
}
#popup_selin_route_4.modal.route .route_wrapper .zielanzeiger.target {
    right: 27.7%;
    top: 8%;
}

#popup_selin_route_4.modal.route .route_wrapper .route_bg_wrap::before {
    content: '';
    position: absolute;
    right: calc(var(--container-size) * 1.6);
    top: 70%;
    width: calc(var(--container-size) * 0.04);
    background: radial-gradient(#ffd500, #fff0);
    height: calc(var(--container-size) * 0.04);
    z-index: 1;
    border-radius: 500px;
    opacity: 0;
    animation: blinker 0.5s step-end infinite alternate-reverse;
}
@keyframes blinker {
    from { opacity: 0; }
    50% { opacity: 1; }
}

.modal.route .route_wrapper .swipe {
    display: none;
    pointer-events: none;
    position: fixed;
    bottom: 10%;
    background-color: rgba(255,255,255,.8);
    width: calc(var(--container-size) * 0.13);
    left: calc(var(--container-size) * 0.5);
    height: calc(var(--container-size) * 0.13);
    z-index: 3;
    border-radius: 10000px;
    overflow: hidden;
    box-sizing: border-box;
    border-width: calc(var(--font-size) * 0.3);
    border-style: solid;
    border-color: var(--farbe-asis);
    box-shadow: calc(var(--font-size) * 0.3) calc(var(--font-size) * 0.3) calc(var(--font-size) * 1) rgba(0,0,0,.3);
}
    .modal.route .route_wrapper .swipe > img,
    .modal.route .route_wrapper .swipe > svg {
        width: auto;
        padding: 8%;
        animation: swipe-right 1.0s infinite alternate-reverse ease-in-out;
    }

    @keyframes swipe-right {
        from { transform: translateX(-7%) rotate(-6deg); }
        to { transform: translateX(7%) rotate(6deg); }
    }

    .modal.route .route_wrapper .klick {
        display: none;
        pointer-events: none;
        position: fixed;
        bottom: 42%;
        width: calc(var(--container-size) * 0.13);
        right: calc(var(--container-size) * 0.09);
        height: calc(var(--container-size) * 0.13);
        z-index: 3;
        opacity: 0;
        overflow: hidden;
        box-sizing: border-box;
        animation: klick 2s infinite ease-in-out;
        animation-fill-mode: both;
        transition: opacity 1s ease-in-out;
    }
    .modal.route .route_wrapper .klick.visible {
        display: block;
        opacity: 1;
    }
    .modal.route .route_wrapper .klick > img {
        width: auto;
        padding: 8%;
        position: absolute;
        top: 0;
        left: 0;
    }

    @keyframes klick {
        from { bottom: 40%; transform: scale(1);}
        10% { bottom: 40%; transform: scale(1);}
        50% { bottom: 42%; transform: scale(1);}
        60% { bottom: 42%; transform: scale(0.8);}
        70% {bottom: 42%; transform: scale(1);}
        90% {  bottom: 40%; transform: scale(1);}
        100% { bottom: 40%; transform: scale(1);}
    }
    .modal.route .route_wrapper .klick > .klick_klick {
        animation: klick_klick 2s infinite ease-in-out;
    }

    @keyframes klick_klick {
        from { opacity: 0;}
        10% { opacity: 0;}
        50% {opacity: 0;}
        60% { opacity: 1;}
        70% {opacity: 0;}
        90% { opacity: 0;}
        100% { opacity: 0;}
    }
    @media(max-width: 1200px) {
        .modal.route .route_wrapper .swipe.visible {
            display: block;
        }
        .modal.route .route_wrapper .klick.visible {
            display: none;
        }
    }


    .modal.route.asis .route_wrapper .swipe,
    .modal.route.asis .route_wrapper .swipe > svg .st1 {
        border-color: var(--farbe-asis-schrift);
        fill: var(--farbe-asis-schrift);
    }
    .modal.route.olga .route_wrapper .swipe,
    .modal.route.olga .route_wrapper .swipe > svg .st1 {
        border-color: var(--farbe-olga-schrift);
        fill: var(--farbe-olga-schrift);
    }
    .modal.route.selin .route_wrapper .swipe,
    .modal.route.selin .route_wrapper .swipe > svg .st1 {
        border-color: var(--farbe-selin-schrift);
        fill: var(--farbe-selin-schrift);
    }
    .modal.route.thomas .route_wrapper .swipe,
    .modal.route.thomas .route_wrapper .swipe > svg .st1 {
        border-color: var(--farbe-thomas-schrift);
        fill: var(--farbe-thomas-schrift);
    }
    .modal.route.lotta .route_wrapper .swipe,
    .modal.route.lotta .route_wrapper .swipe > svg .st1 {
        border-color: var(--farbe-lotta-schrift);
        fill: var(--farbe-lotta-schrift);
    }
    .modal.route.ulrich .route_wrapper .swipe,
    .modal.route.ulrich .route_wrapper .swipe > svg .st1 {
        border-color: var(--farbe-ulrich-schrift);
        fill: var(--farbe-ulrich-schrift);
    }

    .modal.route .route_wrapper .trigger {
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        background: transparent;
        z-index: 10000;
    }
    .modal.route .route_wrapper .trigger,
    .modal.route .route_wrapper .route_bg {
        pointer-events: none;
    }

    .modal.route .route_wrapper .barometer {
        position: fixed;
        bottom: 2%;
        /*width: 23%;*/
        width: calc(var(--container-size) * 0.23);
        right: 2%;
        height: 15%;
        z-index: 3;
    }
    .modal.route .route_wrapper .barometer .barometer_wrapper_inner {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        cursor: pointer;
    }
    .modal.route .route_wrapper .barometer .barometer_wrapper_inner > img {
        min-width: 0; /* Fix for Google Chrome and Safari */
    }
    .modal.route .route_wrapper .barometer .batterie {
        width: 80%;
    }
    .modal.route .route_wrapper .barometer .batterie_avatar {
        width: 50%;
    }
    .modal.route .route_wrapper .barometer .batterie_avatar.neutral,
    .modal.route .route_wrapper .barometer .batterie_avatar.happy,
    .modal.route .route_wrapper .barometer .batterie_avatar.hidden{
        display: none;
    }
    .modal.route .route_wrapper .barometer .batterie_avatar.visible {
        display: block;
        animation: avatarChange 2s ease-in-out;
    }
    @keyframes avatarChange {
        from{ transform: scale(1.0); }
        25% { transform: scale(1.2); }
        50% {transform: scale(1.0);}
        75% {transform: scale(1.2);}
        to{ transform: scale(1.0); }
    }


    .modal.route .route_wrapper .barometer .social_battery_score {
        position: absolute;
        left: 40%;
        width: 55%;
        top: 30.2%;
        height: 40%;
        container-name: battery-wrapper;
        container-type: inline-size;
    }

    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_inner_wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        container-name: battery;
        container-type: inline-size;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill {
        width: 8%;
        background-color: #8da6ce;
        background: linear-gradient(to right, indianred, red);
        box-shadow: 2px 0 20px rgba(206, 42, 42, 0.71);
        transition: width 2s ease-in-out;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill.low {
        background: linear-gradient(to right, indianred, red);
        box-shadow: 2px 0 20px rgba(206, 42, 42, 0.71);
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill.medium {
        background: linear-gradient(to right, darkorange, orange);
        box-shadow: 2px 0 20px rgba(255, 140, 0, 0.6);
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill.full {
        background: linear-gradient(to right, greenyellow, mediumspringgreen);
        box-shadow: 2px 0 20px rgba(173, 255, 47, 0.60);
    }



    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info {
        position: absolute;
        left: -65%;
        height: 410%;
        width: 170%;
        background: rgba(0, 32, 60, 0.6);
        border-radius: 0;
        top: -480%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 4%;
        padding: 8% 8% 10% 8%;
        z-index: -1;
        opacity: 0;
        transition: opacity .5s ease-in-out;
        --added-score: '0';
        box-sizing: border-box;
    }
    .modal.route .route_wrapper .barometer .social_battery_score.drei .social_battery_info {
        height: 340%;
    }

    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info.visible {
        opacity: 1;
    }

    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info::after {
        content: var(--added-score)/ "";
        position: absolute;
        font-size: 270%;
        line-height: 3;
        font-weight: bold;
        color: #fff;
        box-shadow: 0px 0px 10px inset rgba(86, 255, 105, 0.61);
        top: -55%;
        left: 10%;
        display: flex;
        z-index: 10;
        opacity: 0;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        border-radius: 1000px;
        padding: 10%;
        width: calc(var(--font-size) * 5.5);
        height: calc(var(--font-size) * 5.5);
        background-color: mediumseagreen;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info.visible.animate_score.negativ::after {
        background-color: red;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info.visible.animate_score::after {
        animation: floatUp 2.5s ease-in-out,
        fadeOutUpBig 1s 2s ease-in-out both;
    }
    @keyframes floatUp {
        from {top: -55%; opacity: 0;}
        40% {opacity: 1;}
        100% {top: -120%;}
    }

    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich {
        position: relative;
        width: 100%;
        height: 30%;
        padding: 1%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        container-type: inline-size;
        gap: 4%;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich > span {
        font-size: var(--font-size);
        font-weight: bold;
        color: #fff;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich .bereich_score {
        height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 500px;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        container-name: bereichscore;
        container-type: inline-size;
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert {
        width: 8%;
        border-radius: 500px;
        background: linear-gradient(to right, #ec3f3f, red);
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert.low {
        background: linear-gradient(to right, #ec3f3f, red);
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert.medium {
        background: linear-gradient(to right, darkorange, orange);
    }
    .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert.full {
        background: linear-gradient(to right, greenyellow, mediumspringgreen);
    }


    /* Ende allgemeine Deklarationen */

    /* Asis Route 1*/
    #popup_asis_route_1.modal.route .route_wrapper .figur_wrapper .figur.asis_roller {
        width: 100%;
        transform-origin: center bottom;
        animation: asis_roller 5s infinite;
        opacity: 1;
        transition: opacity 1.5s ease-in-out;
    }
    @keyframes asis_roller {
        0% { transform: rotate(0deg) scaleY(1) }
        10% { transform: rotate(1deg) scaleY(1) }
        20% { transform: rotate(-1deg) scaleY(0.97) }
        30% { transform: rotate(0.6deg) scaleY(1) }
        40% { transform: rotate(-0.2deg) scaleY(1) }
        50% { transform: rotate(-0.2deg) scaleY(1) }
        60% { transform: rotate(0.4deg) scaleY(1) }
        70% { transform: rotate(0deg) scaleY(1) }
        80% { transform: rotate(-1deg) scaleY(0.99) }
        90% { transform: rotate(1deg) scaleY(1) }
        100% { transform: rotate(0deg) scaleY(1) }
    }
    #popup_asis_route_1.modal.route .route_wrapper .figur_wrapper {
        width: 17%;
        width: calc(var(--figur-size) * 0.17);
        bottom: 11%;
        left: 28%;
        left: calc(var(--container-size) * 0.28);
    }
    html:not(.mobile) #popup_asis_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten {
        animation: asis_st1_end 1.5s ease-in-out;
        animation-fill-mode: both;
    }
    @keyframes asis_st1_end {
        from {left: calc(var(--container-size) * 0.28);}
        to {left: calc(var(--container-size) * 0.45);}
    }
    #popup_asis_route_1.modal.route .route_wrapper .trigger {
        right: 60%;
    }

    /* Asis Route 2 */
    #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper .figur.asis_bus {
        width: 100%;
        animation: asis_bus 0.09s alternate-reverse infinite;
    }
    @keyframes asis_bus {
        0% { transform: translateY(0) }
        100% { transform: translateY(0.5%) }
    }
    #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper .figur_pin {
        width: 20%;
        margin-left: 40%;
    }

    #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper {
        width: 53%;
        width: calc(var(--figur-size) * 0.53);
        bottom: 9%;
        left: 5%;
        left: calc(var(--container-size) * 0.05);
    }
    #popup_asis_route_2.modal.route .route_wrapper .trigger {
        right: 32%;
    }
    #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.asis_bus {
        animation: asis_st2_end 3s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    @keyframes asis_st2_end {
        from {transform: translateX(0);}
        10% {transform: translateX(0);}
        to {transform: translateX(350%);}
    }
    #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: asis_st2_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes asis_st2_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(600%);}
    }
    /* Asis Route 3 */
    #popup_asis_route_3.modal.route .route_wrapper .figur_wrapper .figur.asis_roller {
        width: 100%;
        animation: asis_roller 5s infinite;
    }

    #popup_asis_route_3.modal.route .route_wrapper .figur_wrapper {
        width: 15%;
        width: calc(var(--figur-size) * 0.15);
        bottom: 8%;
        left: 30%;
        left: calc(var(--container-size) * 0.3);
    }
    #popup_asis_route_3.modal.route .route_wrapper .trigger {
        right: 33%;
    }

    /* Asis Route 4 */
    #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper .figur.asis_bus {
        width: 100%;
        animation: asis_bus 0.09s alternate-reverse infinite;
    }
    #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper .figur_pin {
        width: 20%;
        margin-left: 40%;
    }
    #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper {
        width: 53%;
        width: calc(var(--figur-size) * 0.53);
        bottom: 9%;
        left: 16%;
        left: calc(var(--container-size) * 0.16);
    }
    #popup_asis_route_4.modal.route .route_wrapper .trigger {
        right: 30%;
    }
    #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.asis_bus {
        animation: asis_st4_end 4.5s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    @keyframes asis_st4_end {
        from {transform: translateX(0);}
        to {transform: translateX(280%);}
    }
    #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: asis_st4_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes asis_st4_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(800%);}
    }

    /* Olga Route 1*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.olga_auto {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.olga_pin {
        width: 35%;
        margin: 0 35%;
    }
    #popup_olga_route_1.modal.route .route_wrapper .figur_wrapper .figur.olga_auto {
        width: 100%;
        animation: olga_auto 0.09s alternate-reverse infinite;
    }
    @keyframes olga_auto {
        0% { transform: translateY(0) }
        100% { transform: translateY(0.5%) }
    }
    #popup_olga_route_1.modal.route .route_wrapper .figur_wrapper {
        width: 40%;
        width: calc(var(--figur-size) * 0.4);
        bottom: 11%;
        left: 20%;
        left: calc(var(--container-size) * 0.2);
    }
    #popup_olga_route_1.modal.route .route_wrapper .trigger {
        right: 28%;
    }
    #popup_olga_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: olga_st1_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes olga_st1_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(390%);}
    }
    /* Olga Route 2*/
    .modal.route .figur_wrapper .figur_pin.olga_pin {
        width: 30%;
    }
    #popup_olga_route_2.modal.route .route_wrapper .figur_wrapper .figur.olga_auto {
        width: 100%;
        animation: olga_auto 0.09s alternate-reverse infinite;
    }
    #popup_olga_route_2.modal.route .route_wrapper .figur_wrapper {
        width: 40%;
        width: calc(var(--figur-size) * 0.4);
        bottom: 11%;
        left: 18%;
        left: calc(var(--container-size) * 0.18);
    }
    #popup_olga_route_2.modal.route .route_wrapper .trigger {
        right: 52%;
    }
    /* Olga Route 3*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.olga_auto {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.olga_pin {
        width: 30%;
    }
    #popup_olga_route_3.modal.route .route_wrapper .figur_wrapper .figur.olga_auto {
        width: 100%;
        animation: olga_auto 0.09s alternate-reverse infinite;
    }
    #popup_olga_route_3.modal.route .route_wrapper .figur_wrapper {
        width: 40%;
        width: calc(var(--figur-size) * 0.4);
        bottom: 11%;
        left: 3%;
        left: calc(var(--container-size) * 0.03);
    }
    #popup_olga_route_3.modal.route .route_wrapper .trigger {
        right: 31%;
    }
    #popup_olga_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: olga_st3_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes olga_st3_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.6) translateX(-10%) translateY(40%);}
    }
    /* Olga Route 4*/
    #popup_olga_route_4.modal.route .route_wrapper .figur_wrapper {
        animation: none;
    }

    #popup_olga_route_4.modal.route .route_wrapper .figur_wrapper .figur.olga_auto {
        animation: olga_auto 0.09s alternate-reverse infinite ease-in-out 2s;
    }
    @keyframes olga_auto {
        0% { transform: translateY(0); }
        100% { transform: translateY(0.5%); }
    }
    .modal.route .figur_wrapper .figur_pin.olga_pin {
        width: 30%;
    }
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.olga_auto {
        animation: unset;
    }
    #popup_olga_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: olga_st4_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes olga_st4_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.6) translateX(300%) translateY(-50%);}
    }
    #popup_olga_route_4.modal.route .route_wrapper .figur_wrapper {
        width: 40%;
        width: calc(var(--figur-size) * 0.4);
        bottom: 11%;
        left: 22%;
        left: calc(var(--container-size) * 0.22);
    }
    #popup_olga_route_4.modal.route .route_wrapper .trigger {
        right: 24.5%;
    }

    /* Thomas Route 1*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.thomas_auto {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.thomas_pin {
        width: 25%;
        margin: 0 37%;
    }
    #popup_thomas_route_1.modal.route .route_wrapper .figur_wrapper .figur.thomas_auto {
        width: 100%;
        animation: thomas_auto 0.09s alternate-reverse infinite;
    }
    @keyframes thomas_auto {
        0% { transform: translateY(0) }
        100% { transform: translateY(0.5%) }
    }
    #popup_thomas_route_1.modal.route .route_wrapper .figur_wrapper {
        width: 54%;
        width: calc(var(--figur-size) * 0.58);
        bottom: 4%;
        left: 11%;
        left: calc(var(--container-size) * 0.11);
    }
    #popup_thomas_route_1.modal.route .route_wrapper .trigger {
        right: 51%;
    }

    /* Thomas Route 2*/
    #popup_thomas_route_2 .route_bg_wrap {
        left: -12%;
    }
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.thomas_auto {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.thomas_pin {
        width: 25%;
        margin: 0 37%;
    }
    #popup_thomas_route_2.modal.route .route_wrapper .figur_wrapper .figur.thomas_auto {
        width: 100%;
        animation: thomas_auto 0.09s alternate-reverse infinite;
    }
    #popup_thomas_route_2.modal.route .route_wrapper .figur_wrapper {
        width: 54%;
        width: calc(var(--figur-size) * 0.62);
        bottom: 4%;
        left: 4%;
        left: calc(var(--container-size) * 0.04);
        animation: none;
    }
    #popup_thomas_route_2.modal.route .route_wrapper .trigger {
        right: 30%;
    }
    #popup_thomas_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: thomas_st2_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes thomas_st2_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(550%);}
    }
    /* Thomas Route 3*/
    .modal.route .figur_wrapper .figur_pin.thomas_pin {
        width: 25%;
        margin: 0 37%;
    }
    #popup_thomas_route_3.modal.route .route_wrapper .figur_wrapper .figur.thomas_auto {
        width: 100%;
        animation: thomas_auto 0.09s alternate-reverse infinite;
    }
    #popup_thomas_route_3.modal.route .route_wrapper .figur_wrapper {
        width: 54%;
        width: calc(var(--figur-size) * 0.61);
        bottom: 4%;
        left: 11%;
        left: calc(var(--container-size) * 0.11);
    }
    #popup_thomas_route_3.modal.route .route_wrapper .trigger {
        right: 25%;
    }
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.thomas_auto {
        animation: unset;
    }
    #popup_thomas_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: thomas_st3_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes thomas_st3_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(260%);}
    }

    /* Lotta Route 1*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.lotta_bus {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.lotta_pin {
        width: 20%;
        margin: 0 37%;
    }
    #popup_lotta_route_1.modal.route .route_wrapper .figur_wrapper .figur.lotta_bus {
        width: 100%;
        animation: lotta_bus 0.09s alternate-reverse infinite;
    }
    @keyframes lotta_bus {
        0% { transform: translateY(0) }
        100% { transform: translateY(0.5%) }
    }
    #popup_lotta_route_1.modal.route .route_wrapper .figur_wrapper {
        width: calc(var(--figur-size) * 0.7);
        bottom: 8%;
        left: 9%;
        left: calc(var(--container-size) * 0.09);
    }
    #popup_lotta_route_1.modal.route .route_wrapper .trigger {
        right: 50%;
    }

    /* Lotta Route 2*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.lotta_bus {
        animation: unset;
    }
    #popup_lotta_route_2.modal.route .route_wrapper .figur_wrapper .figur.lotta_bus {
        width: 100%;
        animation: lotta_bus 0.09s alternate-reverse infinite;
    }
    #popup_lotta_route_2.modal.route .route_wrapper .figur_wrapper {
        width: 70%;
        width: calc(var(--figur-size) * 0.7);
        bottom: 8%;
        left: calc(var(--container-size) * 0.09);
    }
    #popup_lotta_route_2.modal.route .route_wrapper .trigger {
        right: 21%;
    }
    #popup_lotta_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.lotta_bus {
        animation: lotta_st2_end 4.5s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    @keyframes lotta_st2_end {
        from {transform: translateX(0);}
        to {transform: translateX(280%);}
    }
    #popup_lotta_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: lotta_st2_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes lotta_st2_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(-220%);}
    }
    /* Lotta Route 3*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.lotta_skateboard {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.lotta_pin_3 {
        width: 100%;
    }
    #popup_lotta_route_3.modal.route .route_wrapper .figur_wrapper .figur.lotta_skateboard {
        width: 100%;
        animation: lotta_skateboard 5s alternate-reverse infinite;
    }
    @keyframes lotta_skateboard {
        0% { transform: rotate(0deg) scaleY(1) }
        10% { transform: rotate(1deg) scaleY(1) }
        20% { transform: rotate(-1deg) scaleY(0.97) }
        30% { transform: rotate(0.6deg) scaleY(1) }
        40% { transform: rotate(-0.2deg) scaleY(1) }
        50% { transform: rotate(-0.2deg) scaleY(1) }
        60% { transform: rotate(0.4deg) scaleY(1) }
        70% { transform: rotate(0deg) scaleY(1) }
        80% { transform: rotate(-1deg) scaleY(0.99) }
        90% { transform: rotate(1deg) scaleY(1) }
        100% { transform: rotate(0deg) scaleY(1) }
    }
    #popup_lotta_route_3.modal.route .route_wrapper .figur_wrapper {
        width: 13%;
        width: calc(var(--figur-size) * 0.13);
        bottom: 8%;
        left: 25%;
        left: calc(var(--container-size) * 0.25);
    }
    #popup_lotta_route_3.modal.route .route_wrapper .trigger {
        right: 26.5%;
    }

    /* Ulrich Route 1*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: unset;
    }
    .modal.route .figur_wrapper .figur_pin.ulrich_pin {
        width: 20%;
        margin: 0 37%;
    }
    .bahn_leitung {
        width: 100%;
        position: absolute;
        height: 20%;
        left: -0.5%;
        top: 53.5%;
    }
    .bahn_schiene {
        width: 100%;
        position: absolute;
        height: 20%;
        left: -1%;
        top: 78%;
    }
    #popup_ulrich_route_1.modal.route .route_wrapper .figur_wrapper .figur.ulrich_bahn {
        width: 100%;
        animation: ulrich_bahn 0.5s alternate-reverse infinite;
    }
    @keyframes ulrich_bahn {
        0% { transform: translateY(0) }
        100% { transform: translateY(0.5%) }
    }
    #popup_ulrich_route_1.modal.route .route_wrapper .figur_wrapper {
        width: 70%;
        width: calc(var(--figur-size) * 0.7);
        bottom: 8%;
        left: 6%;
        left: calc(var(--container-size) * 0.06);
    }
    #popup_ulrich_route_1.modal.route .route_wrapper .trigger {
        right: 37.5%;
    }
    #popup_ulrich_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: ulrich_st1_end 4.5s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    @keyframes ulrich_st1_end {
        from {transform: translateX(0);}
        to {transform: translateX(280%);}
    }
    #popup_ulrich_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: ulrich_st1_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes ulrich_st1_end_pin {
        from{ transform: scale(1) translateX(0);}
        to { transform: scale(0.6) translateX(-80%);}
    }
    /* Ulrich Route 2*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: unset;
    }
    #popup_ulrich_route_1.modal.route .route_wrapper .figur_wrapper .figur.ulrich_bahn {
        width: 100%;
        animation: ulrich_bahn 0.5s alternate-reverse infinite;
    }
    #popup_ulrich_route_2.modal.route .route_wrapper .figur_wrapper {
        width: 70%;
        width: calc(var(--figur-size) * 0.7);
        bottom: 8%;
        left: 5%;
        left: calc(var(--container-size) * 0.05);
    }
    #popup_ulrich_route_2.modal.route .route_wrapper .trigger {
        right: 38%;
    }
    #popup_ulrich_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: ulrich_st1_end 4.5s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    #popup_ulrich_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: ulrich_st2_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes ulrich_st2_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0%);}
        to { transform: scale(0.6) translateX(-50%) translateY(60%);}
    }
    /* Ulrich Route 3*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: unset;
    }
    #popup_ulrich_route_3.modal.route .route_wrapper .figur_wrapper .figur.ulrich_bahn {
        width: 100%;
        animation: ulrich_bahn 0.5s alternate-reverse infinite;
    }
    #popup_ulrich_route_3.modal.route .route_wrapper .figur_wrapper {
        width: 70%;
        width: calc(var(--figur-size) * 0.7);
        bottom: 8%;
        left: 5%;
        left: calc(var(--container-size) * 0.05);
    }
    #popup_ulrich_route_3.modal.route .route_wrapper .trigger {
        right: 36.5%;
    }
    #popup_ulrich_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: ulrich_st1_end 4.5s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    #popup_ulrich_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: ulrich_st3_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes ulrich_st3_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.6) translateX(-140%) translateY(30%);}
    }
    /* Ulrich Route 4*/
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: unset;
    }
    #popup_ulrich_route_4.modal.route .route_wrapper .figur_wrapper .figur.ulrich_bahn {
        width: 100%;
        animation: ulrich_bahn 0.5s alternate-reverse infinite;
    }
    #popup_ulrich_route_4.modal.route .route_wrapper .figur_wrapper {
        width: 70%;
        width: calc(var(--figur-size) * 0.7);
        bottom: 8%;
        left: 5%;
        left: calc(var(--container-size) * 0.05);
    }
    #popup_ulrich_route_4.modal.route .route_wrapper .trigger {
        right: 39.5%;
    }
    #popup_ulrich_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.ulrich_bahn {
        animation: ulrich_st1_end 4.5s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    #popup_ulrich_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: ulrich_st4_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes ulrich_st4_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.6) translateX(-110%) translateY(20%);}
    }

    /* Selin Route 1*/
    .modal.route .figur_wrapper .figur_pin.selin_pin {
        margin: 0 41% ;
    }
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.selin_fahrrad {
        animation: unset;
    }
    #popup_selin_route_1.modal.route .route_wrapper .figur_wrapper .figur.selin_fahrrad {
        width: 160%;
        animation: selin_fahrrad 5s alternate-reverse infinite;
    }
    @keyframes selin_fahrrad {
        0% { transform: rotate(0deg) scaleY(1) }
        10% { transform: rotate(1deg) scaleY(1) }
        20% { transform: rotate(-1deg) scaleY(0.97) }
        30% { transform: rotate(0.6deg) scaleY(1) }
        40% { transform: rotate(-0.2deg) scaleY(1) }
        50% { transform: rotate(-0.2deg) scaleY(1) }
        60% { transform: rotate(0.4deg) scaleY(1) }
        70% { transform: rotate(0deg) scaleY(1) }
        80% { transform: rotate(-1deg) scaleY(0.99) }
        90% { transform: rotate(1deg) scaleY(1) }
        100% { transform: rotate(0deg) scaleY(1) }
    }
    #popup_selin_route_1.modal.route .route_wrapper .figur_wrapper {
        width: 13%;
        width: calc(var(--figur-size) * 0.13);
        bottom: 8%;
        left: 25%;
        left: calc(var(--container-size) * 0.25);
    }
    #popup_selin_route_1.modal.route .route_wrapper .trigger {
        right: 42.5%;
    }
    #popup_selin_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: selin_st1_end_pin 1.2s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 0.4s;
    }
    @keyframes selin_st1_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.8) translateX(170%) translateY(10%);}
    }

    /* Selin Route 2 */
    #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper .figur.selin_bus {
        width: 100%;
        animation: selin_bus 0.09s alternate-reverse infinite;
    }
    @keyframes selin_bus {
        0% { transform: translateY(0) }
        100% { transform: translateY(0.5%) }
    }
    #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper .figur_pin {
        width: 20%;
        margin-left: 40%;
    }
    #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper {
        width: 53%;
        width: calc(var(--figur-size) * 0.53);
        bottom: 9%;
        left: 5%;
        left: calc(var(--container-size) * 0.05);
    }
    #popup_selin_route_2.modal.route .route_wrapper .trigger {
        right: 40%;
    }
    #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.selin_bus {
        animation: selin_st2_end 3s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    @keyframes selin_st2_end {
        from {transform: translateX(0);}
        10% {transform: translateX(0);}
        to {transform: translateX(280%);}
    }
    #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: selin_st2_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes selin_st2_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.6) translateX(-220%) translateY(50%);}
    }
    /* Selin Route 3 */
    #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper .figur.selin_bus {
        width: 100%;
        animation: selin_bus 0.09s alternate-reverse infinite;
    }
    #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper .figur_pin {
        width: 20%;
        margin-left: 40%;
    }
    #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper {
        width: 53%;
        width: calc(var(--figur-size) * 0.53);
        bottom: 9%;
        left: 13%;
        left: calc(var(--container-size) * 0.13);
    }
    #popup_selin_route_3.modal.route .route_wrapper .trigger {
        right: 36%;
    }
    #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur.selin_bus {
        animation: selin_st2_end 3s ease-in-out !important;
        animation-fill-mode: both !important;
    }
    #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
        animation: selin_st3_end_pin 1.5s ease-in-out !important;
        animation-fill-mode: both !important;
        animation-delay: 1s;
    }
    @keyframes selin_st3_end_pin {
        from{ transform: scale(1) translateX(0) translateY(0);}
        to { transform: scale(0.6) translateX(-350%) translateY(40%);}
    }
    /* Selin Route 4*/
    .modal.route .figur_wrapper .figur_pin.selin_pin {
        margin: 0 41% ;
    }
    .modal.route .route_wrapper .figur_wrapper.station_betreten .figur.selin_fahrrad {
        animation: unset;
    }
    #popup_selin_route_4.modal.route .route_wrapper .figur_wrapper .figur.selin_fahrrad {
        width: 160%;
        animation: selin_fahrrad 5s alternate-reverse infinite;
    }
    #popup_selin_route_4.modal.route .route_wrapper .figur_wrapper {
        width: 13%;
        width: calc(var(--figur-size) * 0.13);
        bottom: 8%;
        left: 25%;
        left: calc(var(--container-size) * 0.25);
    }
    #popup_selin_route_4.modal.route .route_wrapper .trigger {
        right: 42.5%;
    }

    .modal.route .content_wrapper {
        transition: transform 1.8s 0.4s ease-in;
    }
    .modal.route .content_wrapper.zoom {
        transform: scale(4) !important;
        transform-origin: 40% 80%;
        transform-origin: var(--zoom-position-left) 60%;
    }
.modal.route .content_wrapper.zoom.gefaehrt {
    transform-origin: calc(var(--zoom-position-left) - 10%) 85%;
}
    .modal.route .content_wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0;
        transition: opacity 1s 1s ease-in-out;
    }
    .modal.route .content_wrapper.zoom::before {
        opacity: 0.8;
        z-index: 9999;
    }

    #popup_lotta_route_1.modal.route .content_wrapper.zoom {
        transform: scale(5.5);
        transform-origin: 18% 78%;
    }
    #popup_lotta_route_1.modal.route .content_wrapper.zoom .figur_wrapper.station_betreten {
        transition: transform 1.5s ease-in-out;
        transform: translateX(220px);
    }
    #popup_lotta_route_1.modal.route .content_wrapper.zoom .route_bg.parallax {
        transition: transform 2s ease-in;
        transform: translateX(calc( var(--route-translate) + 300px) );
    }
    #popup_lotta_route_1.modal.route .content_wrapper.zoom .route_bg {
        transition: transform 2s ease-in;
        transform: translateX(-800px);
    }


    /* Infos zu den einzelnen Antworten */
    .modal.persona.antwortinfos {
        justify-content: center;
        align-items: center;
    }
    .modal.persona.antwortinfos.open {
        display: flex;
    }
    .modal.persona.antwortinfos .dialog_content {
        background-color: #fff;
        width: 70%;
        height: auto;
        border-radius: 0;
        padding: 0;
        max-height: 95%;
    }
    .modal.persona.antwortinfos .dialog_content .content_wrapper {
        width: 100%;
        height: 100%;
    }
    .modal.persona.antwortinfos .info_wrapper {
        width: 100%;
        height: 100%;
        padding: 1%;
    }
    .modal.persona.antwortinfos .info_wrapper h1 {
        font-size: 160%;
    }

    /* Feedbacks auf Quizfragen */

    .modal.persona.feedback {
        justify-content: center;
        align-items: center;
    }

    .modal.persona.feedback.open {
        display: flex;
    }

    .modal.persona.feedback .dialog_content {
        background-color: #fff;
        width: 80%;
        height: auto;
        margin: auto !important;
        border-radius: 0;
        padding: 0;
        max-height: 97%;
        position: relative;
        box-sizing: border-box;
        overflow: scroll;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .modal.persona.feedback .dialog_content .content_wrapper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0.5% 5% 2.5% 5%;
    }

    .modal.persona.feedback .feedback_wrapper {
        width: 100%;
        height: 100%;
        padding: 1%;
        box-sizing: border-box;
    }
    .modal.persona.feedback .feedback_wrapper h1 {
        font-size: 160%;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content {
        width: 100%;
        padding: 2% 0 1.2% 0;
        margin-bottom: 0%;
        position: relative;
        display: none;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        box-sizing: border-box;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content.empty,
    .modal.persona.feedback .feedback_wrapper .feedback_content.other,
    .modal.persona.feedback .feedback_wrapper .feedback_content.visible {
        display: flex;
    }
    .modal.persona.feedback .feedback_wrapper .zwischenueberschrift {
        font-size: 140%;
        font-weight: bold;
        margin-bottom: 3%;
        margin-top: 2%;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content.other {
        padding-bottom: 4%;
        margin-top: 0;
        padding-top: 0;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content.other > p {
        display: none;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content.other .rank {
        background-color: #d1d1d1 !important;
    }

    .modal.persona.feedback .dialog_content .content_wrapper .feedback_content .headline_wrapper {
        display: flex;
        justify-content: flex-end;
        flex-direction: row-reverse;
        align-items: center;
        width: 90%;
        gap: 2%;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content .feedback_title {
        font-size: 130%;
        font-weight: 600;
        margin-bottom: 0;
        line-height: 1.1;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content .rank {
        background-color: mediumseagreen;
        color: #fff;
        font-size: 120%;
        width: calc(var(--font-size) * 1.8);
        height: calc(var(--font-size) * 1.8);
        min-width: calc(var(--font-size) * 1.8);
        min-height: calc(var(--font-size) * 1.8);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 500px;
        padding: 0.5%;
        animation: fadeInUp .5s ease-in-out,
        tada 1s 1s ease-in-out ;
        animation-fill-mode: both;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content .rank.negativ {
        background-color: #d70000;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content[name="antwort_1"] .rank {
        animation: fadeInUp .5s 0s ease-in-out both,
        tada 1s 0.5s ease-in-out both;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content[name="antwort_2"] .rank {
        animation: fadeInUp .5s .2s ease-in-out both,
        tada 1s 0.7s ease-in-out both;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content[name="antwort_3"] .rank {
        animation: fadeInUp .5s .6s ease-in-out both,
        tada 1s 1.1s ease-in-out both;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content[name="antwort_4"] .rank {
        animation: fadeInUp .5s .8s ease-in-out both,
        tada 1s 1.3s ease-in-out both;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content > p {
        margin-top: 0.6%;
        margin-bottom: 0%;
        font-size: 105%;
        width: 90%;
        margin-left: 6.8%;
    }


    .modal.persona.feedback .feedback_wrapper .feedback_content button.warum_hilfts,
    .modal.persona.feedback .feedback_wrapper button.weiter_gehts {
        width: auto;
        padding: 1% 4%;
        border-radius: 0;
        background-color: #000;
        color: #fff;
        position: relative;
        transition: all .2s ease-in-out;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content button.warum_hilfts {
        width: auto;
        padding: 0;
        width: calc(var(--font-size) * 2.1);
        height: calc(var(--font-size) * 2.1);
        border-radius: 500px;
        background-color: #000;
        font-size: 130%;
        color: #fff;
        position: absolute;
        right: 0;
        transition: all .2s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal.persona.feedback .feedback_wrapper .feedback_content button.warum_hilfts > svg {
        width: 28%;
    }

    .modal.persona.feedback .feedback_wrapper button.weiter_gehts {
        margin-left: auto;
        padding: 1% 6%;
        font-weight: 600;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 35%;
        align-items: center;
        margin-top: 3%;
    }
    .modal.persona.feedback .feedback_wrapper button.weiter_gehts svg {
        width: 6%;
        fill: #fff;
    }

    .modal.persona.violett.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.violett.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.violett.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.violett.feedback .feedback_wrapper button.weiter_gehts:hover svg path {
        background-color: var(--farbe-violett-light);
        color: var(--farbe-violett-schrift);
        fill: var(--farbe-violett-schrift) !important;
    }
    .modal.persona.dunkelrot.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.dunkelrot.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.dunkelrot.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.dunkelrot.feedback .feedback_wrapper button.weiter_gehts:hover svg path{
        background-color: var(--farbe-dunkelrot-light);
        color: var(--farbe-dunkelrot-schrift);
        fill: var(--farbe-dunkelrot-schrift) !important;
    }
    .modal.persona.dunkelblau.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.dunkelblau.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.dunkelblau.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.dunkelblau.feedback .feedback_wrapper button.weiter_gehts:hover svg path{
        background-color: var(--farbe-dunkelblau-light);
        color: var(--farbe-dunkelblau-schrift);
        fill: var(--farbe-dunkelblau-schrift) !important;
    }
    .modal.persona.rot.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.rot.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.rot.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.rot.feedback .feedback_wrapper button.weiter_gehts:hover svg path{
        background-color: var(--farbe-rot-light);
        color: var(--farbe-rot-schrift);
        fill: var(--farbe-rot-schrift) !important;
    }
    .modal.persona.mint.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.mint.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.mint.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.mint.feedback .feedback_wrapper button.weiter_gehts:hover svg path{
        background-color: var(--farbe-mint-light);
        color: var(--farbe-mint-schrift);
        fill: var(--farbe-mint-schrift) !important;
    }
    .modal.persona.hellblau.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.hellblau.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.hellblau.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.hellblau.feedback .feedback_wrapper button.weiter_gehts:hover svg path{
        background-color: var(--farbe-hellblau-light);
        color: var(--farbe-hellblau-schrift);
        fill: var(--farbe-hellblau-schrift) !important;
    }
    .modal.persona.orange.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover,
    .modal.persona.orange.feedback .feedback_wrapper .feedback_content button.warum_hilfts:hover svg path,
    .modal.persona.orange.feedback .feedback_wrapper button.weiter_gehts:hover,
    .modal.persona.orange.feedback .feedback_wrapper button.weiter_gehts:hover svg path{
        background-color: var(--farbe-orange-light);
        color: var(--farbe-orange-schrift);
        fill: var(--farbe-orange-schrift) !important;
    }

    .modal.persona.violett.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.violett.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.violett.feedback .feedback_wrapper .feedback_content button.warum_hilfts {
        background-color: var(--farbe-violett-schrift);
    }
    .modal.persona.dunkelrot.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.dunkelrot.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.dunkelrot.feedback .feedback_wrapper .feedback_content button.warum_hilfts{
        background-color: var(--farbe-dunkelrot-schrift);
    }
    .modal.persona.dunkelblau.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.dunkelblau.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.dunkelblau.feedback .feedback_wrapper .feedback_content button.warum_hilfts{
        background-color: var(--farbe-dunkelblau-schrift);
    }
    .modal.persona.mint.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.mint.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.mint.feedback .feedback_wrapper .feedback_content button.warum_hilfts{
        background-color: var(--farbe-mint-schrift);
    }
    .modal.persona.rot.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.rot.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.rot.feedback .feedback_wrapper .feedback_content button.warum_hilfts{
        background-color: var(--farbe-rot-schrift);
    }
    .modal.persona.hellblau.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.hellblau.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.hellblau.feedback .feedback_wrapper .feedback_content button.warum_hilfts{
        background-color: var(--farbe-hellblau-schrift);
    }
    .modal.persona.orange.feedback .feedback_wrapper button.weiter_gehts,
    .modal.persona.orange.feedback .feedback_wrapper button.weiter_gehts svg path,
    .modal.persona.orange.feedback .feedback_wrapper .feedback_content button.warum_hilfts{
        background-color: var(--farbe-orange-schrift);
    }

    /* Final Popup für jede Person */
.modal.persona.station.final.selin .dialog_content,
.modal.persona.station.final.selin .dialog_content .content_wrapper {
    background-color: var(--farbe-rot-light-backdrop);
}
.modal.persona.station.final.asis .dialog_content,
.modal.persona.station.final.asis .dialog_content .content_wrapper {
    background-color: var(--farbe-violett-light-backdrop);
}
.modal.persona.station.final.lotta .dialog_content,
.modal.persona.station.final.lotta .dialog_content .content_wrapper {
    background-color: var(--farbe-hellblau-light-backdrop);
}
.modal.persona.station.final.olga .dialog_content,
.modal.persona.station.final.olga .dialog_content .content_wrapper {
    background-color: var(--farbe-dunkelblau-light-backdrop);
}
.modal.persona.station.final.thomas .dialog_content,
.modal.persona.station.final.thomas .dialog_content .content_wrapper {
    background-color: var(--farbe-mint-light-backdrop);
}
.modal.persona.station.final.ulrich .dialog_content,
.modal.persona.station.final.ulrich .dialog_content .content_wrapper {
    background-color: var(--farbe-dunkelrot-light-backdrop);
}

    .modal.final .station_wrapper .avatar_komplett {
        position: relative;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: flex-end;
        margin-left: 1%;
    }
    .modal.final .station_wrapper .avatar_bild_komplett {
        width: 46%;
        z-index: 1;
        animation: bounceInDown .8s ease-in-out;
    }
    .modal.final .avatar_bild_komplett.neutral,
    .modal.final .avatar_bild_komplett.happy,
    .modal.final .avatar_bild_komplett.hidden{
        display: none;
    }
    .modal.final .avatar_bild_komplett.visible {
        display: block;
    }
    .modal.final .station_wrapper .avatar_schatten {
        position: absolute;
        width: 100%;
        background-color: #ededed;
        border-radius: 500%;
        height: 11%;
        transform: translateY(30%);
    }
    .modal.final.asis .station_wrapper .avatar_schatten {
        background-color: var(--farbe-asis-light);
    }
    .modal.final.thomas .station_wrapper .avatar_schatten {
        background-color: var(--farbe-thomas-light);
    }
    .modal.final.olga .station_wrapper .avatar_schatten {
        background-color: var(--farbe-olga-light);
    }
    .modal.final.lotta .station_wrapper .avatar_schatten {
        background-color: var(--farbe-lotta-light);
    }
    .modal.final.selin .station_wrapper .avatar_schatten {
        background-color: var(--farbe-selin-light);
    }
    .modal.final.ulrich .station_wrapper .avatar_schatten {
        background-color: var(--farbe-ulrich-light);
    }

    .modal.final .station_wrapper h1 {
        font-size: 300%;
        width: 100%;
        margin-bottom: 1%;
        margin-top: 0;
        text-align: center;
    }
    .modal.final.asis .station_wrapper h1 {
        color: var(--farbe-asis-schrift);
    }
    .modal.final.thomas .station_wrapper h1 {
        color: var(--farbe-thomas-schrift);
    }
    .modal.final.lotta .station_wrapper h1 {
        color: var(--farbe-lotta-schrift);
    }
    .modal.final.ulrich .station_wrapper h1 {
        color: var(--farbe-ulrich-schrift);
    }
    .modal.final.selin .station_wrapper h1 {
        color: var(--farbe-selin-schrift);
    }
    .modal.final.olga .station_wrapper h1 {
        color: var(--farbe-olga-schrift);
    }

    .modal.final .station_wrapper .rechte_seite {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        animation: fadeIn 1s ease-in-out;
        flex-grow: 0;
    }
    .modal.final.asis .station_wrapper .rechte_seite {
        color: var(--farbe-asis-schrift);
    }
    .modal.final.thomas .station_wrapper .rechte_seite {
        color: var(--farbe-thomas-schrift);
    }
    .modal.final.lotta .station_wrapper .rechte_seite {
        color: var(--farbe-lotta-schrift);
    }
    .modal.final.olga .station_wrapper .rechte_seite {
        color: var(--farbe-olga-schrift);
    }
    .modal.final.selin .station_wrapper .rechte_seite {
        color: var(--farbe-selin-schrift);
    }
    .modal.final.ulrich .station_wrapper .rechte_seite {
        color: var(--farbe-ulrich-schrift);
    }

    .modal.final .station_wrapper {
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: space-evenly;
    }
    .modal.final .final_button {
        position: relative;
        width: 60%;
        border-radius: 0;
        background-color: #000;
        color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 2.6% 5%;
        font-weight: bold;
        font-size: 150%;
        left: 0;
        flex-direction: row;
        margin-top: 5%;
    }
    .modal.final .final_button svg {
        width: 5%;
    }
    .modal.final.asis .final_button,
    .modal.final.asis .final_button svg path {
        background-color: var(--farbe-asis-schrift) !important;
        color: #fff;
        fill: #fff;
    }
    .modal.final.thomas .final_button,
    .modal.final.thomas .final_button svg path {
        background-color: var(--farbe-thomas-schrift) !important;
        color: #fff;
        fill: #fff;
    }
    .modal.final.lotta .final_button,
    .modal.final.lotta .final_button svg path {
        background-color: var(--farbe-lotta-schrift) !important;
        color: #fff;
        fill: #fff;
    }
    .modal.final.selin .final_button,
    .modal.final.selin .final_button svg path {
        background-color: var(--farbe-selin-schrift) !important;
        color: #fff;
        fill: #fff;
    }
    .modal.final.ulrich .final_button,
    .modal.final.ulrich .final_button svg path {
        background-color: var(--farbe-ulrich-schrift) !important;
        color: #fff;
        fill: #fff;
    }
    .modal.final.olga .final_button,
    .modal.final.olga .final_button svg path {
        background-color: var(--farbe-olga-schrift) !important;
        color: #fff;
        fill: #fff;
    }

    .modal.final.asis .final_button:hover,
    .modal.final.asis .final_button:hover svg path {
        background-color: var(--farbe-asis-light) !important;
        color: var(--farbe-asis-schrift);
        fill: var(--farbe-asis-schrift);
    }
    .modal.final.thomas .final_button:hover,
    .modal.final.thomas .final_button:hover svg path {
        background-color: var(--farbe-thomas-light) !important;
        color: var(--farbe-thomas-schrift);
        fill: var(--farbe-thomas-schrift);
    }
    .modal.final.olga .final_button:hover,
    .modal.final.olga .final_button:hover svg path {
        background-color: var(--farbe-olga-light) !important;
        color: var(--farbe-olga-schrift);
        fill: var(--farbe-olga-schrift);
    }
    .modal.final.lotta .final_button:hover,
    .modal.final.lotta .final_button:hover svg path {
        background-color: var(--farbe-lotta-light) !important;
        color: var(--farbe-lotta-schrift);
        fill: var(--farbe-lotta-schrift);
    }
    .modal.final.selin .final_button:hover,
    .modal.final.selin .final_button:hover svg path {
        background-color: var(--farbe-selin-light) !important;
        color: var(--farbe-selin-schrift);
        fill: var(--farbe-selin-schrift);
    }
    .modal.final.ulrich .final_button:hover,
    .modal.final.ulrich .final_button:hover svg path {
        background-color: var(--farbe-ulrich-light) !important;
        color: var(--farbe-ulrich-schrift);
        fill: var(--farbe-ulrich-schrift);
    }


    .modal.final .barometer .social_battery_score .social_battery_inner_wrapper {
        position: absolute;
        width: 53.7%;
        height: calc(var(--font-size)*4.2);
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        top: -66.6%;
        left: 21.4%;
    }
    .modal.final .barometer .social_battery_score.drei .social_battery_inner_wrapper {
        top: -82.6%;
    }

    .modal.final .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill {
        width: 8%;
        background-color: #8da6ce;
        background: linear-gradient(to right, indianred, red);
        box-shadow: 2px 0 20px rgba(206, 42, 42, 0.71);
        transition: width 2s ease-in-out;
    }

.modal.final .barometer .social_battery_inner_wrapper.batterie .social_battery_fill {
    width: 8%;
    background-color: #8da6ce;
    background: linear-gradient(to right, indianred, red);
    box-shadow: 2px 0 20px rgba(206, 42, 42, 0.71);
    transition: width 2s ease-in-out;
    height: 96%;
    position: absolute;
    top: 2%;
    left: 2%;
}

.modal.final .barometer .social_battery_inner_wrapper.batterie {
    height: calc(var(--font-size)*5);
    box-sizing: border-box;
    position: relative;
}
.modal.final .barometer .social_battery_inner_wrapper.batterie > img {
    height: 100%;
    position: relative;
    z-index: 2;
}
.modal.final .barometer .social_battery_inner_wrapper.batterie::before {
    content: '';
    width: 93%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    background-color: rgba(255,255,255,.5);
    border-radius: var(--font-size);
}

.modal.final .barometer .social_battery_inner_wrapper.batterie .social_battery_fill.low,
    .modal.final .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill.low {
        background: linear-gradient(to right, indianred, red);
        box-shadow: 2px 0 20px rgba(206, 42, 42, 0.71);
    }
.modal.final .barometer .social_battery_inner_wrapper.batterie .social_battery_fill.medium,
    .modal.final .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill.medium {
        background: linear-gradient(to right, darkorange, orange);
        box-shadow: 2px 0 20px rgba(255, 140, 0, 0.6);
    }
.modal.final .barometer .social_battery_inner_wrapper.batterie .social_battery_fill.full,
    .modal.final .barometer .social_battery_score .social_battery_inner_wrapper .social_battery_fill.full {
        background: linear-gradient(to right, greenyellow, mediumspringgreen);
        box-shadow: 2px 0 20px rgba(173, 255, 47, 0.60);
    }




    .modal.final .barometer .social_battery_score .social_battery_info {
        position: relative;
        left: 0;
        height: auto;
        width: 100%;
        background: rgba(var(--farbe-mint-schrift-rgb), 0.4);
        border-radius: 0 0 calc(var(--font-size) * 0.5) calc(var(--font-size) * 0.5);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 4%;
        padding: 4% 4% 6% 4%;
        z-index: -1;
        transition: opacity .5s ease-in-out;
        box-sizing: border-box;
        flex-grow: 1;
        flex-shrink: 0;
    }
    .modal.final .barometer .social_battery_score {
        position: relative;
        left: 0;
        width: 100%;
        top: 0;
        height: 100%;
        display: flex;
        align-content: flex-start;
        justify-content: flex-start;
        flex-grow: 1;
        flex-shrink: 0;
        margin-top: 7%;
        z-index: 2;
    }
    .modal.final .barometer .barometer_wrapper_inner {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        cursor: pointer;
        flex-direction: column;
        background-color: #cfebe9;
        padding-top: 8%;
        border-radius: 0;
    }
    .modal.final.lotta .barometer .social_battery_score .social_battery_info,
    .modal.final.lotta .barometer .barometer_wrapper_inner {
        background: rgba(var(--farbe-hellblau-rgb), 0.4);;
    }
    .modal.final.thomas .barometer .social_battery_score .social_battery_info,
    .modal.final.thomas .barometer .barometer_wrapper_inner {
        background: rgba(var(--farbe-mint-rgb), 0.4);;
    }
    .modal.final.selin .barometer .social_battery_score .social_battery_info,
    .modal.final.selin .barometer .barometer_wrapper_inner {
        background: rgba(var(--farbe-rot-rgb), 0.4);;
    }
    .modal.final.olga .barometer .social_battery_score .social_battery_info,
    .modal.final.olga .barometer .barometer_wrapper_inner {
        background: rgba(var(--farbe-dunkelblau-rgb), 0.4);;
    }
    .modal.final.asis .barometer .social_battery_score .social_battery_info,
    .modal.final.asis .barometer .barometer_wrapper_inner {
        background: rgba(var(--farbe-violett-rgb), 0.4);;
    }
    .modal.final.ulrich .barometer .social_battery_score .social_battery_info,
    .modal.final.ulrich .barometer .barometer_wrapper_inner {
        background: rgba(var(--farbe-dunkelrot-rgb), 0.4);;
    }


    .modal.final .barometer {
        position: relative;
        width: 80%;
        z-index: 3;
        display: flex;
        justify-content: flex-start;
        flex-grow: 0;
        margin-bottom: 5%;
        box-sizing: border-box;
        height: auto;
    }
    .modal.final .station_wrapper .rechte_seite {
        justify-content: flex-start;
        align-items: center;
        display: flex;
        flex-direction: column;
        animation: fadeIn 1s ease-in-out;
        flex-grow: 0;
        height: auto;
        width: 50%;
        box-sizing: border-box;
    }
    .modal.final .station_wrapper .avatar_komplett {
        position: relative;
        flex-grow: 0;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: flex-end;
        flex-shrink: 0;
        width: 40%;
    }
    .modal.final .station_wrapper .avatar_komplett:focus,
    .modal.final .station_wrapper .avatar_komplett:focus-visible {
        outline-color: transparent;
        outline-width: 0 !important;
        outline-style: none;
    }
    .modal.final .barometer .batterie {
        height: calc(var(--font-size)*5);
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich {
        position: relative;
        width: 100%;
        height: auto;
        padding: 1%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        gap: 4%;
        align-items: center;
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich > span {
        font-size: 120%;
        line-height: 1.1;
        font-weight: bold;
        color: #fff;
        flex-shrink: 1;
        flex-grow: 0;
        word-wrap: break-word;
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich .bereich_score {
        height: 100%;
        width: 100%;
        max-width: 55%;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 500px;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        flex-grow: 1;
        flex-shrink: 0;
        max-height: calc(var(--font-size) * 2.4);
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert {
        width: 8%;
        background: linear-gradient(to right, #ec3f3f, red);
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert.low {
        background: linear-gradient(to right, #ec3f3f, red);
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert.medium {
        background: linear-gradient(to right, darkorange, orange);
    }
    .modal.final .barometer .social_battery_score .social_battery_info .bereich .bereich_score .bereich_score_wert.full {
        background: linear-gradient(to right, greenyellow, mediumspringgreen);
    }



    .closemodal {
        border: 0;
        position: relative;
        width: 2.7%;
        height: auto;
        background: transparent;
        z-index: 99;
        outline: 0 !important;
        padding: 0;
        margin-right: 3%;
        margin-bottom: 0.2%;
    }

    .infopopup .closemodal,
    .alert .closemodal,
    .contentpopup .closemodal {
        position: absolute;
        right: 3%;
        top: 4%;
        margin-right: 0;
        width: 2.8%;
        width: calc(var(--container-size) * 0.028);
    }

    .closemodal::before {
        content: '';
        display: block;
        position: absolute;
        left: -15%;
        width: 130%;
        top: -15%;
        height: 130%;
        outline: 0 !important;
    }

    .modal.persona.contentpopup.asis .closemodal .closemodal_path {
        stroke: var(--farbe-asis-schrift);
    }
    .modal.persona.contentpopup.thomas .closemodal .closemodal_path {
        stroke: var(--farbe-thomas-schrift);
    }
    .modal.persona.contentpopup.olga .closemodal .closemodal_path {
        stroke: var(--farbe-olga-schrift);
    }
    .modal.persona.contentpopup.selin .closemodal .closemodal_path {
        stroke: var(--farbe-selin-schrift);
    }
    .modal.persona.contentpopup.ulrich .closemodal .closemodal_path {
        stroke: var(--farbe-ulrich-schrift);
    }
    .modal.persona.contentpopup.lotta .closemodal .closemodal_path {
        stroke: var(--farbe-lotta-schrift);
    }
    .modal.persona.contentpopup.violett .closemodal .closemodal_path {
        stroke: var(--farbe-violett-schrift);
    }
    .modal.persona.contentpopup.mint .closemodal .closemodal_path {
        stroke: var(--farbe-mint-schrift);
    }
    .modal.persona.contentpopup.hellblau .closemodal .closemodal_path {
        stroke: var(--farbe-hellblau-schrift);
    }
    .modal.persona.contentpopup.dunkelrot .closemodal .closemodal_path {
        stroke: var(--farbe-dunkelrot-schrift);
    }
    .modal.persona.contentpopup.rot .closemodal .closemodal_path {
        stroke: var(--farbe-rot-schrift);
    }
    .modal.persona.contentpopup.dunkelblau .closemodal .closemodal_path {
        stroke: var(--farbe-dunkelblau-schrift);
    }
    .modal.persona.contentpopup.orange .closemodal .closemodal_path {
        stroke: var(--farbe-orange-schrift);
    }


    .closemodal::before:focus,
    .closemodal:focus::before,
    .closemodal:focus {
        outline: 0 !important;
    }

    .infobutton {
        position: absolute;
        right: 2%;
        top: 3%;
        width: 3.8%;
        z-index: 100000;
        border: 0 !important;
        background: transparent;
    }
    .infobutton img {
        width: 100%;
        height: 100%;
    }

    .infopopup .dialog_content,
    .impressum .dialog_content,
    .alert .dialog_content {
        max-width: 60%;
        margin: auto auto;
        height: auto !important;
        flex-grow: 0;
        flex-shrink: 1;
    }

    .infopopup .infotext_wrapper,
    .impressum .infotext_wrapper,
    .alert .infotext_wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 3%;
        font-size: 110%;
        color: var(--farbe-dunkelblau-schrift);
        position: relative;
    }
    .alert .infotext_wrapper {
        font-size: 130%;
        text-align: center;
        align-items: center;
    }
    .alert .infotext_wrapper .personaname {
        font-weight: bold;
        text-transform: capitalize;
    }

    .impressum h2,
    .infopopup h2,
    .alert h2 {
        font-size: 180%;
        margin-bottom: 3%;
    }
    .infopopup h3 {
        margin-top: 1%;
        margin-bottom: 1%;
    }

    .infopopup .spielanleitung {
        background-color: var(--farbe-hellblau-light);
        color: var(--farbe-dunkelblau-schrift);
        padding: 2% 3%;
        border-radius: 0;
    }

    .infopopup .cta {
        font-size: calc(var(--font-size) * 1.3) !important;
        font-weight: bold;
        text-align: center;
        width: 100%;
        margin-top: 3% !important;
        margin-bottom: 0% !important;
    }

    .infopopup .closemodal,
    .alert .closemodal {
        right: 3%;
        top: 5.5%;
        width: calc(var(--container-size) * 0.025);
    }
    .infopopup .closemodal svg .closemodal_path,
    .alert .closemodal svg .closemodal_path {
        stroke: var(--farbe-dunkelblau-schrift);
    }

    .infopopup button.imprint.openmodal {
        border: 0;
        background: transparent;
        color: var(--farbe-dunkelblau-schrift);
        text-decoration: underline;
        position: absolute;
        bottom: 4%;
        right: 3%;
        font-size: 110%;
    }

    .alert .button_wrapper,
    .impressum .button_wrapper,
    .infopopup .button_wrapper {
        width: 100%;
        position: relative;
        display: flex;
        gap: 3%;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }

    .alert .button_wrapper .reset,
    .alert .button_wrapper .abbrechen,
    .impressum .button_wrapper .reset,
    .impressum .button_wrapper .abbrechen,
    .infopopup .button_wrapper .reset,
    .infopopup .button_wrapper .abbrechen{
        position: relative;
        background-color: var(--farbe-rot-schrift);
        font-weight: bold;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px;
        width: auto;
        padding: 1.2% 7%;
        left: unset;
        right: unset;
        transition: background-color .2s ease-in-out;
    }
    .infopopup .button_wrapper .reset,
    .impressum .button_wrapper .reset,
    .alert .button_wrapper .reset {
        background-color: var(--farbe-dunkelblau-schrift);
    }

    .infopopup .button_wrapper .reset:hover,
    .impressum .button_wrapper .reset:hover,
    .alert .button_wrapper .reset:hover {
        background-color: #002947;
    }

    .infopopup .button_wrapper .abbrechen:hover,
    .impressum .button_wrapper .abbrechen:hover,
    .alert .button_wrapper .abbrechen:hover {
        background-color: #6a0000;
    }

    button.button.openmodal.bubbles {
        position: absolute;
        width: 15%;
    }
    button.button.openmodal.bubbles > img {
        width: 100%;
    }

    .schaltflaechen button.button .button_content_wrapper {
        width: 100%;
        position: relative;
    }
    .schaltflaechen button.button .button_content_wrapper img {
        width: 100%;
    }

    .schaltflaechen button.button.personahaus {
        position: absolute;
        width: 9%;
        min-width: 9%;
    }
    .schaltflaechen button.button.personahaus .haus_grafik {
        margin-top: -14%;
    }

    /* Positionierung: Häuser und Pins */
    .schaltflaechen button.button.personahaus#haus_lotta {
        left: 83.5%;
        top: 12.4%;
        width: 8.5%;
    }
    .schaltflaechen button.button.personahaus#haus_thomas {
        left: 13%;
        top: 31%;
    }
    .schaltflaechen button.button.personahaus#haus_asis {
        left: 76.6%;
        top: 49%;
        width: 7.5%;
    }
    .schaltflaechen button.button.personahaus#haus_olga {
        left: 51%;
        top: 66.5%;
        width: 7.5%;
    }
    .schaltflaechen button.button.personahaus#haus_selin {
        left: 45%;
        top: 11.7%;
    }
    .schaltflaechen button.button.personahaus#haus_ulrich {
        left: 6.8%;
        top: 3.3%;
        width: 7%;
    }

    .schaltflaechen button.button.personahaus#haus_selin .haus_grafik {
        width: 115%;
    }
    .schaltflaechen button.button.personahaus#haus_ulrich .haus_grafik {
        width: 70%;
        margin-left: 8%;
    }
    .schaltflaechen button.button.personahaus#haus_olga .haus_grafik {
        width: 80%;
        margin-left: 8%;
    }
    .schaltflaechen button.button.personahaus#haus_thomas .haus_grafik {
        width: 125%;
        margin-left: -10%;
    }

    .schaltflaechen button.button.personahaus .pin {
        animation: pin_float 5s ease-in-out infinite;
    }
    .schaltflaechen button.button.personahaus .pin.visible {
        display: block !important;
    }
    .schaltflaechen button.button.personahaus .pin.hidden,
    .schaltflaechen button.button.personahaus .pin.neutral,
    .schaltflaechen button.button.personahaus .pin.happy {
        display: none;
    }

    @keyframes pin_float {
        from { transform: translateY(0); }
        50% { transform: translateY(-10%); }
        to { transform: translateY(0); }
    }

    /* Accordion */
    .modal.antwortinfos .accordion.ui-accordion.ui-widget {
        margin-bottom: 5%;
        height: 100%;
        opacity: 1;
    }

    .modal.antwortinfos .accordion .accordion_title {
        background: transparent;
        color: #000;
        border: none;
        border-radius: 0 !important;
        font-weight: 600;
        line-height: 1.3;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        font-size: 140%;
        font-family: 'Ebert', Helvetica, Arial, sans-serif;
        padding: 1.6% 4%;
        margin: 0;
        display: block;
        position: relative;
        width: auto;
        max-width: 100%;
        border-bottom: 1px solid #000;
    }
    .modal.antwortinfos .accordion span.accordion_title:last-of-type {
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .modal.antwortinfos .accordion .accordion_title:not(.ui-state-active) {
        margin-top: 0.3%;
    }

    .modal.antwortinfos .accordion .accordion_title:first-child {
        margin-top: 0 !important;
    }
    .modal.antwortinfos .accordion .ui-accordion-header {
        min-height: 4.4%;
    }

    .modal.antwortinfos .ui-accordion .ui-accordion-content {
        padding: 3% 5%;
    }

    .modal.antwortinfos .accordion .ui-accordion-header.ui-state-active {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: transparent;
    }

    .modal.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content-active {
        background: transparent;
        padding: 1.5% 2%;
        border: 0;
    }

    .modal.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        font-family: 'Ebert', Helvetica, Arial, sans-serif;
        line-height: 1.4;
        font-size: 118%;
        font-weight: 300;
        color: #000;
        overflow: scroll;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 3%;
        margin-bottom: 1%;
        max-height: calc( var(--font-size) * 17);
    }
    .modal.antwortinfos.violett .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-violett-schrift)
    }
    .modal.antwortinfos.dunkelblau .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-dunkelblau-schrift)
    }
    .modal.antwortinfos.dunkelrot .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-dunkelrot-schrift)
    }
    .modal.antwortinfos.rot .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-rot-schrift)
    }
    .modal.antwortinfos.mint .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-mint-schrift)
    }
    .modal.antwortinfos.hellblau .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-hellblau-schrift)
    }
    .modal.antwortinfos.orange .ui-accordion .ui-accordion-content.ui-accordion-content a {
        color: var(--farbe-orange-schrift)
    }

    .modal.violett.antwortinfos .accordion .accordion_title,
    .modal.violett.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-violett-schrift);
        border-color: var(--farbe-violett-schrift);
    }
    .modal.dunkelrot.antwortinfos .accordion .accordion_title,
    .modal.dunkelrot.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-dunkelrot-schrift);
        border-color: var(--farbe-dunkelrot-schrift);
    }
    .modal.dunkelblau.antwortinfos .accordion .accordion_title,
    .modal.dunkelblau.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-dunkelblau-schrift);
        border-color: var(--farbe-dunkelblau-schrift);
    }
    .modal.rot.antwortinfos .accordion .accordion_title,
    .modal.rot.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-rot-schrift);
        border-color: var(--farbe-rot-schrift);
    }
    .modal.mint.antwortinfos .accordion .accordion_title,
    .modal.mint.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-mint-schrift);
        border-color: var(--farbe-mint-schrift);
    }
    .modal.hellblau.antwortinfos .accordion .accordion_title,
    .modal.hellblau.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-hellblau-schrift);
        border-color: var(--farbe-hellblau-schrift);
    }
    .modal.orange.antwortinfos .accordion .accordion_title,
    .modal.orange.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
        color: var(--farbe-orange-schrift);
        border-color: var(--farbe-orange-schrift);
    }

    .modal.violett .closemodal svg .closemodal_path {
        stroke: var(--farbe-violett-schrift);
    }
    .modal.dunkelblau .closemodal svg .closemodal_path {
        stroke: var(--farbe-dunkelblau-schrift);
    }
    .modal.dunkelrot .closemodal svg .closemodal_path {
        stroke: var(--farbe-dunkelrot-schrift);
    }
    .modal.rot .closemodal svg .closemodal_path {
        stroke: var(--farbe-rot-schrift);
    }
    .modal.mint .closemodal svg .closemodal_path {
        stroke: var(--farbe-mint-schrift);
    }
    .modal.hellblau .closemodal svg .closemodal_path {
        stroke: var(--farbe-hellblau-schrift);
    }
    .modal.orange .closemodal svg .closemodal_path {
        stroke: var(--farbe-orange-schrift);
    }




    /* Animationen im Hintergrund */
    .hintergrund .bus_hg {
        width: 4.4% !important;
        left: 8%;
        z-index: 1;
        top: 4%;
        height: auto !important;
        transform-origin: top left;
        opacity: 1;
        animation: busdrive 18.1s ease-in-out infinite both alternate-reverse;
    }
    @keyframes busdrive {
        0% {
            left: -5%;
            top: -5%;
            transform: scaleX(1);
            opacity: 1;
        }
        16.5% {
            left: -5%;
            top: -5%;
            transform: scaleX(1);
            opacity: 1;
        }
        30.5% {
            left: 5.6%;
            top: 2%;
            transform: scaleX(1);
        }
        31.5% {
            left: 8%;
            top: 4%;
            transform: scaleX(-1);
        }
        50% {
            left: 0%;
            top: 10.4%;
            transform: scaleX(-1);
        }
        70% {
            left: 0%;
            top: 10.4%;
            transform: scaleX(-1);
            opacity: 1;
        }
        92% {
            opacity: 0;
        }
        98% {
            left: -29.6%;
            top: 35%;
            transform: scaleX(-1);
            opacity: 0;
        }
        100% {
            left: -29.6%;
            top: 35%;
            transform: scaleX(-1);
            opacity: 0;
        }
    }

    .hintergrund .hochhaus {
        z-index: 5;
        width: 6.2%;
        left: -12%;
        top: 2.5%;
        height: auto;
    }
    .hintergrund .auto_blau_hg{
        z-index: 1;
        width: 2.9%;
        left: 75%;
        top: 43.5%;
    }
    .hintergrund .auto_rot_hinten_hg {
        z-index: 1;
        width: 2%;
        left: 59.5%;
        top: 53%;
        height: 3%;
        animation: rotesAuto_hinten 14s linear infinite;
    }
    @keyframes rotesAuto_hinten {
        0% { left: 41.5%; top: 21.5%; opacity: 0;}
        10% { left: 36.9%; top: 26.3%; transform: scaleX(1); opacity: 0;}
        11% { left: 36.9%; top: 28%; transform: scaleX(-1); opacity: 0;}
        40% { left: 62.5%; top: 50%; transform: scaleX(-1); opacity: 0;}
        41% { left: 62.5%; top: 51%; transform: scaleX(1); opacity: 0;}
        45% { left: 56.2%; top: 56.4%; transform: scaleX(1); opacity: 0;}
        46% { left: 56.2%; top: 56.9%; transform: scaleX(-1); opacity: 0;}
        52% { left: 59.8%; top: 59.9%; transform: scaleX(-1); opacity: 0;}
        53% { left: 59.8%; top: 59.9%; transform: scaleX(1); opacity: 1;}
        59% { left: 64.9%; top: 56.9%; transform: scaleX(1); opacity: 1;}
        60% { left: 64.9%; top: 56.9%; transform: scaleX(1); opacity: 1;}
        61% { left: 64.9%; top: 56.9%; transform: scaleX(-1); opacity: 0;}
        67% { left: 69.2%; top: 60.6%; transform: scaleX(-1); opacity: 0;}
        68% { left: 69.2%; top: 60.6%; transform: scaleX(1); opacity: 0;}
        73% { left: 66.2%; top: 64.1%; transform: scaleX(1); opacity: 0;}
        74% { left: 66.2%; top: 65.3%; transform: scaleX(-1); opacity: 0;}
        94% { left: 99.2%; top: 93.3%; transform: scaleX(-1); opacity: 0;}
        100% { left: 99.2%; top: 93.3%; transform: scaleX(-1); opacity: 0;}

    }

    .hintergrund .auto_rot_hg {
        z-index: 1;
        width: 2%;
        left: 59.5%;
        top: 53%;
        height: 3%;
        animation: rotesAuto 14s linear infinite;
    }
    @keyframes rotesAuto {
        0% { left: 41.5%; top: 21.5%; opacity: 0;}
        8% {opacity: 0;}
        10% { left: 36.9%; top: 26.3%; transform: scaleX(1); opacity: 1;}
        11% { left: 36.9%; top: 28%; transform: scaleX(-1);}
        40% { left: 62.5%; top: 50%; transform: scaleX(-1); opacity: 1;}
        41% { left: 62.5%; top: 51%; transform: scaleX(1); opacity: 1;}
        45% { left: 56.2%; top: 56.4%; transform: scaleX(1); opacity: 1;}
        46% { left: 56.2%; top: 56.9%; transform: scaleX(-1); opacity: 1;}
        52% { left: 59.8%; top: 59.9%; transform: scaleX(-1); opacity: 1;}
        53% { left: 59.8%; top: 59.9%; transform: scaleX(-1); opacity: 0;}
        59% { left: 59.8%; top: 59.9%; transform: scaleX(-1); opacity: 0;}
        60% { left: 64.9%; top: 56.9%; transform: scaleX(-1); opacity: 0;}
        61% { left: 64.9%; top: 56.9%; transform: scaleX(-1); opacity: 1;}
        67% { left: 69.2%; top: 60.6%; transform: scaleX(-1); opacity: 1;}
        68% { left: 69.2%; top: 60.6%; transform: scaleX(1); opacity: 1;}
        73% { left: 66.2%; top: 64.1%; transform: scaleX(1); opacity: 1;}
        74% { left: 66.2%; top: 65.3%; transform: scaleX(-1); opacity: 1;}
        94% { left: 99.2%; top: 93.3%; transform: scaleX(-1); opacity: 0;}
        100% { left: 99.2%; top: 93.3%; transform: scaleX(-1); opacity: 0;}

    }
    .hintergrund .bruecke_bogen{
        z-index: 5;
        width: 4.4%;
        left: 52.5%;
        top: 40.9%;
        height: 7%;
    }
    .hintergrund .baeume_strasse{
        z-index: 5;
        width: 3.4%;
        left: 69.2%;
        top: 62.6%;
        height: 6%;
    }



    .hintergrund .wolken_fabrik_hg {
        z-index: 1;
        width: 13%;
        left: 55.5%;
        top: -49%;
        animation: wolkenFabrik 5s infinite ease-in-out;
    }
    @keyframes wolkenFabrik {
        0% {transform: translateY(0) translateX(0); opacity: 1;}
        25% {transform: translateY(0.5%) translateX(0); opacity: 1;}
        50% {transform: translateY(0.2%) translateX(2%); opacity: 0.5;}
        75% {transform: translateY(0.4%) translateX(-1%); opacity: 0.5;}
        100% {transform: translateY(0) translateX(0); opacity: 1;}
    }
    .hintergrund .traktor_hg {
        z-index: 1;
        width: 3.5%;
        left: 83.5%;
        top: -2.5%;
        animation: traktor 0.2s infinite ease-in-out,
        traktorfahrt 5s infinite alternate-reverse ease-in-out;
    }
    @keyframes traktor {
        0% {transform: translateY(0);}
        50% {transform: translateY(-0.08%);}
        100% {transform: translateY(0);}
    }
    @keyframes traktorfahrt {
        from {left: 83.5%; top: -2.5%;}
        to {left: 85%; top: -1%;}
    }
    .hintergrund .wellen_hg_1 {
        z-index: 1;
        width: 6%;
        left: 11%;
        top: 79.5%;
        height: auto;
        -webkit-mask-image: linear-gradient(to right,#fff0 0%, #000 30%, #000 60%, #fff0 100%);
        -webkit-mask-size: 0%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        animation: wellen 3s infinite linear;
        animation-delay: 1s;
    }
    .hintergrund .wellen_hg_2 {
        z-index: 1;
        width: 6%;
        left: 16%;
        top: 59.5%;
        height: auto;
        -webkit-mask-image: linear-gradient(to right,#fff0 0%, #000 30%, #000 60%, #fff0 100%);
        -webkit-mask-size: 0%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        animation: wellen 3s infinite linear;
        animation-delay: 2s;
    }
    .hintergrund .wellen_hg_3 {
        z-index: 1;
        width: 6%;
        left: 47%;
        top: 47%;
        height: auto;
        -webkit-mask-image: linear-gradient(to right,#fff0 0%, #000 30%, #000 60%, #fff0 100%);
        -webkit-mask-size: 0%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        animation: wellen 3s infinite linear;
    }

    .hintergrund .wellen_hg_4 {
        z-index: 1;
        width: 6%;
        left: 65%;
        top: 19%;
        height: auto;
        -webkit-mask-image: linear-gradient(to right,#fff0 0%, #000 30%, #000 60%, #fff0 100%);
        -webkit-mask-size: 0%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        animation: wellen 3s infinite linear;
        animation-delay: 1.8s;
    }
    @keyframes wellen {
        from {-webkit-mask-size: 0%; opacity: 1;}
        50% {-webkit-mask-size: 300%; opacity: 1;}
        100% {-webkit-mask-size: 600%; opacity: 1;}
    }


    /* Confetti */
    .confetti {
        width: 15px;
        height: 15px;
        z-index: 2005;
        background-color: #f2d74e;
        position: absolute;
        left: 50%;
        animation: confetti 5s ease-in-out -2s infinite;
        transform-origin: left top;
        align-self: flex-start;
        border-radius: 100px;
        top: 0;
    }
    .confetti.hidden {
        display: none;
    }
    .confetti:nth-child(1) {
        background-color: #f2d74e; left: 10%; animation-delay: 0s;
    }
    .confetti:nth-child(2) {
        background-color: #95c3de; left: 20%; animation-delay: -5s;
    }
    .confetti:nth-child(3) {
        background-color: #ff9a91; left: 30%; animation-delay: -3s;
    }
    .confetti:nth-child(4) {
        background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
    }
    .confetti:nth-child(5) {
        background-color: #95c3de; left: 50%; animation-delay: -4s;
    }
    .confetti:nth-child(6) {
        background-color: #ff9a91; left: 60%; animation-delay: -6s;
    }
    .confetti:nth-child(7) {
        background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
    }
    .confetti:nth-child(8) {
        background-color: #95c3de; left: 80%; animation-delay: -2s;
    }
    .confetti:nth-child(9) {
        background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
    }
    .confetti:nth-child(10) {
        background-color: #f2d74e; left: 100%; animation-delay: -2.5s;
    }
    .confetti:nth-child(11) {
        background-color: #f2d74e; left: 5%; animation-delay: 0s;
    }
    .confetti:nth-child(12) {
        background-color: #95c3de; left: 15%; animation-delay: -2s;
    }
    .confetti:nth-child(13) {
        background-color: #ff9a91; left: 25%; animation-delay: -4s;
    }
    .confetti:nth-child(14) {
        background-color: #f2d74e; left: 35%; animation-delay: -1.5s;
    }
    .confetti:nth-child(15) {
        background-color: #95c3de; left: 45%; animation-delay: -5s;
    }
    .confetti:nth-child(16) {
        background-color: #ff9a91; left: 55%; animation-delay: -3s;
    }
    .confetti:nth-child(17) {
        background-color: #f2d74e; left: 65%; animation-delay: -3.5s;
    }
    .confetti:nth-child(18) {
        background-color: #95c3de; left: 75%; animation-delay: -1s;
    }
    .confetti:nth-child(19) {
        background-color: #ff9a91; left: 85%; animation-delay: -4.5s;
    }
    .confetti:nth-child(20) {
        background-color: #f2d74e; left: 95%; animation-delay: -5.5s;
    }

    @keyframes confetti {
        0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
        25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
        50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
        75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
        100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
    }

    @media(max-width: 500px) {
        html.mobile {
            background-image: url("bilder/hauptgrafik/startgrafik_smartphone.svg");
            background-size: 108% auto;
            background-color: #fff;
        }

        /* ---------- Hauptgrafik ---------- */
        .mobile .schaltflaechen button.button.personahaus#haus_lotta {
            left: 8.5%;
            top: 75%;
            width: 19%;
        }
        .mobile .schaltflaechen button.button.personahaus#haus_asis {
            left: 63.9%;
            top: 42.6%;
            width: 17.5%;
        }
        .mobile .schaltflaechen button.button.personahaus#haus_olga {
            top: 61.5%;
            width: 18%;
            left: 78%;
        }
        .mobile .schaltflaechen button.button.personahaus#haus_selin {
            left: 65.9%;
            top: 15.9%;
            width: 19%;
        }
        .mobile .schaltflaechen button.button.personahaus#haus_ulrich {
            top: 2.5%;
            width: 16.5%;
            left: 17%;
        }
        .mobile .schaltflaechen button.button.personahaus#haus_thomas {
            left: 7%;
            top: 28%;
            width: 18%;
        }
        .mobile .infografik_wrapper #infografik-titel {
            width: 30%;
            left: 17.9%;
            bottom: 31.4%;
        }
        .mobile .infografik_wrapper .logo {
            width: 22%;
            left: 73.8%;
            bottom: 1%;
        }
        .mobile button.infobutton {
            width: 9.8%;
            right: 3%;
            top: calc(1.3% + var(--safe-space) );
        }
        .mobile .hintergrund .auto_blau_hg {
            width: 5.9%;
            left: 93%;
            top: 27.5%;
        }
        .mobile .hintergrund .wolken_fabrik_hg {
            width: 23%;
            left: 88%;
            top: -42%;
        }
        .mobile .hintergrund .traktor_hg {
            z-index: 1;
            width: 7.5%;
            left: 30%;
            top: 24%;
            animation: traktor 0.2s infinite ease-in-out;
        }
        .mobile .hintergrund .wellen_hg_1 {
            width: 12%;
            left: 0;
            top: 67.5%;
        }
        .mobile .hintergrund .wellen_hg_2 {
            width: 12%;
            left: 6%;
            top: 53.5%;
        }
        .mobile .hintergrund .wellen_hg_3 {
            width: 12%;
            left: 35%;
            top: 44%;
        }
        .mobile .hintergrund .wellen_hg_4 {
            width: 12%;
            left: 90%;
            top: 36%;
        }
        .mobile .hintergrund .auto_rot_hg {
            width: 6%;
            left: 89.9%;
            top: 54%;
        }
        .hintergrund .bus_hg {
            width: 7.4% !important;
            left: 8%;
            top: 15%;
            animation: none;
        }


        /* ---------- Routen ---------- */
        .mobile .modal.route {
            position: unset !important;
        }
        .mobile .modal.route .route_wrapper .figur_wrapper {
            position: fixed;
        }
        .mobile .contentpopup.route .closemodal {
            position: fixed !important;
            top: calc(var(--font-size)* 2) !important;
            right: calc(var(--font-size)* 3) !important;
            background-color: #fff;
            padding: 1.8%;
            box-sizing: content-box;
            border-radius: 500px;
            width: calc(var(--font-size)* 2.9) !important;
            height: calc(var(--font-size)* 2.9) !important;
            box-shadow: 0px 0px 10px rgba(0,0,0,.1);
        }
        .mobile .modal.route .route_wrapper .barometer {
            width: calc(var(--container-size) * 0.6);
            height: calc(var(--container-size) * 0.273);
            bottom: unset;
            top: 2%;
            right: unset;
            left: 2%;
        }
        .mobile .modal.route::backdrop {
            background: linear-gradient(#c9e9fa 40%, #edeceb 60%)
        }

        .mobile .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info .bereich > span {
            font-size: calc(var(--font-size) * 2.7);
        }
        .mobile .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info {
            top: unset;
            bottom: -480%;
        }
        .mobile .modal.route .route_wrapper .barometer .social_battery_score.drei .social_battery_info {
            top: unset;
            bottom: -400%;
        }

        .mobile .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info::after {
            font-size: 450%;
            line-height: 3;
            top: 55%;
            left: 102%;
            padding: 10%;
            width: calc(var(--font-size) * 12);
            height: calc(var(--font-size) * 12);
        }
        .modal.route .route_wrapper .barometer .social_battery_score .social_battery_info.visible.animate_score::after {
            animation: floatUpMobile 2.5s ease-in-out,
            fadeOutUpBig 1s 2s ease-in-out both;
        }
        @keyframes floatUpMobile {
            from {top: 30%; opacity: 0;}
            40% {opacity: 1;}
            100% {top: -40%;}
        }

        /* ---------- Stationen ---------- */
        .mobile .contentpopup.station:not(.final) .closemodal {
            top: 1%;
            right: 2%;
            background-color: #fff;
            padding: 1.8%;
            box-sizing: content-box;
            border-radius: 500px;
            width: calc(var(--font-size)* 2.6);
            height: calc(var(--font-size)* 2.6);
            box-shadow: 0px 0px 10px rgba(0,0,0,.1);
        }
        .mobile .modal.persona .station_wrapper .station_infos, .mobile .modal.persona .station_wrapper .station_quiz {
            width: 100%;
            margin-top: 2%;
        }
        .mobile .modal.persona .station_wrapper .station_infos h1 {
            font-size: 450%;
        }
        .mobile .modal.persona .station_wrapper .station_infos p {
            font-size: 290%;
            line-height: 1.2;
            padding-right: 0;
            margin-top: 1%;
        }
        .mobile .modal.persona .station_wrapper .station_bild {
            right: -12%;
            width: 80%;
            height: calc((var(--container-size) * 59 / 41) * 0.8);
            bottom: 0;
            top: unset;
        }
        .mobile .modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen {
            font-size: 280%;
            width: 100%;
        }
        .mobile .modal.persona .station_wrapper .station_infos button.was_wuerde_mir_helfen svg {
            width: 3%;
        }
        .mobile .modal.persona .station_wrapper .station_bild {
            right: 0;
            width: 100%;
            height: var(--left-height);
            position: relative;
            align-content: flex-end;
            flex-shrink: 1;
            flex-grow: 1;
            margin-top: 5%;
            min-height: 30vh;
        }
        .mobile .modal.persona .station_wrapper {
            flex-direction: column;
            padding-bottom: 0;
            overflow: scroll;
            align-content: flex-start;
        }
        .mobile .modal.persona.final .station_wrapper {
            overflow: hidden;
        }
        .mobile .modal.persona.station .station_wrapper::before {
            content: '';
            width: 100%;
            height: 3vh;
            background: linear-gradient(#f9f5f9 40%, rgba(255,255,255,0));
            display: block;
            z-index: 1;
            position: absolute;
            top: 0;
        }
        .mobile .modal.persona .station_bild .station_bild_inner_wrapper {
            position: relative;
            top: 0;
            height: 100%;

        }
        .mobile .modal.persona .station_wrapper .station_bild.small {
            transition: none;
            order: 2;
        }
        .mobile .modal.persona.station .dialog_content, .modal.persona.station .dialog_content .content_wrapper {
            padding-bottom: 0;
        }
        .mobile .modal.persona .station_wrapper .station_quiz {
            margin-left: 0;
        }
        .mobile .modal.persona .station_wrapper .station_quiz .quiz_frage {
            font-size: 280%;
            margin-bottom: 2%;
            margin-top: 0;
        }

        .mobile .quiz_antworten_wrapper {
            width: 95%;
        }
        .mobile .quiz_antworten_wrapper button.button.quiz_antwort,
        .mobile .quiz_antworten_wrapper button.button.nextstep,
        .mobile .wrapper_auswertung button.button.closequiz,
        .mobile .quiz_antworten_wrapper button.button.auswerten {
            padding: 2.2% 3%;
            font-size: 230%;
            border-width: calc(var(--font-size) * 0.3);
        }

        .mobile .modal .quiz_antworten_wrapper .mehrinfos {
            animation: mehrinfosattention 1s ease-in-out alternate-reverse infinite;
        }
        @keyframes mehrinfosattention {
            from { font-size: 250%;}
            to { font-size: 280%;}
        }


        .mobile .infopopup .infotext_wrapper,
        .mobile .impressum .infotext_wrapper,
        .mobile .alert .infotext_wrapper {
            width: 100%;
            padding: 9% 7%;
            font-size: 270%;
            box-sizing: border-box;
        }

        .mobile .modal.infopopup .dialog_content,
        .mobile .modal.impressum .dialog_content,
        .mobile .modal.alert .dialog_content {
            max-width: 85%;
        }

        .mobile .infopopup .closemodal:not(.reset):not(.abbrechen),
        .mobile .impressum .closemodal:not(.reset):not(.abbrechen),
        .mobile .alert .closemodal:not(.reset):not(.abbrechen) {
            right: 5%;
            top: 2%;
            width: calc(var(--container-size) * 0.05);
        }

        .mobile .infopopup .infotext_wrapper,
        .mobile .impressum .infotext_wrapper,
        .mobile .alert .infotext_wrapper {
            padding: 7% 5%;
        }
        .mobile .modal.infopopup .dialog_content,
        .mobile .modal.impressum .dialog_content,
        .mobile .modal.alert .dialog_content {
            max-width: 100%;
            width: 95%;
            max-height: 95%;
            display: flex;
            justify-content: flex-start;
            overflow: scroll;
        }
        .mobile .infopopup .cta {
            font-size: calc(var(--font-size) * 2.8) !important;
        }
        .mobile .infopopup .button_wrapper .button.reset {
            padding: 1.4% 8%;
        }


        /* ---------- Antwortinfos (Ausziehkarten) ---------- */
        .modal.persona.feedback .dialog_content,
        .modal.persona.antwortinfos .dialog_content {
            width: 95%;
            margin: 4% 0 0 0 !important;
        }
        .modal.persona.antwortinfos .info_wrapper h1,
        .modal.persona.feedback .feedback_wrapper h1 {
            font-size: 330%;
        }
        .modal.antwortinfos .accordion .accordion_title {
            font-size: 250%;
            padding: 1.6% 0%;
        }
        .modal.antwortinfos .ui-accordion .ui-accordion-content.ui-accordion-content {
            font-size: 240%;
            max-height: calc( var(--font-size) * 50);
        }

        .mobile .contentpopup.feedback .closemodal,
        .mobile .contentpopup.antwortinfos .closemodal {
            width: calc(var(--container-size) * 0.055) !important;
            right: 5% !important;
            top: 3% !important;
        }
        .modal.persona.antwortinfos .info_wrapper h1, .modal.persona.feedback .feedback_wrapper h1 {
            font-size: 410%;
            max-width: 95%;
        }

        /* ---------- Feedbacks ---------- */
        .barometer_bereich .bereich_score {
            height: calc(var(--font-size) * 3);
            border-radius: 1000px;
        }
        .barometer_bereich {
            padding: 2.7% 5%;
        }
        .barometer_bereich .bereich_score_anteil {
            font-size: 290%;
        }
        .modal.persona.feedback .feedback_wrapper .feedback_content .feedback_title {
            font-size: 300%;
            line-height: 1.2;
        }
        .modal.persona.feedback .feedback_wrapper .feedback_content .rank {
            font-size: 310%;
            width: calc(var(--font-size) * 4.6);
            height: calc(var(--font-size) * 4.6);
            min-width: calc(var(--font-size) * 4.6);
            min-height: calc(var(--font-size) * 4.6);
        }
        .modal.persona.feedback .feedback_wrapper .feedback_content > p {
            margin-top: 1.5%;
            font-size: 280%;
            margin-left: 11.0%;
        }
        .modal.persona.feedback .feedback_wrapper .zwischenueberschrift {
            font-size: 320%;
        }
        .modal.persona.feedback .feedback_wrapper .feedback_content button.warum_hilfts {
            width: calc(var(--font-size) * 5);
            height: calc(var(--font-size) * 5);
            font-size: 380%;
        }
        .modal.persona.feedback .dialog_content .content_wrapper .feedback_content .headline_wrapper {
            width: 89%;
        }
        .modal.persona.feedback .feedback_wrapper button.weiter_gehts {
            padding: 2.5% 6%;
            justify-content: center;
            width: 100%;
            margin-top: 6%;
            font-size: 240%;
        }
        .modal.persona.feedback .feedback_wrapper button.weiter_gehts svg {
            width: 3%;
            margin-left: 7%;
        }
        .modal.persona.feedback .dialog_content .content_wrapper {
            padding-bottom: 5%;
        }

        /* ---------- Final Popups ---------- */
        .mobile .flex_break {
            flex-basis: unset;
        }
        .mobile .modal.final .station_wrapper .avatar_komplett {
            width: 41%;
            margin-bottom: 7%;
        }
        .mobile .modal.final .station_wrapper .rechte_seite {
            width: 90%;
        }
        .mobile .modal.final .final_button {
            width: 100%;
            justify-content: center;
            font-size: 290%;
            height: 15%;
            margin-top: 0;
        }
        .mobile .modal.final .final_button svg {
            width: 3%;
            margin-left: 5%;
        }
        .mobile .modal.final .barometer {
            width: 100%;
            height: 85%;
            overflow: hidden;
            margin-bottom: 0;
            border-radius: calc(var(--font-size) * 0.5);
        }
        .mobile .modal.final .barometer .social_battery_score .social_battery_info .bereich {
            gap: unset;
            margin-bottom: 1%;
        }
        .mobile .modal.final .barometer .social_battery_score .social_battery_info .bereich > span {
            font-size: 260%;
        }
        .mobile .modal.final .barometer .batterie {
            height: calc(var(--font-size)*9);
            margin-top: 8%;
            margin-bottom: 8%;
        }
        .modal.final .barometer .barometer_wrapper_inner {
            padding-top: 0;
            flex-grow: 0;
            flex-shrink: 1;
        }
        .mobile .modal.final .barometer .social_battery_score.drei .social_battery_inner_wrapper {
            top: calc(var(--font-size)*-12.55);
            height: calc(var(--font-size)*7.67);
            left: calc(var(--font-size)*14.5);
        }
        .mobile .modal.final .barometer .social_battery_score .social_battery_inner_wrapper {
            width: 42.5%;
            height: calc(var(--font-size)*7.57);
            left: calc(var(--font-size)*14.6);
            top: calc(var(--font-size)*-12.5);
        }
        .mobile .modal.final .station_wrapper h1 {
            font-size: 400%;
            margin-bottom: 8%;
        }
        .mobile .modal.final .barometer .social_battery_score {
            height: 63%;
            flex-grow: 0;
            flex-shrink: 1;
            margin-top: 0;
        }
        .mobile .modal.final .barometer .social_battery_score.drei {
            height: 59%;
        }
        .mobile .modal.final .barometer .social_battery_score .social_battery_info {
            padding: 4% 4% 3% 4%;
            gap: unset;
        }


        /* ---------- Steckbriefe ---------- */
        .mobile .modal:not(.route):not(.station):not(.antwortinfos):not(.feedback) .dialog_content .content_wrapper {
            height: auto;
            padding: 4%;
            flex-direction: column;
        }
        .mobile .modal.persona .dialog_content .content_wrapper .steckbrief .losgehts {
            padding: 2% 8%;
            font-size: 100%;
            margin-top: 2%;
            margin-bottom: 4%;
        }
        .mobile .modal.persona .dialog_content .content_wrapper .steckbrief .avatar {
            margin-bottom: 2%;
        }
        .mobile .modal.persona .dialog_content .content_wrapper .steckbrief .avatar .avatar_bild {
            width: 25%;
        }
        .mobile .modal.persona .dialog_content .content_wrapper .steckbrief {
            padding: 6%;
            width: auto;
            font-size: 280%;
            height: 100%;
            box-sizing: border-box;
        }
        .mobile .modal .dialog_content .steckbrief p {
            margin-bottom: 7%;
        }
        .mobile .contentpopup .closemodal:not(.final_button) {
            width: calc(var(--container-size) * 0.06);
            top: 5%;
            right: 9%;
            position: absolute;
        }
        .mobile .modal.persona .dialog_content .content_wrapper .route {
            width: 100%;
            margin-left: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            display: none;
        }
        .mobile .modal .dialog_content .steckbrief p::after {
            content: "Hilf' durch den Alltag!";
            display: block;
            font-weight: bold;
            margin-top: 5%;
        }
        .mobile .modal.selin .dialog_content .steckbrief p::after {
            content: "Hilf' Selin durch ihren Alltag!";
        }
        .mobile .modal.olga .dialog_content .steckbrief p::after {
            content: "Hilf' Olga durch ihren Alltag!";
        }
        .mobile .modal.lotta .dialog_content .steckbrief p::after {
            content: "Hilf' Lotta durch ihren Alltag!";
        }
        .mobile .modal.ulrich .dialog_content .steckbrief p::after {
            content: "Hilf' Ulrich durch seinen Alltag!";
        }
        .mobile .modal.asis .dialog_content .steckbrief p::after {
            content: "Hilf' Aziz durch seinen Alltag!";
        }
        .mobile .modal.thomas .dialog_content .steckbrief p::after {
            content: "Hilf' Thomas durch seinen Alltag!";
        }

        /* Mobile Styles Einzelne Route */

        /*Lotta Route 1*/
        .mobile [id^="popup_lotta_route_"].modal.route .route_wrapper .route_bg_wrap {
            left: calc(var(--container-size) * -0.36);
        }
        .mobile #popup_lotta_route_1.modal.route .route_wrapper .figur_wrapper,
        .mobile #popup_lotta_route_2.modal.route .route_wrapper .figur_wrapper{
            left: calc(var(--container-size) * -0.5);
            width: calc(var(--figur-size) * 0.66);
            bottom: 15%;
            bottom: calc(var(--container-size) * 0.15 + ((100dvh - (var(--container-size) * 16 / 9)) / 2 ));
        }
        .mobile #popup_lotta_route_1.modal.route .figur_wrapper .figur_pin.lotta_pin,
        .mobile #popup_lotta_route_2.modal.route .figur_wrapper .figur_pin.lotta_pin{
            margin: 0 0 0 51%;
        }
        .mobile #popup_lotta_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 3.9%;
            top: 20%;
        }
        .mobile #popup_lotta_route_1.modal.route .route_wrapper .trigger {
            right: 11.5%;
        }
        /*Lotta Route 2*/
        .mobile #popup_lotta_route_2.modal.route .route_wrapper .zielanzeiger.target {
            right: 16%;
            top: 20%;
        }
        .mobile #popup_lotta_route_2.modal.route .route_wrapper .trigger {
            right: 23.5%;
        }
        .mobile #popup_lotta_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: lotta_st2_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes lotta_st2_end_pin_mobile {
            from { transform: scale(1) translateX(0) translateY(0); }
            to { transform: scale(0.6) translateX(-100%) translateY(-60%); }
        }
        /* Lotta Route 3*/
        .mobile #popup_lotta_route_3.modal.route .route_wrapper .figur_wrapper{
            width: calc(var(--figur-size) * 0.15);
            bottom: 8.5%;
            bottom: calc(var(--container-size) * 0.085 + (100dvh - (var(--container-size) * 16 / 9)));
        }
        .mobile .modal.route .figur_wrapper .figur_pin.lotta_pin_3{
            width: calc(var(--container-size) * 0.3);
            margin: 0 0 0 15%;
        }
        .mobile #popup_lotta_route_3.modal.route .route_wrapper .zielanzeiger.target {
            right: 19%;
            top: 30%;
        }
        .mobile #popup_lotta_route_3.modal.route .route_wrapper .trigger {
            right: 25.5%;
        }
        /*Olga Route 1*/
        .mobile #popup_olga_route_1.modal.route .route_wrapper .route_bg_wrap {
            left: calc(var(--container-size) * -0.85);
        }
        .mobile [id^="popup_olga_route_"].modal.route .route_wrapper .figur_wrapper {
            left: calc(var(--container-size) * -0.1) !important;
            width: calc(var(--figur-size) * 0.42) !important;
            bottom: 15% !important;
            bottom: calc(var(--container-size) * 0.15 + ((100dvh - (var(--container-size) * 16 / 9)) / 2 )) !important;
        }
        .mobile #popup_olga_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 11.5%;
            top: 20%;
        }
        .mobile #popup_olga_route_1.modal.route .route_wrapper .trigger {
            right: 22.5%;
        }
        .mobile #popup_olga_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: olga_st1_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes olga_st1_end_pin_mobile {
            from { transform: scale(1) translateX(0) translateY(0); }
            to { transform: scale(0.6) translateX(-120%) translateY(-60%); }
        }
        /*Olga Route 2*/
        .mobile #popup_olga_route_2.modal.route .route_wrapper .route_bg_wrap {
            left: calc(var(--container-size) * -0.60);
        }
        .mobile #popup_olga_route_2.modal.route .route_wrapper .zielanzeiger.target {
            right: 38.9%;
            top: 14%;
        }
        .mobile #popup_olga_route_2.modal.route .route_wrapper .trigger {
            right: 50.5%;
        }
        /*Olga Route 3*/
        .mobile #popup_olga_route_3.modal.route .route_wrapper .route_bg_wrap {
            left: calc(var(--container-size) * -0.22);
        }
        .mobile #popup_olga_route_3.modal.route .route_wrapper .zielanzeiger.target {
            right: 24%;
            top: 20%;
        }
        .mobile #popup_olga_route_3.modal.route .route_wrapper .trigger {
            right: 30.5%;
        }
        /*Olga Route 4*/
        .mobile #popup_olga_route_4.modal.route .route_wrapper .route_bg_wrap {
            left: calc(var(--container-size) * -0.30);
        }
        .mobile #popup_olga_route_4.modal.route .route_wrapper .figur_wrapper .figur_pin {
            animation:
                    olga_st4_start_mobile 3s reverse ease-in-out !important;
        }
        #popup_olga_route_4.modal.route .route_wrapper .figur_wrapper .figur.olga_auto {
            animation:
                    olga_st4_start_mobile 2s reverse ease-in-out,
                    olga_auto_mobile 0.09s alternate-reverse infinite ease-in-out 2s !important;
        }
        @keyframes olga_st4_start_mobile {
            from { transform: translateX(0) translateY(0) scale(1); }
            to { transform: translateX(15%) translateY(-30%) scale(0.9); }
        }
        @keyframes olga_auto_mobile {
            0% { transform: translateY(0); }
            100% { transform: translateY(0.5%); }
        }
        .mobile #popup_olga_route_4.modal.route .route_wrapper .zielanzeiger.target {
            right: 10.5%;
            top: 20%;
        }
        .mobile #popup_olga_route_4.modal.route .route_wrapper .trigger {
            right: 18.5%;
        }
        /*Asis Route 1*/
        .mobile #popup_asis_route_1.modal.route .route_wrapper .trigger {
            right: 46%;
        }
        .mobile #popup_asis_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 37.8%;
            top: 14%;
        }
        /*Asis Route 2*/
        .mobile #popup_asis_route_2.modal.route .route_wrapper .route_bg_wrap{
            left: calc(var(--container-size) * -0.36);
        }
        .mobile #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper,
        .mobile #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper{
            left: calc(var(--container-size) * -0.7);
            width: calc(var(--figur-size) * 0.66);
            bottom: 15%;
            bottom: calc(var(--container-height) * 0.06);
        }
        .mobile #popup_asis_route_2.modal.route .figur_wrapper .figur_pin,
        .mobile #popup_asis_route_4.modal.route .figur_wrapper .figur_pin{
            margin: 0 0 0 62%;
        }
        .mobile #popup_asis_route_2.modal.route .route_wrapper .trigger {
            right: 27%;
        }
        .mobile #popup_asis_route_2.modal.route .route_wrapper .zielanzeiger.target {
            right: 20.9%;
            top: 18%;
        }
        .mobile #popup_asis_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: asis_st2_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes asis_st2_end_pin_mobile {
            from{ transform: scale(1) translateX(0);}
            to { transform: scale(0.6) translateX(20%);}
        }
        /*Asis Route 3*/
        .mobile #popup_asis_route_3.modal.route .route_wrapper .trigger {
            right: 26%;
        }
        .mobile #popup_asis_route_3.modal.route .route_wrapper .zielanzeiger.target {
            right: 18.9%;
            top: 28%;
        }
        .mobile #popup_asis_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten {
            animation: asis_st3_end_mobile 2s ease-in-out;
            animation-fill-mode: both;
        }
        @keyframes asis_st3_end_mobile {
            from { transform: translateY(0) translateX(0) scale(1); }
            to { transform: translateY(-2%) translateX(50%) scale(0.8); }
        }
        /*Asis Route 4*/
        .mobile #popup_asis_route_4.modal.route .route_wrapper .route_bg_wrap{
            left: calc(var(--container-size) * -0.42);
        }
        .mobile #popup_asis_route_4.modal.route .route_wrapper .trigger {
            right: 18%;
        }
        .mobile #popup_asis_route_4.modal.route .route_wrapper .zielanzeiger.target {
            right: 8.5%;
            top: 18%;
        }
        .mobile #popup_asis_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: asis_st4_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes asis_st4_end_pin_mobile {
            from{ transform: scale(1) translateX(0);}
            to { transform: scale(0.6) translateX(40%);}
        }
        /*Thomas Route 1*/
        .mobile #popup_thomas_route_1.modal.route .route_wrapper .route_bg_wrap,
        .mobile #popup_thomas_route_3.modal.route .route_wrapper .route_bg_wrap{
            left: calc(var(--container-size) * -0.45);
        }
        .mobile #popup_thomas_route_1.modal.route .route_wrapper .figur_wrapper,
        .mobile #popup_thomas_route_2.modal.route .route_wrapper .figur_wrapper {
            left: calc(var(--container-size) * -0.42) !important;
            width: calc(var(--figur-size) * 0.60) !important;
            bottom: 2% !important;
            /* bottom: calc(var(--container-size) * 0.02 + ((100dvh - (var(--container-size) * 16 / 9)) / 2 )) !important;*/
            bottom: calc(var(--container-height) * 0.046) !important;
        }
        .mobile #popup_thomas_route_1.modal.route .route_wrapper .trigger {
            right: 45.3%;
        }
        .mobile #popup_thomas_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 38.6%;
            top: 20%;
        }
        /*Thomas Route 2*/
        .mobile #popup_thomas_route_2.modal.route .route_wrapper .route_bg_wrap {
            left: calc(var(--container-size) * -1.05);
        }
        .mobile #popup_thomas_route_2.modal.route .route_wrapper .trigger {
            right: 21%;
        }
        .mobile #popup_thomas_route_2.modal.route .route_wrapper .zielanzeiger.target {
            right: 15.5%;
            top: 20%;
        }
        .mobile #popup_thomas_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: thomas_st2_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes thomas_st2_end_pin_mobile {
            from{ transform: scale(1) translateX(0);}
            to { transform: scale(0.6) translateX(200%);}
        }
        /*Thomas Route 3*/
        .mobile #popup_thomas_route_3.modal.route .route_wrapper .figur_wrapper {
            /* Special in Thomas Route 3 */
            /*bottom: calc(var(--container-size) * 0.19 + (100dvh - (var(--container-size) * 16 / 9)) ) !important;*/
            bottom: calc(var(--container-height) * 0.055) !important;
            left: calc(var(--container-size) * -0.4);
        }
        .mobile #popup_thomas_route_3.modal.route .route_wrapper .trigger {
            right: 18%;
        }
        .mobile #popup_thomas_route_3.modal.route .route_wrapper .zielanzeiger.target {
            right: 12%;
            top: 20%;
        }
        .mobile #popup_thomas_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: thomas_st3_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes thomas_st3_end_pin_mobile {
            from{ transform: scale(1) translateX(0);}
            to { transform: scale(0.6) translateX(60%);}
        }
        /*Ulrich Route 1*/
        .mobile #popup_ulrich_route_1.modal.modal.route .route_wrapper .route_bg_wrap,
        .mobile #popup_ulrich_route_3.modal.modal.route .route_wrapper .route_bg_wrap{
            left: calc(var(--container-size) * -0.36);
        }
        .mobile [id^="popup_ulrich_route_"].modal.route .route_wrapper .figur_wrapper {
            left: calc(var(--container-size) * -0.75) !important;
            width: calc(var(--figur-size) * 0.75) !important;
            bottom: 16.4% !important;
            bottom: calc(var(--container-size) * 0.155 + ((100dvh - (var(--container-size) * 16 / 9)) / 2 )) !important;
        }
        .mobile [id^="popup_ulrich_route_"].modal.route .figur_wrapper .figur_pin {
            margin: 0 0 0 57%;
        }
        .mobile #popup_ulrich_route_1.route .route_wrapper .trigger,
        .mobile #popup_ulrich_route_2.route .route_wrapper .trigger,
        .mobile #popup_ulrich_route_3.route .route_wrapper .trigger{
            right: 38%;
        }
        .mobile #popup_ulrich_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 30.2%;
            top: 24%;
        }
        .mobile #popup_ulrich_route_1.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin,
        .mobile #popup_ulrich_route_4.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: ulrich_st1_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes ulrich_st1_end_pin_mobile {
            from{ transform: scale(1) translateX(0);}
            to { transform: scale(0.6) translateX(50%);}
        }

        /*Ulrich Route 2*/
        .mobile #popup_ulrich_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: ulrich_st2_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        .mobile #popup_ulrich_route_2.modal.route .route_wrapper .zielanzeiger.target {
            right: 30%;
            top: 21%;
        }
        @keyframes ulrich_st2_end_pin_mobile {
            from{ transform: scale(1) translateX(0) translateY(0%);}
            to { transform: scale(0.6) translateX(150%) translateY(60%);}
        }
        /*Ulrich Route 3*/
        .mobile #popup_ulrich_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: ulrich_st3_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes ulrich_st3_end_pin_mobile {
            from{ transform: scale(1) translateX(0) translateY(0);}
            to { transform: scale(0.6) translateX(-40%) translateY(30%);}
        }
        .mobile #popup_ulrich_route_3.modal.route .route_wrapper .zielanzeiger.target {
            right: 30.5%;
            top: 20%;
        }
        /*Ulrich Station 4*/
        .mobile #popup_ulrich_route_4.route .route_wrapper .trigger{
            right: 38.2%;
        }
        .mobile #popup_ulrich_route_4.modal.route .route_wrapper .zielanzeiger.target {
            right: 32%;
            top: 25%;
        }
        /*Selin Station 1*/
        .mobile #popup_selin_route_1.modal.route .route_wrapper .figur_wrapper,
        .mobile #popup_selin_route_4.modal.route .route_wrapper .figur_wrapper{
            width: calc(var(--figur-size) * 0.15);
            bottom: 15.5%;
            bottom: calc(var(--container-height) * 0.07) !important;
            left: calc(var(--container-size) * 0.11);
        }
        .mobile #popup_selin_route_1.modal .modal.route .figur_wrapper .figur_pin,
        .mobile #popup_selin_route_4.modal .modal.route .figur_wrapper .figur_pin{
            width: calc(var(--container-size) * 0.3);
            margin: 0 0 0 15%;
        }
        .mobile #popup_selin_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 33%;
            top: 24%;
        }
        .mobile #popup_selin_route_1.route .route_wrapper .trigger{
            right: 37.5%;
        }
        /*Selin Station 2*/
        .mobile #popup_selin_route_2.modal.route .route_wrapper .route_bg_wrap,
        .mobile #popup_selin_route_3.modal.route .route_wrapper .route_bg_wrap{
            left: calc(var(--container-size) * -0.80);
        }
        .mobile #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper,
        .mobile #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper{
            left: calc(var(--container-size) * -0.7);
            width: calc(var(--figur-size) * 0.66);
            bottom: 15%;
            bottom: calc(var(--container-height) * 0.03);
        }
        .mobile #popup_selin_route_2.modal.route .figur_wrapper .figur_pin,
        .mobile #popup_selin_route_3.modal.route .figur_wrapper .figur_pin{
            margin: 0 0 0 62%;
        }
        .mobile #popup_selin_route_2.modal.route .route_wrapper .zielanzeiger.target {
            right: 35.7%;
            top: 17%;
        }
        .mobile #popup_selin_route_2.route .route_wrapper .trigger{
            right: 40%;
        }
        .mobile #popup_selin_route_2.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: selin_st2_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes selin_st2_end_pin_mobile {
            from{ transform: scale(1) translateX(0) translateY(0);}
            to { transform: scale(0.6) translateX(-50%) translateY(80%);}
        }
        /*Selin Station 3*/
        .mobile #popup_selin_route_3.route .route_wrapper .trigger{
            right: 37%;
        }
        .mobile #popup_selin_route_3.modal.route .route_wrapper .figur_wrapper.station_betreten .figur_pin {
            animation: selin_st3_end_pin_mobile 1.5s ease-in-out !important;
            animation-fill-mode: both !important;
            animation-delay: 1s;
        }
        @keyframes selin_st3_end_pin_mobile {
            from{ transform: scale(1) translateX(0) translateY(0);}
            to { transform: scale(0.6) translateX(100%) translateY(50%);}
        }
        .mobile #popup_selin_route_3.modal.route .route_wrapper .zielanzeiger.target {
            right: 32.3%;
            top: 18%;
        }
        /*Selin Station 4*/
        .mobile #popup_selin_route_4.modal.route .route_wrapper .route_bg_wrap{
            left: calc(var(--container-size) * -0.80);
        }
        .mobile #popup_selin_route_4.route .route_wrapper .trigger{
            right: 36%;
        }
        .mobile #popup_selin_route_4.modal.route .route_wrapper .zielanzeiger.target {
            right: 30.5%;
            top: 25%;
        }

        .mobile .alert .button_wrapper {
            gap: 14%;
            align-items: stretch;
            flex-direction: column;
            margin-bottom: 3%;
        }
        .mobile .alert .button_wrapper .reset,
        .mobile .alert .button_wrapper .abbrechen,
        .mobile .infopopup .button_wrapper .reset,
        .mobile .infopopup .button_wrapper .abbrechen {
            margin-bottom: 3%;
        }

        .mobile .hintergrund .auto_rot_hinten_hg,
        .mobile .hintergrund .auto_rot_hg {
            animation: none;
        }
        .mobile .hintergrund .auto_rot_hinten_hg {
            display: none;
        }

        .mobile .modal.route .route_wrapper .swipe {
            bottom: 5%;
            width: calc(var(--container-size) * 0.3);
            height: calc(var(--container-size) * 0.3);
            left: 37%;
        }
        .mobile .modal.route .route_wrapper .zielanzeiger {
            top: 32%;
            width: calc(var(--container-size) * 0.5);
            height: calc(var(--container-size) * 0.5);
        }

        .mobile #popup_asis_route_1.modal.route .route_wrapper .zielanzeiger.target {
            right: 38.8%;
            top: 10%;
        }

        .mobile .hintergrund .bruecke_bogen {
            display: none;
        }

        .mobile .modal .dialog_content ol {
            padding-left: 11%;
        }
        .mobile .modal .dialog_content ol li:before {
            left: 1;
        }
        .mobile .infopopup button.imprint.openmodal {
            bottom: 0;
        }

    }