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

html {
    background-position: center top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: #ffffff;
    height: 100dvh;
}

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


    --farbe-rot: #b70000;
    --farbe-blau: #004071;
    --farbe-orange: #ce8020;
    --farbe-gruen: #00605f;
    --farbe-lila: #4d074d;

}

.button_content_wrapper {
    position: relative;
    width: 100%;
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.infografik_wrapper,
.infografik_wrapper #popups .popup_window,
.infografik_wrapper .modal,
.infografik_wrapper .modal .dialog_content,
.infografik_wrapper .modal .dialog_content .accordion,
.infografik_wrapper .modal .dialog_content .text,
.infografik_wrapper .modal .dialog_content .text_content_wrapper,
.infografik_wrapper .modal .dialog_content .infotext_wrapper
{
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */

}


.infografik_wrapper::-webkit-scrollbar,
.infografik_wrapper .modal::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .accordion::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .text::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .text_content_wrapper::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .info_wrap_wrap::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .infotext_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;
}

.hintergrundHG img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.85);   /* skaliert das Bild auf 98% */
    transform-origin: center; /* skaliert von der Mitte aus */
    z-index: -99;
}

.hintergrundHG 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: 90%;
    height: 90%;
}

@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;
}
a[href] {
    color: white;
}


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

.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: 145.2%;
}

.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: 85%;
    height: 85%;
    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 {
    background: none;
    border: none;
    outline: none;
}

button:focus,
button:focus-visible {
    outline: none;
    box-shadow: none;
}

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

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

.glowhover {
    transition: filter 0.4s;
}
.glowhover:hover {
    filter: brightness(108%) contrast(102%);
}


.infografik_wrapper #infografik-titel {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0%;
    padding: 0 2%;
    box-sizing: border-box;
    top: 5.8%;
    z-index: 14;
}

.infografik_wrapper #infografik-titel h1 {
    font-family: 'Ebert Headline';
    color: #005597;
    text-transform: none;
    font-size: 120%;
    text-align: left;
    margin: 0;
    line-height: 1.3;
}

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

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


.hintergrund{
    position: absolute;
    width: 100%;
    height: 105%;
    left: 0;
    top: 0;
    z-index: -99;
    overflow: hidden;
    transform: scale(0.98);
    /*display: none;*/
}
.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;
}

button.infobutton {
    width: 5%;
    left: 0;
    position: absolute;
}

button.infobutton svg {
    width: 100%;
}

.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: 140%;
}

button.infobutton {
    width: calc(var(--font-size) * 4.1);
    left: calc(var(--font-size) * 2);
    position: fixed;
    top: calc(var(--font-size) * 1.5);
}

button.infobutton svg {
    width: 100%;
}

.schaltflaechen button.button.hauptinseln {
    width: 28.9%;
    height: 20%;
}

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


/* --------- Generelle Modal Styles --------- */
#contents {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.modal {
    border: 0;
    background: transparent;
    padding: 0;
    position: relative !important;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding-left: 0;
    overflow: visible;
    outline: none !important;
}


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

.modal.contentpopup {
    justify-content: center !important;
    align-items: center !important;
    font-size: var(--font-size);
    color: #fff;
}
.modal.contentpopup.open {
    display: flex;
}
.modal .dialog_content {
    font-size: 0.9rem; /* Basisgröße */
}
.modal.contentpopup .dialog_content {
    border-radius: calc(var(--font-size) * 1.2);
    padding: 10% 5% 8% 5%;
    height: auto;
    width: 95%;
    align-items: flex-start;
    max-height: 92%;
    overflow: visible;
    box-sizing: border-box;
    animation: zoomIn .4s ease-in-out;
    margin-top: 7%;
}
.modal.contentpopup .popup_titel {
    font-size: calc(var(--font-size) * 1.5);
    margin-bottom: 2%;
    line-height: 1.3;
    font-family: 'Ebert Headline', 'Ebert', Helvetica, Arial, sans-serif;
}
.modal.contentpopup h3.popup_titel {
    font-size: calc(var(--font-size) * 1.3);
    margin-bottom: 2%;
    line-height: 1.3;
    font-family: 'Ebert Headline', 'Ebert', Helvetica, Arial, sans-serif;
}
.modal.contentpopup .text {
    overflow: scroll;
    margin-bottom: 4%;
}
.modal .dialog_content p,
.modal .dialog_content li {
    margin: 0;
    font-size: calc(var(--font-size) * 1.15);
    line-height: 1.3;
    margin-bottom: 2%;
}

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

.modal .dialog_content .schmal p {
    line-height: 1.5;
}

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

.modal .dialog_content ol {
    padding-left: 5%;
}
.modal .dialog_content ul {
    padding-left: 2%;
}
/* Popup Grunddesign */
.modal.dialog_content {
    display: none;
    justify-content: center;
    align-items: center;
}

.modal.dialog_content[open] {
    display: flex;
}

.modal .dialog_content {
    position: relative;
    border-radius: 15px;
    width: 90%;
    text-align: left;
}
.modal.rot .dialog_content{
    background-color: var(--farbe-rot);
}
.modal.blau .dialog_content{
    background-color: var(--farbe-blau);
}
.modal.orange .dialog_content{
    background-color: var(--farbe-orange);
}
.modal.gruen .dialog_content{
    background-color: var(--farbe-gruen);
}
.modal.lila .dialog_content{
    background-color: var(--farbe-lila);
}
/* Icon Kreis */
.modal .popup_icon {
    position: absolute;
    top: calc(var(--font-size)*-3.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--font-size)*7);
    height: calc(var(--font-size)*7);
    margin-bottom: 5%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: white solid 1px;
}
.modal.rot .popup_icon{
    color: var(--farbe-rot);
    background-color: var(--farbe-rot);
}
.modal.blau .popup_icon {
    color: var(--farbe-blau);
    background-color: var(--farbe-blau);
}
.modal.orange .popup_icon {
    color: var(--farbe-orange);
    background-color: var(--farbe-orange);
}
.modal.gruen .popup_icon {
    color: var(--farbe-gruen);
    background-color: var(--farbe-gruen);
}
.modal.lila .popup_icon {
    color: var(--farbe-lila);
    background-color: var(--farbe-lila);
}
.popup_icon img {
    width: 40%;
    height: auto;
    display: block;
}
#popup_info .popup_icon img,
#popup_fairFashion_info .popup_icon img {
    width: 100%;
}
#popup_fleisch_info .popup_icon img,
#popup_abfall_info .popup_icon img,
#popup_streaming_info .popup_icon img{
    width: 22%;
}

