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

html {
    background-image: url(bilder/grafiken/hg_widescreen.svg);
    background-position: center top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: #fceadc;
}

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

    /* Farben der Bereiche */
    --kriterien-hauptfarbe-hex: #B44D00;
    --behinderungen-hauptfarbe-hex: #235551;
    --formate-hauptfarbe-hex: #013F77;

    --kriterien-hauptfarbe-rgb: rgba(180, 77, 0, 0.77);
    --behinderungen-hauptfarbe-rgb: rgba(0, 71, 62, 0.77);
    --formate-hauptfarbe-rgb: rgba(2, 32, 68, 0.77);

    --kriterien-light-hex: #FFF3C9;
    --behinderungen-light-hex: #EAF7F6;
    --formate-light-hex: #E3EEFF;

}

.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 .popup_rechte_seite,
.infografik_wrapper .modal .dialog_content .info_wrap_wrap,
.infografik_wrapper .modal .dialog_content .infotext_wrapper,
.infografik_wrapper #popups .popup_window .popup_content,
.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,
.infografik_wrapper .modal .dialog_content .popup_rechte_seite::-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;
}

.hintergrund img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
.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: 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;
}

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: hidden;
    width: 100%;
    height: 100%;
    --before-height: 56.25%;
}

.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: 100%;
    height: auto;
    left: 43%;
    padding: 0 2%;
    box-sizing: border-box;
    bottom: 5.8%;
    z-index: 14;
}

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

.infografik_wrapper #infografik-titel h2 {
    font-family: 'Ebert';
    color: #951250;
    text-transform: none;
    font-size: 80%;
    font-weight: 500;
    text-align: left;
    margin: 0;
    margin-top: 0.8%;
    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 h3.zwischenueberschrift_rechts {
    margin-bottom: 4.5%;
    margin-top: 4.5%;
}


.hintergrund {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    overflow: hidden;
}
.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;
}

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%;
}

/* Hover der Hauptinseln */
.schaltflaechen button.button.hauptinseln .grafik_hauptinsel_untergrund,
.schaltflaechen button.button.hauptinseln .grafik_hauptinsel,
.schaltflaechen button.button.hauptinseln .pin_wrapper {
    transition: all .3s ease-in-out;
}

.schaltflaechen button.button.hauptinseln:hover .grafik_hauptinsel_untergrund {
    filter: brightness(90%) contrast(120%) saturate(130%);
}
.schaltflaechen button.button.hauptinseln:hover .grafik_hauptinsel {
    filter: brightness(108%) contrast(102%);
    z-index: -1;
    position: relative;
}
.schaltflaechen button.button.hauptinseln .grafik_hauptinsel {
    z-index: -1;
    position: relative;
}
.schaltflaechen button.button.hauptinseln:hover .pin_wrapper {
    transform: scale(1.2);
}
.schaltflaechen button.button.hauptinseln .pin_beschriftung,
.schaltflaechen button.button.hauptinseln .pin_wrapper > * {
    z-index: 1;
    position: relative;
}
.schaltflaechen button.button.hauptinseln .pin_wrapper::before {
    position: absolute;
    top: 10%;
    left: -30%;
    width: 160%;
    height: 160%;
    content: '';
    display: none;
    background-image: radial-gradient(closest-side, rgba(255,255,255,.8) 0%, rgba(255,255,255,.0) 100%);
    z-index: 0;
}
.schaltflaechen button.button.hauptinseln:hover .pin_wrapper::before {
    display: block;
}

/* Hover der Hauptinseln ENDE */

.schaltflaechen button.button.hauptinseln#insel_kriterien {
    left: 0.8%;
    top: 41.5%;
}
.schaltflaechen button.button.hauptinseln#insel_kriterien .grafik_hauptinsel_untergrund {
    position: absolute;
    z-index: -1;
    width: 102%;
    left: 0.2%;
    top: 4%;
}
.schaltflaechen button.button.hauptinseln#insel_einschraenkungen {
    left: 35.5%;
    top: 23.4%;
}
.schaltflaechen button.button.hauptinseln#insel_einschraenkungen .grafik_hauptinsel_untergrund {
    position: absolute;
    z-index: -1;
    width: 102%;
    left: -0.5%;
    top: 5%;
}
.schaltflaechen button.button.hauptinseln#insel_formate {
    left: 70%;
    top: 40%;
}
.schaltflaechen button.button.hauptinseln#insel_formate .grafik_hauptinsel_untergrund {
    position: absolute;
    z-index: -1;
    width: 102%;
    left: -1%;
    top: 3%;
}
/*Inseln Barrieren*/
.schaltflaechen button.button.barriere_inseln .grafik_barriere_pin,
.schaltflaechen button.button.barriere_inseln .grafik_barriere_schild {
    transition: opacity .5s ease-in-out !important;
    transition-delay: 1.5s !important;
}
.schaltflaechen button.button.barriere_inseln.beseitigt .grafik_barriere_pin,
.schaltflaechen button.button.barriere_inseln.beseitigt .grafik_barriere_schild {
    opacity: 0;
}

.schaltflaechen button.button.barriere_inseln#barriere_1 {
    width: 11%;
    left: 30.5%;
    top: 12.5%;
}
.schaltflaechen button.button.barriere_inseln#barriere_1 .grafik_barriere_person {
    position: absolute;
    width: 30%;
    left: 17.5%;
    top: -25%;
}
.schaltflaechen button.button.barriere_inseln#barriere_1 .grafik_barriere_schild {
    position: absolute;
    width: 36%;
    left: 54.5%;
    top: 2%;
}
.schaltflaechen button.button.barriere_inseln#barriere_1 .grafik_barriere_pin {
    position: absolute;
    width: 50%;
    left: 47.5%;
    top: -41%;
}
.schaltflaechen button.button.barriere_inseln#barriere_2 {
    width: 16.5%;
    left: 56.3%;
    top: 13.8%;
}
.schaltflaechen button.button.barriere_inseln#barriere_2 .grafik_barriere_person {
    position: absolute;
    width: 17%;
    left: 30.5%;
    top: -2%;
}
.schaltflaechen button.button.barriere_inseln#barriere_2 .grafik_barriere_schild {
    position: absolute;
    width: 27%;
    left: -7.5%;
    top: -9%;
}
.schaltflaechen button.button.barriere_inseln#barriere_2 .grafik_barriere_pin {
    position: absolute;
    width: 35%;
    left: -2.5%;
    top: -45%;
}
.schaltflaechen button.button.barriere_inseln#barriere_3 {
    width: 17.8%;
    left: 52.4%;
    top: 55.5%;
}
.schaltflaechen button.button.barriere_inseln#barriere_3 .grafik_barriere_person {
    position: absolute;
    width: 15%;
    left: 66.5%;
    top: -20%;
}
.schaltflaechen button.button.barriere_inseln#barriere_3 .grafik_barriere_infopoint {
    position: absolute;
    width: 17%;
    left: 50.5%;
    top: 6%;
}
.schaltflaechen button.button.barriere_inseln#barriere_3 .grafik_barriere_pin {
    position: absolute;
    width: 30%;
    left: 20%;
    top: -19%;
}

