* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    font-size: 62.5%;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #bbecf1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #66c5cf;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #0d8d9b;
}

#body-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(247, 190, 137, 0.705);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}

.dialog,
.dialog2,
.dialog3,
.dialog4,
.dialog5,
.dialog6,
.dialog7,
.dialog8,
.dialog9 {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(252, 164, 106, 0.719);
    color: black;
    border-radius: 0px;
    box-shadow: 8px 8px 16px rgba(221, 112, 10, 0.39);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
    z-index: 5;
    overflow-y: scroll;
}

#body-overlay.sichtbar,
.dialog.sichtbar,
.dialog2.sichtbar,
.dialog3.sichtbar,
.dialog4.sichtbar,
.dialog5.sichtbar,
.dialog6.sichtbar,
.dialog7.sichtbar,
.dialog8.sichtbar,
.dialog9.sichtbar {
    opacity: 1;
    pointer-events: auto;
}

#loslegen-dialog,
#loslegen-dialog2,
#loslegen-dialog3,
#loslegen-dialog4,
#loslegen-dialog5,
#loslegen-dialog6,
#loslegen-dialog7,
#loslegen-dialog8,
#loslegen-dialog9 {
    width: 85%;
    max-height: 80%;
}

.dialog-schliessen-button,
.dialog-schliessen-button2,
.dialog-schliessen-button3,
.dialog-schliessen-button4,
.dialog-schliessen-button5,
.dialog-schliessen-button6,
.dialog-schliessen-button7,
.dialog-schliessen-button8,
.dialog-schliessen-button9 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 32px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

/* Optionales Styling für den Dialog der Landing Page */
#loslegen-dialog,
#loslegen-dialog2,
#loslegen-dialog3,
#loslegen-dialog4,
#loslegen-dialog5,
#loslegen-dialog6,
#loslegen-dialog7,
#loslegen-dialog8,
#loslegen-dialog9 {
    background-color: #f3bd6ce5;
    box-shadow: inset 0px 0px 10px #f37f12, 2px 2px 4px rgba(255, 255, 255, 0.1), 8px 8px 16px rgba(255, 255, 255, 0.1);
    border: 5px solid #fcaa2e;
}

#loslegen-dialog .dialog-schliessen-button,
#loslegen-dialog2 .dialog-schliessen-button2,
#loslegen-dialog3 .dialog-schliessen-button3,
#loslegen-dialog4 .dialog-schliessen-button4,
#loslegen-dialog5 .dialog-schliessen-button5,
#loslegen-dialog6 .dialog-schliessen-button6,
#loslegen-dialog7 .dialog-schliessen-button7,
#loslegen-dialog8 .dialog-schliessen-button8,
#loslegen-dialog9 .dialog-schliessen-button9 {
    color: #008C9B
}

.dialog h2,
.dialog2 h2,
.dialog3 h2,
.dialog4 h2,
.dialog5 h2,
.dialog6 h2,
.dialog7 h2,
.dialog8 h2,
.dialog9 h2 {
    color: rgba(146, 2, 134, 0.788);
    font-weight: bolder;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.7rem;
    padding-bottom: 5px;

}

.dialog p,
.dialog2 p,
.dialog3 p,
.dialog4 p,
.dialog5 p,
.dialog6 p,
.dialog7 p,
.dialog8 p,
.dialog9 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    text-align: justify;
    hyphens: auto;
    padding: 5px;
}

div.dialog#loslegen-dialog ul.text,
div.dialog2#loslegen-dialog2 ul.text,
div.dialog3#loslegen-dialog3 ul.text,
div.dialog4#loslegen-dialog4 ul.text,
div.dialog5#loslegen-dialog5 ul.text,
div.dialog6#loslegen-dialog6 ul.text,
div.dialog7#loslegen-dialog7 ul.text,
div.dialog8#loslegen-dialog8 ul.text,
div.dialog9#loslegen-dialog9 ul.text {
    list-style-type: none;
}

div.dialog#loslegen-dialog ul.text>li,
div.dialog2#loslegen-dialog2 ul.text>li,
div.dialog3#loslegen-dialog3 ul.text>li,
div.dialog4#loslegen-dialog4 ul.text>li,
div.dialog5#loslegen-dialog5 ul.text>li,
div.dialog6#loslegen-dialog6 ul.text>li,
div.dialog7#loslegen-dialog7 ul.text>li,
div.dialog8#loslegen-dialog8 ul.text>li,
div.dialog9#loslegen-dialog9 ul.text>li {
    list-style-type: none;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: italic;
    font-size: 1.3rem;
    padding: 0px 10px 10px 5px;
}