/* Close Button */
.modal .closemodal {
    position: absolute;
    top: 12px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: #fff;
    cursor: pointer;
}

.modal.ausrufezeichen ul,
.modal.aufzaehlung_check ul,
.modal.aufzaehlung_kleidung ul,
#popup_fahrrad ul,
.modal.aufzaehlung_wolke ul {
    list-style: none;
    padding-left: 0;
}

#popup_fahrrad li{
    position: relative;
    padding-left: 2.8rem;
    margin-bottom: 0.95rem;
}
.modal.ausrufezeichen li,
.modal.aufzaehlung_check li,
.modal.aufzaehlung_kleidung li,
.modal.aufzaehlung_wolke li {
    position: relative;
    margin-bottom: 0.95rem;
    padding-left: 3rem;
}
.modal.ausrufezeichen li::before,
#popup_fahrrad ul li::before,
.modal.aufzaehlung_check li::before,
.modal.aufzaehlung_kleidung li::before,
.modal.aufzaehlung_wolke li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.8rem;
    height: 1.8rem;
    background-size: contain;
}
.modal.aufzaehlung_check li::before{
    content: "";
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
}
#popup_fahrrad ul li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    background-size: contain;
}
.modal.ausrufezeichen li::before {
    background: url("bilder/clickpunkte/warn-icon.svg") no-repeat center center;
}
#popup_fahrrad ul li::before {
    background: url("bilder/clickpunkte/aufzaehlungspunkt_fahrrad.svg") no-repeat center center;
}
.modal.aufzaehlung_check li::before {
    background: url("bilder/clickpunkte/icon_check.svg") no-repeat center center;
}
.modal.aufzaehlung_kleidung li::before {
    background: url("bilder/clickpunkte/kleidung.svg") no-repeat center center;
}
.modal.aufzaehlung_wolke li::before {
    background: url("bilder/clickpunkte/aufzaehlung_wolke_dunkel.svg") no-repeat center center;
}



/* --- Modal Backdrop --- */
::backdrop {
    opacity: 1;
    pointer-events: none;
    background-position: center top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.contentpopup::backdrop {
    opacity: 0.8;
    background-color: #ffffff;
}
#infopopup::backdrop {
    background-color: #0d4070;
    opacity: 1;
}

.closemodal_wrapper {
    position: absolute;
    top: 3%;
    width: 100%;
    height: 13%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2%;
}

.closemodal_wrapper .popup_titel {
    font-size: 220%;
    color: #fff;
    font-family: 'Ebert Headline', Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    max-width: fit-content;
    margin-right: 0;
    padding-bottom: 1%;
}

.closemodal {
    border: 0;
    position: relative;
    width: 15%;
    height: auto;
    background: transparent;
    z-index: 99;
    outline: 0 !important;
    padding: 0;
    margin-left: 7%;
    margin-top: -1%;
}

.infopopup .closemodal, .contentpopup .closemodal {
    position: absolute;
    right: calc(var(--font-size) * 1.5);
    top: calc(var(--font-size) * 1.3);
    margin-right: 0;
    width: 4%;
}

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

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


/* --------- Scrollbar --------- */

.modal .dialog_content .scrollbar {
    height: 82%;
    position: absolute;
    width: 1.5%;
    background-color: transparent;
    border-width: calc(var(--font-size) * 0.12);
    border-color: #fff;
    border-style: solid;
    border-radius: 500px;
    top: 12%;
    right: 1.3%;
    padding: 0.1%;
    box-sizing: border-box;
    opacity: 0.8;
    z-index: 10000;
}
.modal .dialog_content .scrollbar .handle {
    height: 20px;
    width: 100%;
    background-color: #fff;
    border-radius: 500px;
    top: 0;
    transition: height 0.3s ease-in-out;
}
.modal .dialog_content .scrollbar .handle::before {
    content: '';
    width: 500%;
    height: 100%;
    left: -150%;
    position: absolute;
}
.modal.infopopup .dialog_content .scrollbar {
    right: 3%;
    width: 1.5%;
}

.modal.infopopup .scrollbar {
    opacity: 0.7;
}

/* --------- Scrollbar ENDE --------- */

/* ---------- Infobutton und Infopopup ------------ */
.infobutton {
    position: absolute;
    right: 2%;
    top: 3%;
    width: 3.8%;
    z-index: 100000;
    border: 0 !important;
    background: transparent;
}
.infobutton img {
    width: 100%;
}
.modal.infopopup.open {
    display: flex;
}

.modal.infopopup .dialog_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    height: 90%;
    background: #ffffff;
    border-radius: 25px;
    margin: auto;
    flex-grow: 0;
    flex-shrink: 1;
}

.infopopup .infotext_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    height: auto;
    margin: auto;
    padding: 4% 5% 4.5% 5%;
    font-size: 110%;
    color: var(--formate-hauptfarbe-hex);
}
.infopopup h2 {
    font-size: 180%;
    margin-bottom: 1.5%;
}