.schaltflaechen button.button.barriere_inseln .grafik_barriere_pin {
    transform-origin: 35% 78% ;
    animation: pin_wiggle 4s infinite ease-in-out;
    animation-direction: alternate;
}

@keyframes pin_wiggle {
    from { transform: rotate(-7deg); }

    to { transform: rotate(7deg); }
}
.schaltflaechen button.button.barriere_inseln#barriere_3 .grafik_barriere_schild {
    position: absolute;
    width: 16%;
    left: 19%;
    top: 23%;
}
.schaltflaechen button.button.barriere_inseln#barriere_4 {
    width: 14.8%;
    left: 26.8%;
    top: 64.1%;
}
.schaltflaechen button.button.barriere_inseln#barriere_4 .grafik_barriere_person {
    position: absolute;
    width: 45%;
    left: 23.5%;
    top: -31%;
}
.schaltflaechen button.button.barriere_inseln#barriere_4 .grafik_barriere_schild {
    position: absolute;
    width: 32%;
    left: 71%;
    top: 14%;
}
.schaltflaechen button.button.barriere_inseln#barriere_4 .grafik_barriere_pin {
    position: absolute;
    width: 39%;
    left: 67%;
    top: -21%;
}
.schaltflaechen button.button.barriere_inseln .grafik_barriere_insel,
.schaltflaechen button.button.barriere_inseln .grafik_barriere_pin,
.schaltflaechen button.button.barriere_inseln .grafik_barriere_infopoint,
.schaltflaechen button.button.barriere_inseln .grafik_barriere_person {
    transition: all .2s ease-in-out;
}
.schaltflaechen button.button.barriere_inseln .grafik_barriere_infopoint,
.schaltflaechen button.button.barriere_inseln .grafik_barriere_person {
    transform-origin: 50% 100%;
}

/* Hover der Barriere Inseln */
.schaltflaechen button.button.barriere_inseln:hover .grafik_barriere_insel {
    filter: contrast(110%) brightness(110%);
}
.schaltflaechen button.button.barriere_inseln:hover .grafik_barriere_person,
.schaltflaechen button.button.barriere_inseln:hover .grafik_barriere_infopoint,
.schaltflaechen button.button.barriere_inseln:hover .grafik_barriere_pin {
    transform: scale(1.2) !important;
}




.schaltflaechen button.button.hauptinseln .hauptinsel_pin {
    position: absolute;
    width: 33%;
    left: 34%;
    top: -44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 85%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_wrapper,
.schaltflaechen button.button .barrieren_content_wrapper,
.schaltflaechen button.button.hauptinseln .button_content_wrapper {
    width: 100%;
    position: relative;
}




.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_beschriftung {
    border-radius: 100px;
    background-color: var(--kriterien-hauptfarbe-hex);
    padding: 2% 10%;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.schaltflaechen button.button.hauptinseln#insel_kriterien .hauptinsel_pin .pin_beschriftung {
    background-color: var(--kriterien-hauptfarbe-hex);
}

.schaltflaechen button.button.hauptinseln#insel_einschraenkungen .hauptinsel_pin .pin_beschriftung {
    background-color: var(--behinderungen-hauptfarbe-hex);
}

.schaltflaechen button.button.hauptinseln#insel_formate .hauptinsel_pin .pin_beschriftung {
    background-color: var(--formate-hauptfarbe-hex);
}