div.dialog#loslegen-dialog ul.text>li ion-icon,
div.dialog2#loslegen-dialog2 ul.text>li ion-icon,
div.dialog3#loslegen-dialog3 ul.text>li ion-icon,
div.dialog4#loslegen-dialog4 ul.text>li ion-icon,
div.dialog5#loslegen-dialog5 ul.text>li ion-icon,
div.dialog6#loslegen-dialog6 ul.text>li ion-icon,
div.dialog7#loslegen-dialog7 ul.text>li ion-icon,
div.dialog8#loslegen-dialog8 ul.text>li ion-icon,
div.dialog9#loslegen-dialog9 ul.text>li ion-icon {
    font-size: 1.3rem;
    color: #920286c5;
}

@media screen and (min-width: 992px) {
    #body-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(247, 190, 137, 0.705);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease-in-out;
    }

    .dialog,
    .dialog2,
    .dialog3,
    .dialog4,
    .dialog5,
    .dialog6,
    .dialog7,
    .dialog8,
    .dialog9 {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: rgba(252, 164, 106, 0.719);
        color: black;
        border-radius: 0px;
        box-shadow: 8px 8px 16px rgba(221, 112, 10, 0.39);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease-in-out;
        z-index: 5;
        overflow-y: hidden;
    }

    .dialog.special,
    .dialog2.special2,
    .dialog3.special3,
    .dialog4.special4,
    .dialog5.special5,
    .dialog6.special6,
    .dialog7.special7,
    .dialog8.special8,
    .dialog9.special9 {
        overflow-y: scroll;
    }

    #body-overlay.sichtbar,
    .dialog.sichtbar,
    .dialog2.sichtbar,
    .dialog3.sichtbar,
    .dialog4.sichtbar,
    .dialog5.sichtbar,
    .dialog6.sichtbar,
    .dialog7.sichtbar,
    .dialog8.sichtbar,
    .dialog9.sichtbar {
        opacity: 1;
        pointer-events: auto;
    }

    #loslegen-dialog,
    #loslegen-dialog2,
    #loslegen-dialog3,
    #loslegen-dialog4,
    #loslegen-dialog5,
    #loslegen-dialog6,
    #loslegen-dialog7,
    #loslegen-dialog8,
    #loslegen-dialog9 {
        width: 40%;
    }

    .dialog-schliessen-button,
    .dialog-schliessen-button2,
    .dialog-schliessen-button3,
    .dialog-schliessen-button4,
    .dialog-schliessen-button5,
    .dialog-schliessen-button6,
    .dialog-schliessen-button7,
    .dialog-schliessen-button8,
    .dialog-schliessen-button9 {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 32px;
        line-height: 32px;
        color: #008C9B;
        text-decoration: none;
    }

    /* Optionales Styling für den Dialog der Landing Page */
    #loslegen-dialog,
    #loslegen-dialog2,
    #loslegen-dialog3,
    #loslegen-dialog4,
    #loslegen-dialog5,
    #loslegen-dialog6,
    #loslegen-dialog7,
    #loslegen-dialog8,
    #loslegen-dialog9,
    {
    background-color: #f3bd6ce5;
    box-shadow: inset 0px 0px 10px rgb(243, 127, 18), 2px 2px 4px rgba(255, 255, 255, 0.1), 8px 8px 16px rgba(255, 255, 255, 0.1);
    border: 5px solid rgb(252, 170, 46);
}

#loslegen-dialog .dialog-schliessen-button,
#loslegen-dialog2 .dialog-schliessen-button2,
#loslegen-dialog3 .dialog-schliessen-button3,
#loslegen-dialog4 .dialog-schliessen-button4,
#loslegen-dialog5 .dialog-schliessen-button5,
#loslegen-dialog6 .dialog-schliessen-button6,
#loslegen-dialog7 .dialog-schliessen-button7,
#loslegen-dialog8 .dialog-schliessen-button8,
#loslegen-dialog9 .dialog-schliessen-button9 {
    color: #008C9B;
}

.dialog h2,
.dialog2 h2,
.dialog3 h2,
.dialog4 h2,
.dialog5 h2,
.dialog6 h2,
.dialog7 h2,
.dialog8 h2,
.dialog9 h2 {
    color: rgba(146, 2, 134, 0.788);
    font-weight: bolder;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5rem;
    padding-bottom: 10px;

}

.dialog p,
.dialog2 p,
.dialog3 p,
.dialog4 p,
.dialog5 p,
.dialog6 p,
.dialog7 p,
.dialog8 p,
.dialog9 p {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.6rem;
    text-align: justify;
    hyphens: auto;
    padding-bottom: 10px;
}
}