.infopopup .closemodal {
    right: 17%;
    top: 7.9%;
    width: 2%;
}
/* Infobutton und Infopopup ENDE */
/* ---------- Hover Buttons ALLE ---------- */
.buttonHover {
    transition: all 0.3s ease; /* sorgt für weiche Animation */
}

.buttonHover:hover .button_content_wrapper img {
    transform: scale(1.2); /* 20% größer */
    transition: transform 0.3s ease;
}
/* Hover Buttons ENDE*/

/* ---------- Accordion ---------- */
.accordion.hinweis .accordion_title {
    background: transparent;
    border: 0;
    font-weight: 600;
    color: var(--formate-hauptfarbe-hex);
    position: relative;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: underline;
}

/* Pfeil rechts */
.accordion.hinweis .accordion_title:after {
    content: '';
    background-image: url('bilder/grafiken/pfeil_rechts_blau.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: var(--font-size);
    height: var(--font-size);
    position: relative;
    display: inline-block;
    margin-left: 2%;
    transition: transform .2s ease-in-out;
}

.accordion.hinweis .accordion_title.ui-state-active:after {
    transform: rotate(90deg);
}

.accordion.hinweis.ui-widget {
    font-family: 'Ebert', Helvetica, Arial, sans-serif;
}

.accordion.hinweis .ui-accordion-content {
    border: 0;
    background-color: rgba(255, 255, 255, 0.45);
    color: var(--formate-hauptfarbe-hex);
    border-radius: calc(var(--font-size) * 0.7);
}
/* ---------- Accordion ENDE ---------- */

/* ======================================================= */
/* ================= Positionierung =================== */
/* ======================================================= */

/* --------- Positionerung Startgrafik  --------- */
.hauptinseln:hover .fenster_hg{
    filter: brightness(0.9) saturate(1.7);
}
.haus_startgrafik {
    left: 10.4%;
    top: 12.6%;
    width: 70%;
    position: relative;
}
.schaltflaechen button.button.hauptinseln#bereich_abfall {
    left: 60.3%;
    bottom: 40.8%;
    width: 13.4%;
}
.schaltflaechen button.button.hauptinseln .abfall_frau {
    left: 13.4%;
    bottom: 8.9%;
    width: 77.5%;
    position: absolute;
}
.schaltflaechen button.button.hauptinseln#bereich_fleisch {
    left: 19.4%;
    bottom: 37.5%;
    width: 13.5%;
    position: relative;
}
.schaltflaechen button.button.hauptinseln .fleisch_mann {
    left: 28.4%;
    bottom: 1.9%;
    width: 52.5%;
    position: absolute;
}
.schaltflaechen button.button.hauptinseln .fleisch_mann_arm {
    left: 19.4%;
    bottom: -3.2%;
    width: 34.5%;
    position: absolute;
    animation: arm_bewegung_fleisch 6s ease-in-out infinite !important;
    transform-origin: top center;
    animation-fill-mode: both !important;
}
@keyframes arm_bewegung_fleisch {
    0%   { transform: rotate(-2deg); }
    20%  { transform: rotate(2deg); }
    60%  { transform: rotate(-2deg); }
    100% { transform: rotate(-2deg); }
}
.schaltflaechen button.button.hauptinseln#bereich_fairFashion {
    left: 40.4%;
    top: 21.3%;
    width: 12.2%;
}
.schaltflaechen button.button.hauptinseln .fairFashion_rahmen {
    left: -5.6%;
    top: -2.4%;
    width: 109%;
    position: absolute;
    z-index: 10;
}

.schaltflaechen button.button.hauptinseln .fairFashion_frau {
    left: 1.4%;
    bottom: 4.9%;
    width: 99.5%;
    position: absolute;
}
.schaltflaechen button.button.hauptinseln .fairFashion_arm {
    left: 9.4%;
    bottom: 7.9%;
    width: 60.5%;
    position: absolute;
    animation: arm_bewegung 6s ease-in-out infinite !important;
    transform-origin: left center;
    animation-fill-mode: both !important;
}
@keyframes arm_bewegung {
    0%   { transform: rotate(-6deg); }
    20%  { transform: rotate(6deg); }
    60%  { transform: rotate(-6deg); }
    100% { transform: rotate(-6deg); }
}
.paketFairFashion {
    left: 30%;
    width: 25.5%;
    position: relative;
}
.schaltflaechen button.button.hauptinseln#bereich_streaming {
    left: 39.7%;
    top: -36%;
    width: 13.9%;
    position: relative;
}
.schaltflaechen button.button.hauptinseln .streaming_koerper {
    left: 4.4%;
    bottom: 6.9%;
    width: 67.5%;
    position: absolute;
}
.schaltflaechen button.button.hauptinseln .streaming_arm {
    left: 66.4%;
    bottom: 18.9%;
    width: 37.5%;
    position: absolute;
    animation: arm_bewegung_streaming 6s ease-in-out infinite !important;
    transform-origin: left center;
    animation-fill-mode: both !important;
}
@keyframes arm_bewegung_streaming {
    0%   { transform: rotate(-2deg); }
    20%  { transform: rotate(3deg); }
    60%  { transform: rotate(-2.5deg); }
    100% { transform: rotate(-2deg); }
}
.schaltflaechen button.button.hauptinseln#bereich_nachhaltigkeit {
    left: 8%;
    bottom: 14%;
    width: 15%;
    position: absolute;
    z-index: 10;
}
.schaltflaechen button.button.hauptinseln#bereich_fahrrad {
    left: 69.5%;
    bottom: 8%;
    width: 15%;
    position: absolute;
    z-index: 10;
}
.schaltflaechen button.button.hauptinseln#bereich_info {
    right: 1%;
    top: 2%;
    width: 9%;
    position: absolute;
    z-index: 10;
}
#postbote {
    left: 6.4%;
    bottom: 46.9%;
    width: 6.8%;
    position: relative;
}
#postbote .postbote_arme {
    left: 2.4%;
    bottom: 59.9%;
    width: 135%;
    position: absolute;
}
.baum_links {
    left: -1%;
    bottom: 84.9%;
    width: 25%;
    position: relative;
    z-index: -1;
}
#baeume_rechts {
    right: 6.4%;
    bottom: 10%;
    width: 18%;
    position: absolute;
    z-index: -1;
}
#baeume_rechts .baum_rechhts_02 {
    left: 57.4%;
    bottom: 28.9%;
    width: 95%;
    position: absolute;
    z-index: -2;
}
#baeume_rechts .baum_rechts_01{
    animation: bewegung_baum 4.5s ease-in-out infinite !important;
    transform-origin: bottom center;
    animation-fill-mode: both !important;
}
@keyframes bewegung_baum {
    0%   { transform: rotate(-1deg); }
    20%  { transform: rotate(1deg); }
    60%  { transform: rotate(-1deg); }
    100% { transform: rotate(-1deg); }
}
.fahrrad {
    left: 36%;
    bottom: 78.9%;
    width: 27%;
    position: relative;
}