/* Wichtig für die Animation Switch */
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin-switch.visible {
    display: block;
    animation: fadeIn 1s ease-in-out;
    animation-fill-mode: both;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin-switch.flipout {
    animation: fadeOut 1s ease-in-out;
    animation-fill-mode: both;
}

.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien {
    position: absolute;
    width: 64%;
    top: 11%;
    left: 15.5%;
    display: none;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_birne {
    width: 50%;
    left: 21%;
    top: 19%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_wahrnehmbar {
    top: 26%;
    width: 54%;
    left: 19%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_bedienbar {
    width: 31%;
    top: 18%;
    left: 30.5%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_robustheit {
    width: 49%;
    top: 18%;
    left: 21%
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_ansprechbarkeit {
    width: 49%;
    top: 18%;
    left: 21%
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_dokument {
    width: 37%;
    left: 26%;
    top: 17%;

}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_kriterien#pin_info {
    width: 20%;
    left: 35%;
    top: 16%;
}

.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_einschraenkungen {
    position: absolute;
    width: 42%;
    top: 10%;
    left: 23.5%;
    display: none;
}

.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_einschraenkungen#pin_ohr {
    width: 31%;
    left: 32%;
    top: 18%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_einschraenkungen#pin_gehirn {
    top: 16%;
    left: 24%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_einschraenkungen#pin_auge {
    top: 26%;
    width: 54%;
    left: 19%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_einschraenkungen#pin_geld {
    top: 20%;
    left: 22%;
    width: 50%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_einschraenkungen#pin_hand {
    width: 31%;
    top: 18%;
    left: 30.5%;
}

.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate {
    position: absolute;
    width: 47%;
    top: 17%;
    left: 23%;
    display: none;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_videos {
    width: 40%;
    top: 20%;
    left: 26%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_infografiken {
    top: 22%;
    width: 50%;
    left: 21%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_audios {
    width: 22%;
    left: 36%;
    top: 20%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_webseiten {
    width: 54%;
    top: 21%;
    left: 19%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_veranstaltungen {
    width: 52%;
    top: 23%;
    left: 21%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_elearning {
    width: 54%;
    top: 21%;
    left: 19%;
}
.schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_icon_formate#pin_extended {
    top: 21%;
    width: 49%;
    left: 22%;
}

/* 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;
    position: relative !important;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding-left: 0;
    overflow: visible;
}

/*.modal.kriterien {
    background: var(--kriterien-hauptfarbe-rgb);
}
.modal.behinderungen {
    background: var(--behinderungen-hauptfarbe-rgb);
}
.modal.formate {
    background: var(--formate-hauptfarbe-rgb);
}*/



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

.modal.kriterien:not(.contentpopup) .dialog_content {
    background: rgba(255, 237, 174, 0.58);
    border-radius: 0 5000px 5000px 0;
    width: 55%;
    overflow: visible;
}

.modal.kriterien.contentpopup .dialog_content,
.modal.digitalebarriere.contentpopup .dialog_content{
    background-color: var(--kriterien-light-hex);
}
.modal.behinderungen.contentpopup .dialog_content {
    background-color: var(--behinderungen-light-hex);
}
.modal.formate.contentpopup .dialog_content {
    background-color: var(--formate-light-hex);
}

.modal.contentpopup .dialog_content,
.modal.digitalebarriere .dialog_content{
    background-image: url("bilder/grafiken/leiterplatten_popup_hg.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.modal.behinderungen:not(.contentpopup) .dialog_content {
    position: relative;
    width: 77%;
    margin: 0 auto;
    background: rgba(131, 197, 194, 0.59);
    border-radius: 0 0 5000px 5000px;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal.formate:not(.contentpopup) .dialog_content {
    background: rgba(159, 197, 253, 0.59);
    border-radius: 5000px 0 0 5000px;
    width: 55%;
    margin-left: 45%;
    justify-content: flex-end;
    overflow: visible;
}

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

.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.kriterien .dialog_content .popup_linke_seite {
    border-right: calc(var(--font-size) * 0.25) solid var(--kriterien-hauptfarbe-hex);
}
.modal.behinderungen .dialog_content .popup_linke_seite {
    border-right: calc(var(--font-size) * 0.25) solid var(--behinderungen-hauptfarbe-hex);
}
.modal.formate .dialog_content .popup_linke_seite {
    border-right: calc(var(--font-size) * 0.25) solid var(--formate-hauptfarbe-hex);
}

.modal .dialog_content .popup_linke_seite,
.modal .dialog_content .popup_rechte_seite {
    width: 50%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(var(--font-size) * 2.2);
    box-sizing: border-box;
    gap: 3%;
    overflow: scroll;
}
.modal .dialog_content .popup_linke_seite {
    overflow: hidden;
}

.modal .dialog_content .popup_linke_seite h1 {
    line-height: 1;
}
.modal .dialog_content .popup_linke_seite h1 small {
    font-size: 60%;
}

.modal .dialog_content .popup_rechte_seite {
    justify-content: flex-start;
}

.modal .dialog_content .popup_rechte_seite::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5%;
}
.modal .dialog_content .popup_rechte_seite::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5%;
}

.modal.formate .dialog_content .popup_rechte_seite::before {
    background: linear-gradient(90deg, var(--formate-light-hex), var(--formate-light-hex) );
}

.modal .dialog_content .scrollbar {
    height: 82%;
    position: absolute;
    width: 0.9%;
    background-color: transparent;
    border-width: calc(var(--font-size) * 0.12);
    border-color: #000;
    border-style: solid;
    border-radius: 500px;
    top: 12%;
    right: 1%;
    padding: 0.1%;
    box-sizing: border-box;
    opacity: 0.5;
    z-index: 10000;
}
.modal .dialog_content .scrollbar .handle {
    height: 20px;
    width: 100%;
    background-color: #000;
    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,
.modal.formate .dialog_content .scrollbar {
    border-color: var(--formate-hauptfarbe-hex);
}
.modal.infopopup .scrollbar .handle,
.modal.formate .dialog_content .scrollbar .handle {
    background-color: var(--formate-hauptfarbe-hex);
}
.modal.kriterien .dialog_content .scrollbar {
    border-color: var(--kriterien-hauptfarbe-hex);
}
.modal.kriterien .dialog_content .scrollbar .handle {
    background-color: var(--kriterien-hauptfarbe-hex);
}
.modal.behinderungen .dialog_content .scrollbar {
    border-color: var(--behinderungen-hauptfarbe-hex);
}
.modal.behinderungen .dialog_content .scrollbar .handle {
    background-color: var(--behinderungen-hauptfarbe-hex);
}

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



.modal .dialog_content .popup_linke_seite button,
.modal .dialog_content .popup_rechte_seite button {
    width: 70%;
    border: calc(var(--font-size) * 0.19) solid var(--kriterien-hauptfarbe-hex);
    border-radius: 500px;
    padding: calc(var(--font-size) * 0.7) calc(var(--font-size) * 0.9);
    color: var(--kriterien-hauptfarbe-hex);
    font-weight: 600;
    font-size: 120%;
    position: relative;
    background-color: var(--kriterien-light-hex);
    transition: all .1s ease-in-out;
}

.modal .dialog_content .popup_linke_seite button:hover,
.modal .dialog_content .popup_rechte_seite button:hover,
.modal .dialog_content .popup_linke_seite button.openside.active,
.modal .dialog_content .popup_rechte_seite button.openside.active {
    color: var(--kriterien-light-hex);
    background-color: var(--kriterien-hauptfarbe-hex);
}

.modal.behinderungen .dialog_content .popup_linke_seite button,
.modal.behinderungen .dialog_content .popup_rechte_seite button {
    border: calc(var(--font-size) * 0.19) solid var(--behinderungen-hauptfarbe-hex);
    color: var(--behinderungen-hauptfarbe-hex);
    background-color: var(--behinderungen-light-hex);
}
.modal.behinderungen .dialog_content .popup_linke_seite button:hover,
.modal.behinderungen .dialog_content .popup_rechte_seite button:hover,
.modal.behinderungen .dialog_content .popup_linke_seite button.openside.active,
.modal.behinderungen .dialog_content .popup_rechte_seite button.openside.active {
    color: var(--behinderungen-light-hex);
    background-color: var(--behinderungen-hauptfarbe-hex);
}

.modal.formate .dialog_content .popup_linke_seite button:not(.checkliste),
.modal.formate .dialog_content .popup_rechte_seite button {
    border: calc(var(--font-size) * 0.19) solid var(--formate-hauptfarbe-hex);
    color: var(--formate-hauptfarbe-hex);
    background-color: var(--formate-light-hex);
}

.modal.formate .dialog_content .popup_linke_seite button:not(.checkliste):hover,
.modal.formate .dialog_content .popup_rechte_seite button:hover,
.modal.formate .dialog_content .popup_linke_seite button.openside.active,
.modal.formate .dialog_content .popup_rechte_seite button.openside.active {
    color: var(--formate-light-hex);
    background-color: var(--formate-hauptfarbe-hex);
}

.modal .dialog_content .popup_linke_seite button.openside.active::after {
    content: '';
    height: calc(var(--font-size)*0.25);
    background-color: #000;
    width: 50%;
    right: calc(-49% - (var(--font-size)*0.19));
    top: calc(50% - (var(--font-size)*0.25) / 2);
    position: absolute;
    left: unset;
    animation: ausfahren 0.3s ease-in-out;
    -webkit-animation: ausfahren 0.3s ease-in-out;
}
@keyframes ausfahren {
    from {right: 0; width: 0%;}
    to { right: calc(-49% - (var(--font-size)*0.19)); width: 50%; }
}
.modal.behinderungen .dialog_content .popup_linke_seite button.openside.active::after {
    background-color: var(--behinderungen-hauptfarbe-hex);
}
.modal.kriterien .dialog_content .popup_linke_seite button.openside.active::after {
    background-color: var(--kriterien-hauptfarbe-hex);
}
.modal.formate .dialog_content .popup_linke_seite button.openside.active::after {
    background-color: var(--formate-hauptfarbe-hex);
}

.modal.formate .dialog_content .popup_linke_seite button.checkliste.generate_pdf {
    position: absolute;
    left: 0;
    bottom: -0.5%;
    width: 18%;
    background: transparent;
    border: 0 !important;
    padding: 0 !important;
}


.modal .dialog_content .popup_rechte_seite .popup_rechts_inhalt,
.modal .dialog_content .popup_linke_seite .links_textcontent {
    width: 98%;
    margin: 0 auto 0 0;
    height: auto;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    color: var(--kriterien-hauptfarbe-hex);
    font-size: 120%;

}

.modal.kriterien .dialog_content .popup_rechte_seite .popup_rechts_inhalt,
.modal.kriterien .dialog_content .popup_linke_seite .links_textcontent,
.modal.kriterien .dialog_content .popup_linke_seite {
    color: var(--kriterien-hauptfarbe-hex);
}

.modal.behinderungen .dialog_content .popup_rechte_seite .popup_rechts_inhalt,
.modal.behinderungen .dialog_content .popup_linke_seite .links_textcontent,
.modal.behinderungen .dialog_content .popup_linke_seite {
    color: var(--behinderungen-hauptfarbe-hex);
}

.modal.formate .dialog_content .popup_rechte_seite .popup_rechts_inhalt,
.modal.formate .dialog_content .popup_linke_seite .links_textcontent,
.modal.formate .dialog_content .popup_linke_seite {
    color: var(--formate-hauptfarbe-hex);
}

.modal .dialog_content .popup_rechte_seite .popup_rechts_inhalt.visible,
.modal .dialog_content .popup_linke_seite .links_textcontent {
    display: flex;
    margin: auto;
}

.modal .dialog_content .popup_rechte_seite .popup_rechts_inhalt.visible.schmal{
    max-width: 75%;
}

.modal .dialog_content .popup_rechte_seite .popup_rechts_bild,
.modal .dialog_content .popup_linke_seite .links_textcontent .icon {
    width: 17%;
    margin-top: 0;
    margin-bottom: 5%;
    align-self: center;
}
.modal .dialog_content .popup_linke_seite .icon {
    width: 17%;
    margin-top: 0;
    margin-bottom: 0%;
    align-self: center;
}

.modal .dialog_content .popup_linke_seite .icon + h1 {
    margin-top: 1%;
    margin-bottom: 3%;
}

.modal .dialog_content .popup_linke_seite .links_textcontent {
    text-align: left;
    justify-content: center;
    margin: 0 auto;
    background-color: var(--kriterien-light-hex);
    border-radius: calc(var(--font-size) * 0.6);
    padding: 5% 4%;
    box-sizing: border-box;
}
.modal .dialog_content .popup_linke_seite .links_textcontent h2 {
    font-size: 180%;
    margin-bottom: 5%;
}

.modal .dialog_content ul.liste_mit_checkbox li,
.modal .dialog_content .popup_rechte_seite ul li {
   list-style-type: none;
    position: relative;
}
.modal .dialog_content ul.liste_mit_checkbox li::before,
.modal .dialog_content .popup_rechte_seite ul li::before{
    content: '';
    background-image: url("bilder/grafiken/checkbox_formate.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    width: calc(var(--font-size) * 1.6);
    display: inline-block;
    position: absolute;
    height: calc(var(--font-size) * 1.6);
    left: calc(var(--font-size) * -2.4);
    top: calc(var(--font-size) * 0.2);

}

.modal.kriterien .dialog_content ul.liste_mit_checkbox li::before {
    background-image: url("bilder/grafiken/checkbox_kriterien.svg");
}
.modal.behinderungen .dialog_content ul.liste_mit_checkbox li::before {
    background-image: url("bilder/grafiken/checkbox_barrieren.svg");
}

::backdrop {    /* Modal Backdrop */
    opacity: 0;
    pointer-events: none;
}

#infopopup::backdrop {
    background-color: rgba(0, 77, 145, 0.4);
    opacity: 1;
}

.mobile .contentpopup::backdrop {
    opacity: 1;
}

.modal.formate.open::backdrop {
    opacity: 1;
    background: var(--formate-hauptfarbe-rgb);
}
.modal.behinderungen.open::backdrop {
    opacity: 1;
    background: var(--behinderungen-hauptfarbe-rgb);
}
.modal.kriterien.open::backdrop {
    opacity: 1;
    background: var(--kriterien-hauptfarbe-rgb);
}

.modal.digitalebarriere.open::backdrop {
    opacity: 1;
    background: var(--kriterien-light-hex);
}

.modal.contentpopup.kriterien::backdrop {
    background-color: var(--kriterien-light-hex);
}
.modal.contentpopup.behinderungen::backdrop {
    background-color: var(--behinderungen-light-hex);
}
.modal.contentpopup.formate::backdrop {
    background-color: var(--formate-light-hex);
}

.modal.formate:not(.contentpopup) .dialog_content::before {
    content: '';
    position: absolute;
    right: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(159, 197, 253, 0.59);
}
.modal.kriterien:not(.contentpopup) .dialog_content::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 237, 174, 0.58);
}

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

.modal.behinderungen .closemodal_wrapper,
.modal.formate .closemodal_wrapper{
    flex-direction: row-reverse;
}

.closemodal_wrapper .popup_titel {
    font-size: 320%;
    color: #fff;
    font-family: 'Ebert Headline', Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.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,
.contentpopup .closemodal {
    position: absolute;
    right: 2%;
    top: 3%;
    margin-right: 0;
    width: 2.3%;
}

.contentpopup.kriterien .closemodal svg .closemodal_path {
    stroke: var(--kriterien-hauptfarbe-hex);
}
.contentpopup.behinderungen .closemodal svg .closemodal_path {
    stroke: var(--behinderungen-hauptfarbe-hex);
}
.contentpopup.formate .closemodal svg .closemodal_path,
.infopopup .closemodal svg .closemodal_path {
    stroke: var(--formate-hauptfarbe-hex);
}

.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;
}

.modal.behinderungen .closemodal,
.modal.formate .closemodal {
    margin-right: unset;
    margin-left: 3%;
}

.modal .hauptinsel_popup {
    width: 62%;
    position: relative;
}

.modal.formate .hauptinsel_popup {
    margin-right: 5%;
}

.modal.behinderungen .hauptinsel_popup {
    margin-top: -25%;
    width: 50%;
}

.modal.kriterien .hauptinsel_popup {
    width: 65%;
    margin-left: 3%;
}

.modal .hauptinsel_popup .grafik_hauptinsel {
    width: 100%;
}

.modal .hauptinsel_popup .grafik_pin {
    width: 24%;
    position: absolute;
    top: -7%;
    left: 38%;
}

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

.infopopup .infobox {
    color: #fff;
    padding: 1.6% 3%;
    background-color: var(--formate-hauptfarbe-hex);
    border-radius: calc(var(--font-size) * 1.3);
    box-sizing: border-box;
    margin-top: 1%;
}

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


/* Buttons Kriterien*/
button.button.openmodal.bubbles[name="popup_kriterien_verstaendlichkeit"] {
    top: 12%;
    left: 54%;
}
button.button.openmodal.bubbles[name="popup_kriterien_bedienbarkeit"] {
    top: 5%;
    left: 27%;
}
button.button.openmodal.bubbles[name="popup_kriterien_wahrnehmbarkeit"] {
    top: 32%;
    left: 75%;
}
button.button.openmodal.bubbles[name="popup_kriterien_robustheit"] {
    top: 57%;
    left: 70%;
}
button.button.openmodal.bubbles[name="popup_kriterien_ansprechbarkeit"] {
    top: 72%;
    left: 50%;
}

/* Buttons Behinderungen */
button.button.openmodal.bubbles[name="popup_einschraenkungen_motorisch"] {
    top: 66%;
    left: 44%;
}
button.button.openmodal.bubbles[name="popup_einschraenkungen_kognitiv"] {
    top: 56%;
    left: 62%;
}
button.button.openmodal.bubbles[name="popup_einschraenkungen_visuell"] {
    top: 39%;
    left: 77%;
}
button.button.openmodal.bubbles[name="popup_einschraenkungen_auditiv"] {
    top: 56%;
    left: 25%;
}
button.button.openmodal.bubbles[name="popup_einschraenkungen_strukturell"] {
    top: 39%;
    left: 9%;
}

/* Buttons Formate */
button.button.openmodal.bubbles[name="popup_formate_videos"] {
    top: 12%;
    left: 25%;
}
button.button.openmodal.bubbles[name="popup_formate_infografiken"] {
    top: 5%;
    left: 76%;
}
button.button.openmodal.bubbles[name="popup_formate_audios"] {

    top: 3.5%;
    left: 50%;
}
button.button.openmodal.bubbles[name="popup_formate_webseiten"] {

    top: 35%;
    left: 10%;
}
button.button.openmodal.bubbles[name="popup_formate_onlineveranstaltungen"] {

    top: 61%;
    left: 22%;
}
button.button.openmodal.bubbles[name="popup_formate_elearning"] {

    top: 74%;
    left: 50%;
}
button.button.openmodal.bubbles[name="popup_formate_extendedreality"] {

    top: 71%;
    left: 76%;
}
button.button.openmodal.bubbles {
    align-items: center;
}

.modal.behinderungen  button.button.openmodal.bubbles {
    width: 12%;
}

button.button.openmodal.bubbles .button_beschriftung {
    background: var(--kriterien-hauptfarbe-hex);
    margin-top: -7%;
    border-radius: 50px;
    display: inline-block;
    padding: 4% 14%;
    text-align: center;
    font-weight: 600;
    color: #000;
    font-size: 105%;
    word-wrap: break-word;
}
.modal.kriterien button.button.openmodal.bubbles .button_beschriftung {
    color: var(--kriterien-hauptfarbe-hex);
    background: var(--kriterien-light-hex);
}
.modal.behinderungen button.button.openmodal.bubbles .button_beschriftung {
    color: var(--behinderungen-hauptfarbe-hex);
    background: var(--behinderungen-light-hex);
}
.modal.formate button.button.openmodal.bubbles .button_beschriftung {
    color: var(--formate-hauptfarbe-hex);
    background: var(--formate-light-hex);
}

/* --- 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;
}
.formate .accordion.hinweis .accordion_title {
    color: var(--formate-hauptfarbe-hex);
}
.kriterien .accordion.hinweis .accordion_title {
    color: var(--kriterien-hauptfarbe-hex);
}
.behinderungen .accordion.hinweis .accordion_title {
    color: var(--behinderungen-hauptfarbe-hex);
}


/* Icon Links */
.accordion.hinweis .accordion_title:before {
    content: '';
    background-image: url('bilder/grafiken/gluehbirne_tipp_formate.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: calc(var(--font-size) * 2.6);
    height: calc(var(--font-size) * 2.6);
    margin-right: 2%;
    position: relative;
    display: inline-block;
    margin-top: -1%;
}

.formate .accordion.hinweis .accordion_title:before {
    background-image: url('bilder/grafiken/gluehbirne_tipp_formate.svg');
}
.kriterien .accordion.hinweis .accordion_title:before {
    background-image: url('bilder/grafiken/gluehbirne_tipp_kriterien.svg');
}
.behinderungen .accordion.hinweis .accordion_title:before {
    background-image: url('bilder/grafiken/gluehbirne_tipp_behinderungen.svg');
}

/* Pfeil rechts */
.accordion.hinweis .accordion_title:after {
    content: '';
    background-image: url('bilder/grafiken/pfeil_rechts_formate.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;
}
.formate .accordion.hinweis .accordion_title:after {
    background-image: url('bilder/grafiken/pfeil_rechts_formate.svg');
}
.kriterien .accordion.hinweis .accordion_title:after {
    background-image: url('bilder/grafiken/pfeil_rechts_kriterien.svg');
}
.behinderungen .accordion.hinweis .accordion_title:after {
    background-image: url('bilder/grafiken/pfeil_rechts_behinderungen.svg');
}

.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);
}

.formate .accordion.hinweis .ui-accordion-content {
    color: var(--formate-hauptfarbe-hex);
}
.kriterien .accordion.hinweis .ui-accordion-content {
    color: var(--kriterien-hauptfarbe-hex);
}
.behinderungen .accordion.hinweis .ui-accordion-content {
    color: var(--behinderungen-hauptfarbe-hex);
}

/* Beispiele Behinderungen */
.modal.beispiele-interaktiv h1 {
    font-size: calc(var(--font-size) * 2.4);
    margin: 0;
}

.modal.beispiele-interaktiv h1 + p {
    margin: 0.3% 0 1% 0;
    font-size: 150%;
}

.beispiele_wrapper,
.quiz_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    height: 97%;
    margin: auto;
    color: var(--behinderungen-hauptfarbe-hex);
}
.quiz_wrapper {
    color: var(--formate-hauptfarbe-hex);
}
.quiz_wrapper h1 {
    color: #b50101;
}

.beispiele_wrapper_inner,
.quiz_wrapper_inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    align-items: center;
    position: relative;
    gap: 5%;
}
#behinderungen_beispiel_strukturell .beispielfenster{
    width: 100%;
    height: auto;
    border: 2px solid var(--behinderungen-hauptfarbe-hex);
    background-color: #fff;
    border-radius: calc(var(--font-size) * 1.5);
    padding: calc(var(--font-size) * 1.5) calc(var(--font-size) * 1.5 ) calc(var(--font-size) * 0.1) calc(var(--font-size) * 1.5 );
    box-sizing: border-box;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}
#behinderungen_beispiel_strukturell .beispielfenster::before {
    content: '';
    display: block;
    width: 100%;
    height: calc(var(--font-size) * 1.6);
    background-color: var(--behinderungen-hauptfarbe-hex);
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: calc(var(--font-size) * 1.3);
    border-top-right-radius: calc(var(--font-size) * 1.3);
}
.beispielfenster behinderungen_beispiel_visuell {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: calc(var(--font-size) * 1.5);
    padding: calc(var(--font-size) * 3) calc(var(--font-size) * 1.5);
    box-sizing: border-box;
}
.beispielfenster {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: calc(var(--font-size) * 1.5);
    padding: calc(var(--font-size) * 3) calc(var(--font-size) * 1.5);
    box-sizing: border-box;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}
#behinderungen_beispiel_auditiv .beispielfenster  {
    margin-top: 5%;
}

.auswahlfelder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3%;
    width: 100%;
    height: auto;
    position: relative;
}
.auswahlfelder button.button {
    position: relative !important;
    border-radius: 500px;
    border: calc(var(--font-size) * 0.25) solid var(--behinderungen-hauptfarbe-hex);
    padding: 2% 3.5% 2% 5%;
    margin-bottom: 3%;
    color: var(--behinderungen-hauptfarbe-hex);
    font-weight: 600;
    font-size: 140%;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.auswahlfelder button.button:hover {
    background-color: var(--behinderungen-hauptfarbe-hex);
    color: var(--behinderungen-light-hex);
}
.auswahlfelder button.button .checkbox_button {
    height: calc(var(--font-size) *1.6);
    width: calc(var(--font-size) *1.6);
    border-radius: 500px;
    border: calc(var(--font-size) * 0.18) solid var(--behinderungen-hauptfarbe-hex);
    background-color: var(--behinderungen-light-hex);
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 4%;
}

.auswahlfelder button.button.checked_correct {
    background-color: var(--behinderungen-hauptfarbe-hex);
    color: var(--behinderungen-light-hex);
}
.auswahlfelder button.button.checked_correct .checkbox_button {
    border-color: var(--behinderungen-light-hex);
    background-color: var(--behinderungen-hauptfarbe-hex);
}
.auswahlfelder button.button.checked_correct .checkbox_button svg {
    margin-left: 9%;
    width: 110%;
    margin-top: -17%;
}
.auswahlfelder button.button.checked_correct .checkbox_button svg path {
    fill: var(--behinderungen-light-hex);
}
.auswahlfelder button.button.checked_wrong{
    background-color: #d70000;
    border-color: #d70000;
    color: #fff;
}
.auswahlfelder button.button.checked_wrong .checkbox_button {
    border-color: #fff;
    background-color: #d70000;
}
.auswahlfelder button.button.checked_wrong .checkbox_button svg {
    margin-left: 3%;
    width: 95%;
    margin-top: -13%;
}
.auswahlfelder button.button.checked_wrong .checkbox_button svg path {
    fill: #fff;
}

.auswahlfelder button.button.clicked .checkbox_button {
    animation: tada 0.7s linear;
    -webkit-animation: tada 0.7s linear;
}

.beispiele-interaktiv .beispielfenster div[status="0"] [value="1"],
.beispiele-interaktiv .beispielfenster div[status="1"] [value="0"] {
    display: none;
}

/* Beispiele Behinderungen visuell */
.visuell_bsp_1{
    display: block;
    width: 100%;
}
.visuell_bsp_2 {
    display: block;
    width: 100%;
    margin-top: 4%;
}
.visuell_bsp_3 {
    display: block;
    width: 90%;
    margin-top: 4%;
}
.visuell_bsp_4 {
    display: block;
    width: 80%;
    margin-top: 4%;
}
.visuell_bsp_5 {
    display: block;
    width: 100%;
    margin-top: 4%;
}
/* Beispiele Behinderungen auditiv */
.auditiv_bsp_1 {
    position: absolute;
    top: 38%;
    width: 24.6%;
    left: 68%;
}
.auditiv_bsp_2 {
    position: absolute;
    top: 20%;
    width: 16%;
    left: 12%;
}
.auditiv_bsp_3 {
    position: absolute;
    top: 77%;
    width: 92%;
    left: 4%;
}
.auditiv_bsp_3 > img {
    position: relative;
    z-index: 1;
}
.auditiv_bsp_3:after {
    content: '';
    background-color: #fff;
    width: 108.4%;
    bottom: -20%;
    position: absolute;
    display: block;
    height: 90%;
    z-index: 0;
    left: -4%;
    border-radius: 0 0 calc(var(--font-size) * 1.5) calc(var(--font-size) * 1.5);
}
.auditiv_bsp_4 {
    position: absolute;
    top: 77.6%;
    width: 5%;
    left: 28%;
}
.auditiv_bsp_5 {
    position: absolute;
    top: 60.8%;
    width: 71%;
    left: 15.5%;
}
/* Beispiele Behinderungen sprachlich/kognitiv */
.sprachlich_bsp_1{
    display: block;
    width: 95%;
    margin-left: 0%;
}
.sprachlich_bsp_1_1{
    display: block;
    width: 46%;
}

.sprachlich_bsp_3 {
    display: block;
    color: black;
    margin-top: 3%;
    color: black;
    font-size: 110%;
}
.sprachlich_bsp_2,
.sprachlich_bsp_4 {
    display: block;
    margin-top: 5%;
    color: black;
    font-size: 110%;
}
.sprachlich_bsp_2 {
    margin-top: 3%;
}
.sprachlich_bsp_2 h2,
.sprachlich_bsp_4 h2 {
    font-family: 'Ebert Headline', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 115%;
    margin-bottom: 3%;
}


/* Beispiele Behinderungen Strukturell */
.strukturell_bsp_1 {
    display: block;
    margin-bottom: 4%;
    color: black;
    font-size: 110%;
}
.strukturell_bsp_2 {
    display: block;
    width: 50%;
    margin-bottom: 4%;
    min-height: calc(var(--font-size) * 3);
}
.strukturell_bsp_2_1 {
    display: block;
    width: 155%;
}
.strukturell_bsp_3 {
    display: block;
    color: white;
    margin-bottom: 3%;
    margin-top: 2%;
    font-size: 110%;
}
.strukturell_bsp_3 p {
    background: var(--behinderungen-hauptfarbe-hex);
    padding: 2% 3%;
    border-radius: calc(var(--font-size) * 0.6);
}
.strukturell_bsp_4 {
    display: block;
    color: black;
    font-size: 110%;
}
.strukturell_produkt {
    display: block;
    width: 35%;
    margin-top: 2%;
}
/* Beispiele Behinderungen Motorisch */
.motorisch_bsp_1 {
    position: absolute;
    width: 40%;
    top: 76%;
    left: 28%;
}
.motorisch_bsp_1_1 {
    position: absolute;
    width: 125%;
    top: -290%;
    left: -28%;
}
.motorisch_bsp_2 {
    position: absolute;
    width: 30%;
    top: 48%;
    left: 38%;
}
.motorisch_bsp_3 {
    position: absolute;
    width: 38%;
    top: 36%;
    left: 58%;
}
.motorisch_maus {
    position: absolute;
    width: 10%;
    top: 78%;
    left: 75%;
}
.motorisch_hintergrund {
    display: block;
    width: 85%;
    margin-left: 7%;
    margin-bottom: 18%;
    margin-top: -4%;
}

/* Quizzes */
.avatar {
    position: absolute;
    bottom: 2%;
    left: 4%;
    width: 9%;
    pointer-events: none;
    z-index: 0;
}
.avatar .huetchen {
    position: absolute;
    width: 65%;
    bottom: 3%;
    left: 90%;
    transition: transform .3s ease-in;
    transition-delay: 0.5s;
}
.avatar .huetchen_1 {
    position: absolute;
    width: 170%;
    bottom: 1%;
    left: 63%;
    transition: transform .2s ease-in;
    transition-delay: 0.5s;
}
.avatar .huetchen.beseitigt {
    transform: rotate(110deg);
    transform-origin: 48% 71%;
}
.avatar .huetchen_1.beseitigt {
    transform: rotateX(-138deg) rotateY(0deg) rotateZ(61deg) skewX(-14deg) translateY(-10%);
    transform-origin: 48% 71%;
}

.quiz_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    height: 95%;
    margin: auto;
    margin-bottom: 3%;
    color: var(--formate-hauptfarbe-hex);
    z-index: 1;
}
.quiz_wrapper h1 {
    color: #b50101;
    font-size: 250%;
    margin-bottom: 0;
    margin-top: 2%;
}
.quiz_wrapper_inner {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    height: 100%;
    align-items: stretch;
    position: relative;
    gap: 5%;
}
.quiz_wrapper_inner.visible {
    display: flex;
    animation: fadeInUp .7s ease-in-out;
}
.quiz_wrapper_inner.fadeout {
    animation: fadeOutUp .7s ease-in-out;
    animation-fill-mode: both;
}

.quiz_feedback_wrapper,
.quiz_feedback_wrapper .feedback {
    display: none;
}

.quiz_feedback_wrapper.visible {
    margin-top: 2%;
    padding-top: 2%;
    border-top: calc(var(--font-size) * 0.15) solid var(--formate-hauptfarbe-hex);
}

.quiz_feedback_wrapper.visible,
.quiz_feedback_wrapper .feedback.visible {
    display: block;
    font-size: 90%;
    text-align: left;
    font-weight: 400;
}
.quiz_feedback_wrapper .feedback[status="correct"] strong {
    color: var(--behinderungen-hauptfarbe-hex);
}
.quiz_feedback_wrapper .feedback[status="wrong"] strong {
    color: #b50101;
}

.quiz_frage {
    background-color: #fff;
    border-radius: calc(var(--font-size) * 0.9);
    padding: 4% 10%;
    text-align: center;
    font-size: 180%;
    font-weight: 600;
}
.quiz_frage.small {
    padding: 2.5% 6%;
}
.quiz_frage span {
    transition: all .5s ease-in-out;
}
.quiz_frage span.small {
    font-size: 80%;
    font-weight: 600;
}

.quiz_antworten_wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    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: 48% !important;
    box-sizing: border-box;
    margin: 1%;
    padding: 1.2% 1.8% 1.2% 2.5%;
    border-radius: calc(var(--font-size) * 2);
    border: calc(var(--font-size) * 0.2) solid var(--formate-hauptfarbe-hex);
    font-weight: 600;
    font-size: 125%;
    transition: all 0.2s ease-in-out;
    position: relative !important;
    color: var(--formate-hauptfarbe-hex);
    transition: all 0.1s ease-in-out;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--kriterien-light-hex);
}

.quiz_antworten_wrapper button.button.auswerten,
.quiz_antworten_wrapper button.button.nextstep,
.wrapper_auswertung button.button.closequiz {
    margin: 5% auto 0 auto;
    width: 30% !important;
    background-color: var(--formate-hauptfarbe-hex);
    color: var(--formate-light-hex);
    justify-content: center;
}
.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 {
    width: 5%;
    margin-left: 10%;
    transition: transform .2s ease-in-out;
}
.quiz_antworten_wrapper button.button.nextstep svg path {
    fill: #fff;
}

html:not(.mobile) .quiz_antworten_wrapper button.button[status="open"]:hover {
    background-color: var(--formate-hauptfarbe-hex);
    color: var(--formate-light-hex);
}

.quiz_antworten_wrapper button.button.auswerten:hover,
.quiz_antworten_wrapper button.button.nextstep:hover {
    color: var(--formate-hauptfarbe-hex);
    background-color: var(--kriterien-light-hex);
}
.quiz_antworten_wrapper button.button.nextstep:hover svg {
    transform: translateX(40%);
}
.quiz_antworten_wrapper button.button.nextstep:hover svg path {
    fill: var(--formate-hauptfarbe-hex);
}

.quiz_antworten_wrapper button.button .checkbox_button {
    height: calc(var(--font-size) *1.6);
    width: calc(var(--font-size) *1.6);
    border-radius: 500px;
    border: calc(var(--font-size) * 0.18) solid var(--formate-hauptfarbe-hex);
    background-color: transparent;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 4%;
}
html:not(.mobile) .quiz_antworten_wrapper button.button[status="open"]:hover .checkbox_button {
    background-color: var(--formate-hauptfarbe-hex);
    border-color: var(--formate-light-hex);
}

.quiz_antworten_wrapper button.button[status="selected"] {
    background-color: var(--formate-hauptfarbe-hex);
    color: var(--formate-light-hex);
}
.quiz_antworten_wrapper button.button[status="selected"] .checkbox_button {
    border-color: var(--formate-light-hex);
    background-color: var(--formate-hauptfarbe-hex);
}

.quiz_antworten_wrapper button.button[status="correct"] {
    background-color: var(--behinderungen-hauptfarbe-hex);
    border-color: var(--behinderungen-hauptfarbe-hex);
    color: var(--behinderungen-light-hex);
}
.quiz_antworten_wrapper button.button[status="correct"] .checkbox_button {
    border-color: var(--behinderungen-light-hex);
    background-color: var(--behinderungen-hauptfarbe-hex);
}
.quiz_antworten_wrapper button.button[status="selected"] .checkbox_button svg,
.quiz_antworten_wrapper button.button[status="correct"] .checkbox_button svg {
    margin-left: 9%;
    width: 110%;
    margin-top: -17%;
}
.quiz_antworten_wrapper button.button[status="correct"] .checkbox_button svg path {
    fill: var(--behinderungen-light-hex);
}
.quiz_antworten_wrapper button.button[status="selected"] .checkbox_button svg path {
    fill: var(--formate-light-hex);
}
.quiz_antworten_wrapper button.button[status="wrong"] {
    background-color: #d70000;
    border-color: #d70000;
    color: #fff;
}
.quiz_antworten_wrapper button.button[status="wrong"] .checkbox_button {
    border-color: #fff;
    background-color: #d70000;
}
.quiz_antworten_wrapper button.button[status="wrong"] .checkbox_button svg {
    margin-left: 3%;
    width: 95%;
    margin-top: -13%;
}
.quiz_antworten_wrapper button.button[status="wrong"] .checkbox_button svg path {
    fill: #fff;
}
.quiz_antworten_wrapper button.button[status="wrong"] .checkbox_button,
.quiz_antworten_wrapper button.button[status="correct"] .checkbox_button{
    animation: tada 0.7s linear;
    -webkit-animation: tada 0.7s linear;
}

.quiz_antworten_wrapper button.button[status="disabled_correct"] {
    background-color: var(--behinderungen-hauptfarbe-hex);
    border-color: var(--behinderungen-hauptfarbe-hex);
    color: var(--behinderungen-light-hex);
}
.quiz_antworten_wrapper button.button[status="disabled_correct"] .checkbox_button {
    border-color: var(--behinderungen-light-hex);
    background-color: var(--behinderungen-hauptfarbe-hex);
}
.quiz_antworten_wrapper button.button[status="disabled_correct"] .checkbox_button svg {
    margin-left: 3%;
    width: 95%;
    margin-top: -13%;
}
.quiz_antworten_wrapper button.button[status="disabled_correct"] .checkbox_button svg path {
    fill: #fff;
}


.auswertung_bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 13%;
    padding: 4% 3%;
    background-color: #fff;
    border-radius: calc(var(--font-size) * 1.5);
    height: auto;
    box-sizing: border-box;
}
.wrapper_auswertung h2 {
    text-align: center;
    font-size: 260%;
    font-weight: 600;
    margin-bottom: 3%;
}
.wrapper_auswertung .auswertung_text,
.wrapper_auswertung .auswertung_text + p {
    text-align: center;
    font-size: 170%;
    margin: 0;
}
.wrapper_auswertung .count_wrong,
.wrapper_auswertung .auswertung_correct,
.wrapper_auswertung .auswertung_all {
    font-weight: 600;
}
p.hinweis_falsche {
    margin-top: 1%;
}