/* ---------- Positionerung Icons für App und Links ---------- */
.icon_apps {
    left: 5%;
    bottom: 11%;
    width: 14%;
    position: absolute;
}
.icon_links {
    left: 19%;
    bottom: 6%;
    width: 14%;
    position: absolute;
}

/* ---------- Positionerung Fair Fashion ---------- */
.modal.fairFashion.dialog_content{
    position: relative;
}
.modal.fairFashion .dialog_content .fairFashion_wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.modal.fairFashion .dialog_content .frau {
    left: 30%;
    bottom: 28%;
    width: 17%;
    position: absolute;
    z-index: 5;
}
.modal.fairFashion .kleiderstange {
    position: absolute;
    bottom: 34%;
    left: 56%;
    width: 40%;
}
.modal.fairFashion .dialog_content .hose {
    left: 43.5%;
    bottom: 32%;
    width: 11.5%;
    position: absolute;
    animation: hose_bewegung_fairFashion 4s ease-in-out infinite !important;
    transform-origin: left center;
    animation-fill-mode: both !important;
    animation-delay: 6s;
}
@keyframes hose_bewegung_fairFashion {
    0%   { transform: rotate(-1deg); }
    20%  { transform: rotate(1deg); }
    60%  { transform: rotate(-1deg); }
    100% { transform: rotate(-1deg); }
}
.modal.fairFashion .dialog_content .kleiderhaufen {
    left: 58%;
    bottom: 24%;
    width: 27%;
    position: absolute;
}
.modal.fairFashion .dialog_content .kleider_01 {
    left: 67%;
    bottom: 27.6%;
    width: 6%;
    position: absolute;
}
.modal.fairFashion .dialog_content .kleider_02 {
    left: 63%;
    bottom: 28.5%;
    width: 8%;
    position: absolute;
}
.modal.fairFashion .dialog_content .kleider_03 {
    left: 68%;
    bottom: 27%;
    width: 9%;
    position: absolute;
}
.modal.fairFashion .dialog_content .kleider_04 {
    left: 66%;
    bottom: 29.7%;
    width: 9%;
    position: absolute;
}
@keyframes kleiderCycle {
    0%   { opacity: 0; }
    10%  { opacity: 1; }   /* erscheinen */
    60%  { opacity: 1; }   /* bleiben stehen */
    70%  { opacity: 0; }   /* alle gleichzeitig ausblenden */
    100% { opacity: 0; }   /* Pause */
}

.modal.fairFashion .dialog_content .kleider_01,
.modal.fairFashion .dialog_content .kleider_02,
.modal.fairFashion .dialog_content .kleider_03,
.modal.fairFashion .dialog_content .kleider_04 {
    position: absolute;
    opacity: 0;
    animation: kleiderCycle 12s linear infinite;
}

/* zeitversetztes Einblenden */
.modal.fairFashion .dialog_content .kleider_01 { animation-delay: 0s; }
.modal.fairFashion .dialog_content .kleider_02 { animation-delay: 1s; }
.modal.fairFashion .dialog_content .kleider_03 { animation-delay: 2s; }
.modal.fairFashion .dialog_content .kleider_04 { animation-delay: 3s; }

.modal.fairFashion .dialog_content .karton {
    left: 34%;
    bottom: 17%;
    width: 16%;
    position: absolute;
}
.modal.fairFashion .dialog_content .inhalt_01 {
    left: 38.9%;
    bottom: 22.6%;
    width: 7.8%;
    position: absolute;
    z-index: 10;
}
.modal.fairFashion .dialog_content .inhalt_02 {
    left: 37.9%;
    bottom: 22.6%;
    width: 8.8%;
    position: absolute;
    z-index: 11;
}
@keyframes inhaltCycle {
    0%   { opacity: 0; }
    10%  { opacity: 1; }   /* Inhalt sichtbar */
    40%  { opacity: 1; }   /* bleibt stehen */
    50%  { opacity: 0; }   /* ausblenden */
    100% { opacity: 0; }   /* Pause */
}
.modal.fairFashion .dialog_content .inhalt_01,
.modal.fairFashion .dialog_content .inhalt_02 {
    position: absolute;
    opacity: 0;
    animation: inhaltCycle 10s linear infinite; /* linear = keine Ease-Kurve */
}
.modal.fairFashion .dialog_content .inhalt_01 {
    animation-delay: 0s;
}
.modal.fairFashion .dialog_content .inhalt_02 {
    animation-delay: 2s;
}
.modal.fairFashion .dialog_content .oberteil {
    left: 30%;
    bottom: 43.5%;
    width: 10%;
    position: absolute;
    z-index: 10;
    animation: arm_bewegung_fairFashion 6s ease-in-out infinite !important;
    transform-origin: left center;
    animation-fill-mode: both !important;
}
@keyframes arm_bewegung_fairFashion {
    0%   { transform: rotate(-3deg); }
    20%  { transform: rotate(3deg); }
    60%  { transform: rotate(-3deg); }
    100% { transform: rotate(-3deg); }
}
.modal.fairFashion .dialog_content .spiegel {
    left: 12%;
    bottom: 31%;
    width: 17%;
    position: absolute;
}
@keyframes spiegelGlanz {
    0%   { opacity: 0; }
    20%  { opacity: 1; }   /* einblenden */
    50%  { opacity: 1; }   /* kurz stehen */
    70%  { opacity: 0; }   /* ausblenden */
    100% { opacity: 0; }   /* Pause */
}
.modal.fairFashion .dialog_content .streifen {
    left: 16%;
    bottom: 34%;
    width: 9%;
    position: absolute;
    opacity: 0;
    animation: spiegelGlanz 4s ease-in-out infinite;
}
.modal.fairFashion .dialog_content .paket {
    left: 34.5%;
    bottom: 20.5%;
    width: 17%;
    position: absolute;
}
.modal.fairFashion .dialog_content .teppich {
    left: 7%;
    bottom: 20.5%;
    width: 92%;
    position: absolute;
}
#fairFashion_popup_1 {
    left: 5%;
    bottom: 48%;
    width: 17%;
    position: absolute;
}
#fairFashion_popup_2 {
    left: 31%;
    bottom: 38%;
    width: 17%;
    position: absolute;
    z-index: 15;
}
#fairFashion_popup_3 {
    left: 44%;
    bottom: 40%;
    width: 17%;
    position: absolute;
}
#fairFashion_popup_4 {
    left: 34%;
    bottom: 17%;
    width: 17%;
    position: absolute;
    z-index: 15;
}
#fairFashion_popup_5 {
    left: 75%;
    bottom: 20%;
    width: 17%;
    position: absolute;
}
#fairFashion_popup_6 {
    left: 87%;
    bottom: 46%;
    width: 17%;
    position: absolute;
}
#fairFashion_info {
    left: 56%;
    bottom: 57%;
    width: 10%;
    position: absolute;
}

/* ---------- Positionerung Fleischkonsum ---------- */
.modal.fleisch .dialog_content{
    position: relative;
}
.fleisch_digitalisierung {
    left: 11%;
    width: 30.5%;
    position: relative;
    bottom: -3%;
}

.modal.fleisch .dialog_content .hocker {
    left: 7%;
    bottom: 23.5%;
    width: 13%;
    position: absolute;
    transform: scaleX(-1);
}
.modal.fleisch .dialog_content .hocker_rechts {
    left: 84.4%;
    bottom: 23.5%;
    width: 13%;
    position: absolute;
}
.modal.fleisch .dialog_content .fleisch_wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.modal.fleisch .dialog_content .fleisch_wrapper .frau {
    position: absolute;
    left: 10%;
    bottom: 22%;
    width: 18%;
    z-index: 1;
}
.modal.fleisch .dialog_content .fleisch_wrapper .hand {
    position: absolute;
    left: 23%;
    bottom: 42.5%;
    width: 8%;
    transform-origin: bottom left;
    animation: armSwing 4s ease-in-out infinite alternate;
}
@keyframes armSwing {
    0% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}
.modal.fleisch .dialog_content .fleisch_wrapper .hand_02 {
    position: absolute;
    left: 13.8%;
    bottom: 38.5%;
    width: 12%;
    z-index: 3;
}
.modal.fleisch .dialog_content .tisch {
    position: absolute;
    left: 17%;
    bottom: 20%;
    width: 70%;
    z-index: 1;
}
.modal.fleisch .dialog_content .dampf {
    left: 33.5%;
    bottom: 48.5%;
    width: 3%;
    position: absolute;
    animation: dampf_01 5s ease-in-out infinite !important;
    transform-origin: bottom center;
    animation-fill-mode: both !important;
    animation-delay: 2s;
}
@keyframes dampf_01 {
    0%   { transform: rotate(-4deg); }
    20%  { transform: rotate(4deg); }
    60%  { transform: rotate(-4deg); }
    100% { transform: rotate(-4deg); }
}
.modal.fleisch .dialog_content .dampf_01 {
    left: 42.5%;
    bottom: 50%;
    width: 3.2%;
    position: absolute;
    animation: dampf_02 3s ease-in-out infinite !important;
    transform-origin: bottom center;
    animation-fill-mode: both !important;
}
@keyframes dampf_02 {
    0%   { transform: rotate(-3deg); }
    20%  { transform: rotate(3deg); }
    60%  { transform: rotate(-3deg); }
    100% { transform: rotate(-3deg); }
}
.modal.fleisch .dialog_content .kuehlschrank {
    left: 74%;
    bottom: 35.8%;
    width: 20%;
    position: absolute;
}
.modal.fleisch .dialog_content .muelleimer_korpus {
    left: 73%;
    bottom: 18.5%;
    width: 15%;
    position: absolute;
}
.modal.fleisch .dialog_content .muelleimer_innen {
    left: 73%;
    bottom: 28%;
    width: 15%;
    position: absolute;
}
.modal.fleisch .dialog_content .muell_deckel {
    left: 73%;
    bottom: 30.5%;
    width: 15%;
    position: absolute;
}
.modal.fleisch .dialog_content .muell_01 {
    left: 78%;
    bottom: 26.5%;
    width: 6%;
    position: absolute;
}
.modal.fleisch .dialog_content .muell_02 {
    left: 81%;
    bottom: 27.5%;
    width: 6%;
    position: absolute;
}
.modal.fleisch .dialog_content .muell_03 {
    left: 74%;
    bottom: 27.5%;
    width: 7%;
    position: absolute;
}
.modal.fleisch .dialog_content .muell_01,
.modal.fleisch .dialog_content .muell_02,
.modal.fleisch .dialog_content .muell_03 {
    opacity: 0;
    position: absolute;
    animation: muellFade 4s ease-in-out infinite;
    animation-fill-mode: forwards;
}