.wrapper_auswertung .button.closequiz {
    margin-top: 2% !important;
}

@media(max-width: 1000px) {

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

    .mobile .modal.infopopup .dialog_content .info_wrap_wrap {
        overflow: scroll;
    }

    .mobile .infopopup h3 {
        font-size: 170% !important;
        margin-top: 2%;
    }
    .mobile .infopopup .closemodal {
        right: 7.3%;
        top: 7.1%;
        width: 2.2% !important;
    }


    .mobile .modal:not(.beispiele-interaktiv) .dialog_content p,
    .modal:not(.beispiele-interaktiv) .dialog_content li {
        font-size: calc(var(--font-size) * 1.7);
    }

    .mobile .modal .dialog_content .popup_linke_seite .icon + h1 {
        margin-top: -4%;
        font-size: calc(var(--font-size) * 2.5);
        line-height: 0.8;
    }
    .mobile .modal .dialog_content .popup_linke_seite .icon + h1 small {
        margin-top: 1%;
    }

    .mobile .modal .dialog_content .popup_linke_seite, .modal .dialog_content .popup_rechte_seite {
        padding: calc(var(--font-size) * 1.0);
        gap: 1.7%;
    }

    .mobile .modal .dialog_content .popup_linke_seite button, .modal .dialog_content .popup_rechte_seite button {
        width: 80%;
        padding: calc(var(--font-size) * 0.5) calc(var(--font-size) * 0.9);
        font-size: 180%;
    }

    .mobile .modal .dialog_content .popup_linke_seite {
        width: 40%;
        padding-bottom: calc(var(--font-size) * 4.0);
    }

    .mobile .modal .dialog_content .popup_linke_seite .icon {
        width: 26%;
        margin-top: -10%;
        margin-bottom: 2%;
    }

    .mobile .modal .dialog_content .popup_rechte_seite {
        width: 58%;
        padding-left: calc(var(--font-size) * 0.5);
        padding-right: calc(var(--font-size) * 2.5);
    }

    .mobile .modal.formate .dialog_content .popup_linke_seite button.checkliste.generate_pdf {
        bottom: -0.9%;
        width: 22%;
    }

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

    .mobile button.button.openmodal.bubbles {
        width: 18%;
    }

    .mobile button.button.openmodal.bubbles .button_beschriftung {
        margin-top: -12%;
        padding: 2% 10%;
        font-size: 120%;
        line-height: 1;
    }

    .mobile .modal.formate:not(.contentpopup) .dialog_content {
        width: 60%;
        margin-left: 40%;
    }

    .mobile .closemodal_wrapper .popup_titel {
        font-size: 430%;
    }

    .mobile .kriterien:not(.contentpopup) .closemodal_wrapper .popup_titel {
        max-width: 50%;
        text-align: right;
    }

    .mobile .closemodal {
        width: 2.5%;
    }
    .mobile .contentpopup .closemodal {
       right: 0.5%;
    }

    .mobile .schaltflaechen button.button.hauptinseln .hauptinsel_pin {
        width: 45%;
        left: 28%;
        top: -36%;
    }

    .mobile .schaltflaechen button.button.hauptinseln .hauptinsel_pin .pin_beschriftung {
        font-size: 130%;
        margin-top: -9%;
    }

    .mobile .infografik_wrapper #infografik-titel h1 {
        font-size: 130%;
    }

    .mobile .infografik_wrapper #infografik-titel {
        left: 38%;
        bottom: 3.7%;
    }

    .mobile .modal.behinderungen .dialog_content .popup_linke_seite {
        gap: 3%;
    }

    .mobile .modal.kriterien:not(.contentpopup) .dialog_content {
        overflow: visible;
    }

    .mobile .modal.behinderungen:not(.contentpopup) .dialog_content {
        overflow: visible;
    }

    .mobile .modal .dialog_content .popup_linke_seite .links_textcontent {
        justify-content: flex-start;
        padding: 3% 0%;
        overflow: visible;
    }

    .mobile .infografik_wrapper h3 {
        font-size: 200%;
    }

    .mobile .modal.kriterien .dialog_content .popup_linke_seite {
        padding-bottom: calc(var(--font-size) * 0.0);
    }

    .mobile .modal.behinderungen .dialog_content .popup_linke_seite button {
        width: 90%;
    }
    .mobile .quiz_frage {
        padding: 2% 7%;
        font-size: 220%;
    }

    .mobile .quiz_wrapper_inner {
        width: 100%;
        gap: 2%;
    }

    .mobile .quiz_antworten_wrapper button.button.quiz_antwort, .quiz_antworten_wrapper button.button.nextstep, .wrapper_auswertung button.button.closequiz, .quiz_antworten_wrapper button.button.auswerten {
        margin: 0.5%;
        padding: 1.0% 1.8% 1.0% 2.2%;
        border-radius: calc(var(--font-size) * 3);
        font-size: 170%;
    }

    .mobile .quiz_antworten_wrapper button.button .checkbox_button {
        height: calc(var(--font-size) *1.9);
        width: calc(var(--font-size) *1.9);
        border-width: calc(var(--font-size) * 0.21);
    }

    .mobile .quiz_antworten_wrapper button.button[status="selected"] .checkbox_button svg, .quiz_antworten_wrapper button.button[status="correct"] .checkbox_button svg {
        margin-left: -3%;
        width: 140%;
        margin-top: -40%;
    }

    .mobile .quiz_wrapper {
        width: 96%;
        margin-bottom: auto;
    }

    .mobile .quiz_frage.small {
        padding: 1.8% 4%;
    }

    .mobile .quiz_feedback_wrapper.visible {
        margin-top: 1%;
        padding-top: 1%;
    }

    .mobile .quiz_antworten_wrapper button.button.auswerten, .quiz_antworten_wrapper button.button.nextstep, .wrapper_auswertung button.button.closequiz {
        margin: 1% auto 0 auto;
        padding: 0.8% 1.8% 0.8% 2.2%;
    }

    .mobile .quiz_wrapper + .avatar {
        display: none;
    }

    .mobile .wrapper_auswertung .auswertung_text,
    .mobile .wrapper_auswertung .auswertung_text + p,
    .mobile .wrapper_auswertung .auswertung_text .hinweis_falsche {
        font-size: calc(var(--font-size) * 2.5) !important;
    }

    .mobile .wrapper_auswertung h2 {
        font-size: 330%;
    }

    .mobile .quiz_wrapper h1 {
        color: #b50101;
        font-size: 300%;
        margin-top: 0%;
    }

    .mobile button.infobutton {
        left: calc(var(--font-size) * 9);
        top: calc(var(--font-size) * 3);
    }
}