.modal.fleisch .dialog_content .muell_01 { animation-delay: 0s; }
.modal.fleisch .dialog_content .muell_02 { animation-delay: 0.5s; }
.modal.fleisch .dialog_content .muell_03 { animation-delay: 1s; }

@keyframes muellFade {
    0%, 15% { opacity: 0; }       /* unsichtbar am Anfang */
    20%, 40% { opacity: 1; }      /* einblenden */
    40%, 60% { opacity: 1; }      /* kurz stehen bleiben */
    65%, 100% { opacity: 0; }     /* ausblenden */
}
#fleisch_popup_1 {
    left: 20%;
    bottom: 44%;
    width: 17%;
    position: absolute;
}
#fleisch_popup_2 {
    left: 38%;
    bottom: 44%;
    width: 17%;
    position: absolute;
}
#fleisch_popup_3 {
    left: 61%;
    bottom: 36%;
    width: 17%;
    position: absolute;
}
#fleisch_popup_4 {
    left: 68%;
    bottom: 54%;
    width: 17%;
    position: absolute;
}
#fleisch_popup_5 {
    left: 65%;
    bottom: 15%;
    width: 17%;
    position: absolute;
}
#fleisch_info {
    left: 30%;
    bottom: 36%;
    width: 9%;
    position: absolute;
}

/* ---------- Positionerung Abfall ---------- */
.modal.abfall.dialog_content{
    position: relative;
}
.modal.abfall .dialog_content .muell_wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.modal.abfall .dialog_content .frau {
    left: 69.5%;
    bottom: 25.8%;
    width: 22.5%;
    position: absolute;
}
.modal.abfall .dialog_content .arm {
    left: 65.3%;
    bottom: 39%;
    width: 8.5%;
    position: absolute;
    animation: arm_bewegung_abfall 6s ease-in-out infinite !important;
    transform-origin: right center;
    animation-fill-mode: both !important;
}
@keyframes arm_bewegung_abfall {
    0%   { transform: rotate(-3.5deg); }
    20%  { transform: rotate(3.5deg); }
    60%  { transform: rotate(-3.5deg); }
    100% { transform: rotate(-3.5deg); }
}
.modal.abfall .dialog_content .arm_tisch {
    left: 71.2%;
    bottom: 38.9%;
    width: 11.5%;
    position: absolute;
}
@keyframes flaschenCycle {
    0%   { opacity: 0; }
    10%  { opacity: 1; }   /* erscheinen */
    70%  { opacity: 1; }   /* sichtbar bleiben */
    90%  { opacity: 0; }   /* ausblenden */
    100% { opacity: 0; }   /* Pause */
}

.modal.abfall .dialog_content .flasche_01,
.modal.abfall .dialog_content .flasche_02,
.modal.abfall .dialog_content .flasche_03 {
    position: absolute;
    opacity: 0;
    animation: flaschenCycle 12s ease-in infinite;
}
.modal.abfall .dialog_content .flasche_01 {
    left: 24.4%;
    bottom: 29.8%;
    width: 4%;
    animation-delay: 0s;
}
.modal.abfall .dialog_content .flasche_02 {
    left: 18.7%;
    bottom: 29%;
    width: 6%;
    animation-delay: 1s;
}
.modal.abfall .dialog_content .flasche_03 {
    left: 21%;
    bottom: 29.8%;
    width: 5%;
    animation-delay: 2s;
}
.modal.abfall .dialog_content .banane {
    left: 11%;
    bottom: 33.6%;
    width: 5%;
    position: absolute;
    transform-origin: center bottom;
    animation: bananaWiggle 2s ease-in-out infinite;
}
@keyframes bananaWiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-6deg); }
    75%  { transform: rotate(-6deg); }
    100% { transform: rotate(0deg); }
}
.modal.abfall .dialog_content .flaschen {
    left: 48%;
    bottom: 19.8%;
    width: 15%;
    position: absolute;
}
.modal.abfall .dialog_content .iPad {
    left: 60.5%;
    bottom: 35.4%;
    width: 6.5%;
    position: absolute;

    animation: ipadBlink 6s ease-in-out infinite;
}
@keyframes ipadBlink {
    0%   { opacity: 0; }   /* aus */
    10%  { opacity: 1; }   /* einschalten */
    40%  { opacity: 1; }   /* bleibt an */
    50%  { opacity: 0; }   /* ausschalten */
    100% { opacity: 0; }   /* bleibt aus (Pause) */
}

.modal.abfall .dialog_content .muelleimer {
    left: 11%;
    bottom: 26.8%;
    width: 14.5%;
    position: absolute;
}
.modal.abfall .dialog_content .muelleimer_deckel {
    left: 11.4%;
    bottom: 37.8%;
    width: 14%;
    position: absolute;
}
.modal.abfall .dialog_content .pizzakarton {
    left: 13%;
    bottom: 44.5%;
    width: 21%;
    position: absolute;
}
.modal.abfall .dialog_content .becher {
    left: 14%;
    bottom: 45%;
    width: 4%;
    position: absolute;
}
.modal.abfall .dialog_content .teppich {
    left: 30%;
    bottom: 19.5%;
    width: 58%;
    position: absolute;
}
.modal.abfall .dialog_content .tisch {
    left: 38%;
    bottom: 24%;
    width: 40%;
    position: absolute;
}
.modal.abfall .dialog_content .tuete {
    left: 41%;
    bottom: 21.8%;
    width: 14%;
    position: absolute;
}
.modal.abfall .dialog_content .tuete_innen {
    left: 19.4%;
    bottom: 31.8%;
    width: 10%;
    position: absolute;
}
.modal.abfall .dialog_content .muelltuete {
    left: 19%;
    bottom: 24.4%;
    width: 11%;
    position: absolute;
}
#abfall_popup_1 {
    left: 9%;
    bottom: 47%;
    width: 17%;
    position: absolute;
}
#abfall_popup_2 {
    left: 39%;
    bottom: 35%;
    width: 17%;
    position: absolute;
}
#abfall_popup_3 {
    left: 53%;
    bottom: 40%;
    width: 17%;
    position: absolute;
}
#abfall_popup_4 {
    left: 55%;
    bottom: 30%;
    width: 17%;
    position: absolute;
}
#abfall_popup_5 {
    left: 75%;
    bottom: 38%;
    width: 17%;
    position: absolute;
}
#abfall_popup_6 {
    left: 46%;
    bottom: 14%;
    width: 17%;
    position: absolute;
}
#abfall_info {
    left: 24%;
    bottom: 25%;
    width: 10.5%;
    position: absolute;
}

/* ---------- Positionerung Streaming ---------- */
.modal.streaming .dialog_content .teppich {
    left: 3%;
    bottom: 22.8%;
    width: 85%;
    position: absolute;
}
.modal.streaming .dialog_content .note_01 {
    left: 61%;
    bottom: 62.8%;
    width: 3%;
    position: absolute;
}
.modal.streaming .dialog_content .note_02 {
    left: 65%;
    bottom: 64.8%;
    width: 3%;
    position: absolute;
}
.modal.streaming .dialog_content .note_03 {
    left: 64%;
    bottom: 67.8%;
    width: 2%;
    position: absolute;
}
.modal.streaming .dialog_content .box_links {
    left: 50%;
    bottom: 19.8%;
    width: 11%;
    position: absolute;
}
@keyframes noteCycle {
    0%   { opacity: 0; }
    10%  { opacity: 1; }   /* erscheint */
    50%  { opacity: 1; }   /* bleibt */
    70%  { opacity: 0; }   /* zusammen ausblenden */
    100% { opacity: 0; }   /* Pause */
}

.modal.streaming .dialog_content .note_01,
.modal.streaming .dialog_content .note_02,
.modal.streaming .dialog_content .note_03 {
    position: absolute;
    opacity: 0;
    animation: noteCycle 8s linear infinite;
    animation-delay: 2s;
}

.modal.streaming .dialog_content .note_01 { animation-delay: 0s; }
.modal.streaming .dialog_content .note_02 { animation-delay: 1s; }
.modal.streaming .dialog_content .note_03 { animation-delay: 2s; }

.modal.streaming .dialog_content .box_rechts {
    left: 57%;
    bottom: 18.8%;
    width: 11%;
    position: absolute;
}
.modal.streaming .dialog_content .fernseher_aus {
    left: 16%;
    bottom: 58%;
    width: 30%;
    position: absolute;
}
@keyframes tvOnOff {
    0%   { opacity: 0; }   /* aus */
    10%  { opacity: 0; }   /* an */
    20% {opacity: 1;}
    60%  { opacity: 1; }   /* bleibt an */
    70%  { opacity: 0; }   /* ausschalten */
    100% { opacity: 0; }   /* Pause (aus) */
}
.modal.streaming .dialog_content .fernseher_an {
    left: 17%;
    bottom: 58.8%;
    width: 28%;
    position: absolute;
    opacity: 0;
    animation: tvOnOff 10s linear infinite;
}
.modal.streaming .dialog_content .frau {
    left: 9%;
    bottom: 23.8%;
    width: 46%;
    position: absolute;
}
.modal.streaming .dialog_content .handy {
    left: 31%;
    bottom: 23.8%;
    width: 8%;
    position: absolute;
}
.modal.streaming .dialog_content .insta {
    left: 39%;
    bottom: 23.8%;
    width: 5%;
    position: absolute;
}
.modal.streaming .dialog_content .mail {
    left: 33.4%;
    bottom: 25.5%;
    width: 4.5%;
    position: absolute;
}
.modal.streaming .dialog_content .tikTok {
    left: 33%;
    bottom: 28.8%;
    width: 5%;
    position: absolute;
}
.modal.streaming .dialog_content .snapchat {
    left: 38%;
    bottom: 27.8%;
    width: 5%;
    position: absolute;
}
@keyframes socialCycle {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    50%  { opacity: 1; }
    70%  { opacity: 0; }
    100% { opacity: 0; }
}

.modal.streaming .dialog_content .insta,
.modal.streaming .dialog_content .mail,
.modal.streaming .dialog_content .snapchat,
.modal.streaming .dialog_content .tikTok {
    position: absolute;
    opacity: 0;
    animation: socialCycle 10s linear infinite;
    animation-delay: 4s;
}

/* Reihenfolge: Insta → Mail → Snapchat → TikTok */
.modal.streaming .dialog_content .insta    { animation-delay: 0s; }
.modal.streaming .dialog_content .mail     { animation-delay: 1s; }
.modal.streaming .dialog_content .snapchat { animation-delay: 2s; }
.modal.streaming .dialog_content .tikTok   { animation-delay: 3s; }

.modal.streaming .dialog_content .tuete {
    left: 55%;
    bottom: 21.8%;
    width: 11%;
    position: absolute;
}
.modal.streaming .dialog_content .mann {
    left: 53%;
    bottom: 27.8%;
    width: 47%;
    position: absolute;
}
#streaming_popup_1 {
    left: 8%;
    bottom: 64%;
    width: 17%;
    position: absolute;
}
#streaming_popup_2 {
    left: 55%;
    bottom: 55%;
    width: 17%;
    position: absolute;
}
#streaming_popup_3 {
    left: 70%;
    bottom: 44.5%;
    width: 17%;
    position: absolute;
}
#streaming_popup_4 {
    left: 58%;
    bottom: 23%;
    width: 17%;
    position: absolute;
}
#streaming_popup_5 {
    left: 28%;
    bottom: 17.5%;
    width: 17%;
    position: absolute;
}
#streaming_info {
    left: -3%;
    bottom: 28%;
    width: 30%;
    position: absolute;
}


/* ---------- Positionerung ENDE ---------- */
.modal .dialog_content .text_illu_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem; /* Abstand zwischen Text und Bild */
}

.modal .dialog_content .text_illu_flex .text {
    flex: 1 1 70%;
    overflow: hidden;
}
.modal .dialog_content .text_illu_flex .illustration {
    flex: 0 1 20%;
    position: relative;
    aspect-ratio: 1 / 1; /* oder weglassen, falls du freies Seitenverhältnis willst */
}

.modal .dialog_content .text_illu_flex .illustration img {
    position: relative;
    width: 80%;
    height: auto;
    object-fit: contain;
}

/* ---------- Vorlesen Buttons ---------- */
.vorlesen {
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 9%;
    cursor: pointer;
    padding: 0;
    font-size: 0;
}
.vorlesen .icon,
.vorlesen .speaking_icon {
    z-index: 10;
    position: relative;
}
.vorlesen .speaking_icon {
    display: none;
}
.vorlesen.speaking .icon {
    display: none;
}
.vorlesen.speaking .speaking_icon {
    display: block;
    animation: rotating 2s linear infinite;
}
@keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vorlesen.speaking::before {
    content: 'II';
    font-weight: 900;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--font-size) * 1.2);
}

.vorlesen:hover::after {
    width: calc(var(--font-size) * 12);
    font-size: calc(var(--font-size) * 1);
}

.vorlesen::after {
    transition: width 0.5s, font-size 0.3s;
    content: 'vorlesen lassen';
    color: #fff;
    display: flex;
    justify-content: center;
    margin-left: 0;
    align-items: center;
    font-weight: 600;
    position: absolute;
    right: 40%;
    top: 9%;
    height: 83%;
    border-radius: 10000px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: calc(var(--font-size) * 0);
    z-index: 5;
    border: 1px solid #fff;
    box-sizing: border-box;
    clip-path: polygon(-6px -4px, 100% 0px, 100% 100%, 100% 100%, -1.17% 115.36%);
    font-size: 0%;
}
.vorlesen::after .blau{
    background: var(--farbe-blau);
}
.vorlesen::after .gruen{
    background: var(--farbe-gruen);
}
.vorlesen::after .orange{
    background: var(--farbe-orange);
}
.vorlesen::after .lila{
    background: var(--farbe-lila);
}

/* ---------- Vorlesen ENDE ---------- */


/* ======================================================= */
/* ==================== MOBILE Styles ==================== */
/* ======================================================= */

@media(max-width: 1000px) {

    .mobile .modal.infopopup .dialog_content {
        width: 90%;
        height: 95%;
        border-radius: calc(var(--font-size) * 2);
        overflow: hidden;
    }

    .mobile .infopopup h3 {
        font-size: calc(var(--font-size) * 1.4) !important;
        margin-top: 2%;
    }

    .mobile .modal .dialog_content .scrollbar {
        width: 1.3%;
        border-width: calc(var(--font-size) * 0.22);
        padding: 0.14%;
    }

    .mobile .modal .dialog_content p,
    .mobile .modal .dialog_content li {
        font-size: calc(var(--font-size) * 1.4);
        line-height: 1.3;
    }


    .mobile .modal.contentpopup .popup_titel {
        font-size: calc(var(--font-size) * 2);
    }

    .mobile .modal.aufzaehlung_check li::before,
    .mobile .modal.ausrufezeichen li::before,
    .mobile #popup_fahrrad ul li::before,
    .mobile .modal.aufzaehlung_check li::before,
    .mobile .modal.aufzaehlung_kleidung li::before,
    .mobile .modal.aufzaehlung_wolke li::before {
        width: 1.1rem;
        height: 1.1rem;
    }

    .mobile .modal.ausrufezeichen li,
    .mobile .modal.aufzaehlung_check li,
    .mobile .modal.aufzaehlung_kleidung li,
    .mobile .modal.aufzaehlung_wolke li {
        position: relative;
        margin-bottom: 0.7rem;
        padding-left: 1.8rem;
    }

    .mobile .infografik_wrapper .modal h3 {
        font-size: calc(var(--font-size) * 1.5);
        margin-bottom: 2%;
    }
    .modal .dialog_content {
        width: 96%;
        margin: 0 auto;
    }

    .modal.fairFashion .dialog_content .oberteil {
        bottom: 44.5%;
    }
    .modal.fleisch .dialog_content .fleisch_wrapper .hand {
        bottom: 44%;
        left: 21%;
    }
    .modal.fleisch .dialog_content .fleisch_wrapper .frau {
        left: 8%;
    }
    .modal.fleisch .dialog_content .hocker {
        left: 4.7%;
        bottom: 23%;
    }
    .modal.abfall .dialog_content .iPad {
        bottom: 36%;
    }
    .modal.abfall .dialog_content .arm_tisch {
        bottom: 39.9%;
    }
    .modal.abfall .dialog_content .arm {
        bottom: 40%;
    }


}