/****************************************************
 * General
 ****************************************************/

* {
    font-family: Arial;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    /* font-size:13px; */
}

*:focus-visible {
    outline-offset: 2px;
    outline: dashed 5px #ec6708 !important;
}

input {
    outline: none;
}

html {
    height: 100%;
}

body.base {
    position: fixed;
    top: 0;
    /*bottom:0;*/
    /*right:0;*/
    left: 0;
    height: 100%;
    width: 100%;
    background-color: white;
    overflow: hidden;
}

.clear::after {
    content: "";
    clear: both;
    display: table;
}

h2 {
    color: #999999;
    font-size: 38px;
    font-weight: normal;
}

a, a:hover {
    text-decoration: none;
}

/****************************************************
 * actionbutton
 ****************************************************/

a.actionbutton {
    z-index: 30;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    /* width: 50px; */
    /* height: 50px; */
    width: 4%;
    height: 4%;
    transition: all 200ms;
    outline: none;
    /* margin-left: -25px; */
    /* margin-top: -25px; */
    margin-left: -2%;
    margin-top: -1.4%;
    background-size: 100% 100%;
}

a.actionbutton.exerciseHotspot {
    background-image: url(../img/aufgabe.svg);
}

a.actionbutton.audioHotspot {
    background-image: url(../img/audio.svg);
}

a.actionbutton.videoHotspot {
    background-image: url(../img/video.svg);
}

a.actionbutton.zoomHotspot {
    background-image: url(../img/bild_gross.svg);
}

a.actionbutton.phase6Hotspot {
    background-image: url(../img/phase6.svg);
}

a.actionbutton.vhsHotspot {
    background-image: url(../img/vhs.svg);
}

a.actionbutton:hover {
    transform: scale(1.2);
}

/****************************************************
 * closebutton
 ****************************************************/

a.closebutton {
    background-color: white;
    color: #999999;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 2px solid #ec6708;
    color: rgb(153, 153, 153) !important;
    font-size: 25px;
    line-height: 33px;
    cursor: pointer;
    transition: all 200ms;
}

a.closebutton:hover {
    background-color: #ec6708 !important;
    color: white !important;
}

/****************************************************
 * button
 ****************************************************/

a.button {
    font-size: 23px;
    color: #ec6708;
    border: 2px solid #ec6708;
    padding: 5px 20px;
    text-align: center;
    min-width: 160px;
    display: inline-block;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 200ms;
}

a.button:hover {
    background-color: #ec6708 !important;
    color: white !important;
}

a.button.disabled {
    opacity: .5;
    cursor: default !important;
    pointer-events: none;
    color: #999999;
    border-color: #999999;
}

/****************************************************
 * Menu links
 ****************************************************/

div#menu {
    z-index: 10;
    line-height: 0;
    float: left;
    height: 100%;
    width: 90px;
    background-color: #ccc;
    text-align: center;
    position: relative;

    *:focus-visible {
        outline-offset: -5px;
    }
}

div#menu div#menu-logo {
    height: 60px;
    background-size: 60px 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/logo.svg);
}

div#menu div#menu-strich-oben {
    line-height: 0px;
    height: 0px;
    border-bottom: 2px solid #ec6708;
}

div#menu a {
    display: block;
    height: 70px;
    transition: background-color 200ms;
    background-size: 50px 50px;
    background-position: center;
    background-repeat: no-repeat;
}

div#menu a#menu-links-anleitung {
    height: 20px;
    line-height: 20px;
    position: absolute;
    bottom: 110px;
    font-size: 12px;
    color: #ec6708;
    left: 0;
    width: 100%;
    text-align: left;
    padding-left: 10px;
}

div#menu a#menu-links-impressum {
    height: 20px;
    line-height: 20px;
    position: absolute;
    bottom: 80px;
    font-size: 12px;
    color: #ec6708;
    left: 0;
    width: 100%;
    text-align: left;
    padding-left: 10px;
}

div.menu-links-item {
    display: block;
    height: 70px;
    transition: background-color 200ms;
    background-size: 50px 50px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

div.menu-links-item:hover, div.menu-links-item.active {
    background-color: #ffffff;
}

#menu-links-menu {
    background-image: url(../img/menu.svg);
}

div#menu a#menu-links-menu {
    background-image: url(../img/menu.svg);
}

div#menu a#menu-links-suche {
    background-image: url(../img/suche.svg);
}

div#menu a#menu-links-zoom-in {
    background-image: url(../img/zoom_in.svg);
}

div#menu a#menu-links-zoom-out {
    background-image: url(../img/zoom_out.svg);
}

div#menu a#menu-links-full-screen {
    background-image: url(../img/vollbild.svg);
}

div#menu a#menu-links-wuerfel {
    background-image: url(../img/wuerfel.svg);
}

div#menu a#menu-links-info {
    background-image: url(../img/info_ohne.svg);
}

div#menu a#menu-links-notiz {
    background-image: url(../img/notiz.svg);
}

div#menu a#menu-links-notiz:not(.visible) {
    display: none !important;
}

div#menu a#menu-links-notiz-frei {
    background-image: url(../img/stift.svg);
}

div#menu a#menu-links-notiz-frei:not(.visible) {
    display: none !important;
}

div#menu a.hightlight, div#menu a.active {
    background-color: #ffffff;
}

/****************************************************
 * Content rechts
 ****************************************************/

div.content {
    z-index: 10;
    line-height: 0;
    width: calc(100% - 90px);
    overflow: auto;
    height: 100%;
    text-align: center;
    padding: 0 90px;
    position: relative;
}

body[data-type="2"] div.content {
    padding: 0 30px 0 90px;
}

div.content.scale100mode {
    overflow: hidden !important;
}

div.content>div:not(.phase6-content):not(.note-editor) {
    position: relative;
    display: none;
    margin: 0 auto;
    max-width: 1920px;
    transition: transform 200ms;
    transform-origin: top left;
}

body[data-type="2"] div.page {
    height: 1px; /* Hack, damit der Scrollbereich nach dem Scale nicht zu groß ist... */
}

div.content>div:not(.pdf-mode):before, .pdf-wrapper:before {
    box-shadow: -15px 0 15px -15px #ec6708 inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}

div.content>div:not(.pdf-mode):after, .pdf-wrapper:after {
    box-shadow: 15px 0 15px -15px #ec6708 inset;
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
}

div.page {
    position: relative;
}

/****************************************************
 * Note-Editor
 ****************************************************/

div.note-wrapper {
    z-index: 99;
    position: absolute;
    color: #00008b;
}

div.note-wrapper.new .note-move {
    animation: blink 1s infinite;
    border-width: 3px;
}

@keyframes blink {
    0% {
        background-color: rgba(204, 204, 204, 0.5);
    }

    50% {
        background-color: rgba(204, 204, 204, 1);
    }

    100% {
        background-color: rgba(204, 204, 204, 0.5);
    }
}

div.note-move {
    width: 100%;
    height: 100%;
    background-color: transparent;
    cursor: move;
    position: absolute;
    left: -1px;
    top: -1px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 1px solid #EC6708;
    box-sizing: content-box;
    border-radius: 5px;
    transition: border-color 200ms;
}

div.note-wrapper:not(.active):not(.new) div.note-move {
    border-color: transparent;
}

div.note-delete {
    background-image: url(../img/trash.svg);
    width: 14px;
    height: 16px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: -19px;
    bottom: 0;
    display: none;
    cursor: pointer;
}

div.note-wrapper.active div.note-delete {
    display: block;
}

div.note-editor {
    text-align: left;
    margin: 3px;
    padding: 12px;
    border-radius: 5px;
    line-height: normal;
    /* margin-left: 10px; */
    border: none;
}

div.note-editor::after {
    box-shadow: none !important;
}

div.note-editor::before {
    box-shadow: none !important;
}

.tox {
    z-index: 99;
}

/****************************************************
 * FreeDraw (Freihand Notiz)
 ****************************************************/
.freedraw-editor-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.freedraw-editor-wrapper.hidden {
    display: none;
}

.freedraw-menu-label input {
    accent-color: #ec6708;
}

/****************************************************
 * Scrollbuttons
 ****************************************************/

a#prev {
    z-index: 20;
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 40px;
    transition: opacity 200ms;
    background-image: url(../img/weiter.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

a#prev {
    transform: rotate(180deg);
}

a#next {
    z-index: 20;
    position: absolute;
    bottom: 17px;
    left: 110px;
    width: 50px;
    height: 40px;
    transition: opacity 200ms;
    background-image: url(../img/weiter.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

div.content>div>img {
    width: 100%;
}

a.disabled {
    opacity: 0.2;
    pointer-events: none;
    cursor: default;
}

/****************************************************
 * Suche overlay
 ****************************************************/

div.suche-overlay {
    z-index: 50;
    position: fixed;
    left: -400px;
    top: 0px;
    height: 100%;
    width: 400px;
    background-color: white;
    border-right: 2px solid #ec6708;
    transition: left 200ms;
    overflow: hidden;
}

div.suche-overlay-header {
    padding: 30px 30px 30px 20px;
    height: 100px;
    overflow: hidden;
}

div.suche-overlay-content {
    padding: 0px 30px;
}

#input-suche {
    border: 2px solid #ec6708;
    border-radius: 10px;
    background-color: #fafafa;
    font-size: 18px;
    /*line-height:20px;*/
    padding: 5px 10px;
    width: 100%;
}

/****************************************************
 * Wuerfel overlay
 ****************************************************/

/*div.wuerfel-overlay {
    z-index: 50;
    position: fixed;
    left: -400px;
    top: 0px;
    height: 100%;
    width: 400px;
    background-color: white;
    border-right: 2px solid #ec6708;
    transition: left 200ms;
    overflow: hidden;
}*/

div.wuerfel-overlay {
    z-index: 50;
    position: fixed;
    left: -400px;
    top: 0px;
    height: 100%;
    width: 400px;
    background-color: white;
    border-right: 2px solid #ec6708;
    transition: left 200ms;
    overflow: hidden;
}

div.wuerfel-overlay-header {
    padding: 30px 30px 30px 20px;
    height: 100px;
    overflow: hidden;
    text-align: center;
}

div.wuerfel-overlay-header:after {
    content: "";
    background-size: 50px 50px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(../img/wuerfel.svg);
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    left: 11px;
    top: 26px;
}

div.wuerfel-chapter-title {
    font-size: 23px;
    width: 365px;
    border: 1px solid #ec6708;
    display: flex;
}

div.wuerfel-chapter-title>.number {
    width: 43px;
    background-color: #ec6708;
    color: #fff;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

div.wuerfel-chapter-title>.text {
    color: #ec6708;
    padding: 2px 15px;
    cursor: pointer;
}

div.wuerfel-overlay-content {
    padding: 20px 30px 0;
}

div.wuerfel-content-title {
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 20px;
}

div.wuerfel-overlay-content a {
    color: #ec6708;
}

/****************************************************
 * Menu overlay
 ****************************************************/

div.menu-overlay {
    z-index: 50;
    position: fixed;
    left: -400px;
    top: 0px;
    height: 100%;
    width: 400px;
    background-color: white;
    border-right: 2px solid #ec6708;
    transition: left 200ms;
    overflow: hidden;
}

div.menu-overlay a {
    color: inherit;
}

div.menu-overlay-content a:hover {
    text-decoration: underline;
}

div.menu-overlay-header {
    padding: 30px 30px 30px 20px;
    height: 100px;
    overflow: hidden;
    text-align: center;
}

div.menu-overlay-header:after {
    content: "";
    background-size: 50px 50px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(../img/menu.svg);
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    left: 21px;
    top: 26px;
}

div.menu-license-information {
    position: absolute;
    left: 0;
    top: 75px;
    width: 100%;
    display: flex;
    font-size: 13px;
    justify-content: center;
}

div.menu-license-information:not(.visible) {
    display: none;
}

span.menu-license-information-content {
    font-weight: bold;
}

div.menu-overlay-content-container {
    height: calc(100% - 100px);
    overflow-y: auto;
}

div.menu-overlay-zwischenueberschrift {
    font-size: 25px;
    background-color: #ec6708;
    width: 365px;
    box-sizing: border-box;
    color: #fff;
    padding: 2px 17px;
}

div.menu-overlay-zwischenueberschrift:last-child {
    display: none;
}

div.menu-overlay-chapter {
    position: relative;
    width: 365px;
}

div.menu-overlay-chapter-title {
    font-size: 23px;
    width: 100%;
    border: 1px solid #ec6708;
    display: flex;
}

.menu-overlay-chapter-title>.number {
    width: 43px;
    background-color: #ec6708;
    color: #fff;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.menu-overlay-chapter-title>.text {
    color: #ec6708;
    padding: 2px 15px;
    cursor: pointer;
    position: relative;
}

.menu-overlay-chapter-title>.text.visited::after {
    content: "";
    position: absolute;
    left: 290px;
    top: 6px;
    background-image: url(../img/check.png);
    width: 22px;
    height: 18px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.menu-overlay-chapter-content {
    display: flex;
    padding: 20px 10px 20px 60px;
    font-size: 13px;
}

.menu-overlay-chapter-content>.title {
    font-weight: bold;
    width: 60px;
}

.menu-overlay-chapter-content>.page-list>a {
    display: block;
    position: relative;
}

.menu-overlay-chapter-content>.page-list>a.visited::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 3px;
    background-image: url(../img/check.png);
    width: 12px;
    height: 9px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.menu-overlay-chapter-content>.page-list>a:hover {
    text-decoration: underline;
}

.menu-overlay-chapter-title>.text:hover {
    text-decoration: underline;
}

div.menu-overlay-content {
    height: calc(100% - 100px);
    overflow-y: auto;
}

div.menu-overlay-content>div:nth-child(odd) {
    width: 365px;
    border: 1px solid #ec6708;
}

div.menu-overlay-content>div::after {
    content: "";
    clear: both;
    display: table;
}

div.menu-overlay-content>div:nth-child(odd)>div {
    float: left;
}

div.menu-overlay-content>div:nth-child(odd)>div:first-child {
    background-color: #ec6708;
    color: white;
    padding: 2px 15px;
    font-size: 23px;
}

div.menu-overlay-content>div:nth-child(odd)>div:last-child {
    color: #ec6708;
    padding: 2px 15px;
    font-size: 23px;
}

div.menu-overlay-content>div:nth-child(odd)>div:last-child a {
    font-size: 23px;
}

div.menu-overlay-content>div:nth-child(even) {
    font-size: 13px;
    padding: 20px 10px 20px 60px;
}

div.menu-overlay-content>div:nth-child(even)>div:first-child {
    font-weight: bold;
    float: left;
    width: 60px;
}

div.menu-overlay-content>div:nth-child(even)>div:last-child {
    float: left;
    width: calc(100% - 80px);
}

div.menu-overlay-header a.closebutton, div.wuerfel-overlay-header a.closebutton {
    position: absolute;
    right: 30px;
    top: 30px;
}

/****************************************************
 * Content an Menu Shadow
 ****************************************************/

div.content-shadow {
    z-index: 30;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: #6b6b6b;
    opacity: 0.5;
    display: none;
    transition: opacity 200ms;
}

/****************************************************
 * Popup
 ****************************************************/

div.popup {
    z-index: 60;
    position: fixed;
    left: 20px;
    top: 20px;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    border: 2px solid #ec6708;
    display: none;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: white;
}

div.popup-wrapper, div.aufgabe-wrapper {
    display: flex;
    height: 100%;
}

div.popup-nummer {
    width: 100px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    padding: 0px 30px;
    white-space: nowrap;
    color: white;
    font-size: 38px;
    background-color: #ec6708;
    border-bottom-right-radius: 10px;
}

div.popup-content-wrapper {
    width: 100%;
    margin-left: 30px;
    position: relative;
}

div.popup-header {
    height: 60px;
    border-bottom: 1px solid #ec6708;
}

div.popup-titel {
    color: #ec6708;
    font-size: 38px;
    height: 100%;
    line-height: 60px;
}

div.popup-header>a.closebutton {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
}

div.popup-content-placer {
    width: calc(100% - 30px);
    height: calc(100% - 60px);
    position: relative;
    margin-left: -20px;
}

iframe.popup-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/****************************************************
 * aufgaben aufgabe
 ****************************************************/

body.exercise-body {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

div.aufgabe-content-container {
    width: calc(100% - 20px);
    overflow: auto;
    position: absolute;
    top: 70px;
    bottom: 120px;
    left: 20px;

    &.memory {
        left: 0;
    }
}

div.aufgabe-after-eval {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

div.aufgabe-footer, div.aufgabe-footer-inner {
    position: absolute;
    left: 20px;
    bottom: 50px;
}

div.aufgabe-footer>a.button, div.aufgabe-footer-inner>a.button {
    margin-right: 10px;
}

.aufgabe-button-next {
    position: absolute;
    bottom: 50px;
}

.aufgabe-button-next.pos1 {
    left: 0px;
}

.aufgabe-button-next.pos2 {
    left: 170px;
}

.aufgabe-button-next.pos3 {
    left: 340px;
}

div.aufgabe-prompt {
    font-size: 20px;
    margin-bottom: 40px;
    margin-top: 10px;
    margin-left: 20px;
}

div.aufgabe-image>img {
    margin-right: 5vw;
    border: 1px solid #ec6708;
    max-height: calc(90vh - 200px);
    max-width: 50vw;
}

div.aufgabe-exercise-part>div {
    max-width: 30vw;
}

div.aufgabe-question, div.aufgabe-additional-text {
    font-size: 18px;
    margin-bottom: 20px;
}

div.aufgabe-additional-text>span {
    margin-right: 5vw;
    display: block;
    width: 20vw;
    line-height: 22px;
}

div.aufgabe-answer-container {
    margin-left: 25px;
}

div.aufgabe-answer {
    margin-bottom: 10px;
}

div.aufgabe-answer>input[type="checkbox"], div.aufgabe-answer>input[type="radio"] {
    display: none;
}

div.aufgabe-answer>input[type="checkbox"]+label::before, div.aufgabe-answer>input[type="radio"]+label::before {
    width: 16px;
    height: 17px;
    border: 2px solid #ec6708;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-left: -25px;
    margin-top: 0px;
    box-sizing: border-box;
}

div.aufgabe-answer>input[type="checkbox"]:checked+label::before, div.aufgabe-answer>input[type="radio"]:checked+label::before {
    box-shadow: inset 0 0 0 3px #fff;
    background-color: #ec6708;
}

div.aufgabe-answer>label {
    cursor: pointer;
    vertical-align: top;
}

div.solution {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 10px;
}

div.solution.correct {
    background-image: url(../img/ok.png);
}

div.solution.wrong {
    background-image: url(../img/cancel.png);
}

/********************
*       Memory      *
********************/

.flip-card {
    width: 150px;
    height: 150px;
    text-align: center;
    display: inline-block;
    perspective: 300px;
    position: relative;
    margin: 5px;
}

.flip-card:nth-child(1), .flip-card:nth-child(2), .flip-card:nth-child(3), .flip-card:nth-child(4), .flip-card:nth-child(5) {
    margin-top: 0;
}

.flip-card>div {
    width: 100%;
    height: 100%;
    transition: transform .75s cubic-bezier(.5, 1.25, .5, 1.25);
    transform-style: preserve-3d;
    border-radius: 25px;
    border: 2px solid #ec6708;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(0deg);
    overflow: hidden;
    cursor: pointer;
}

.flip-card.no-animation>div {
    transition: none;
    transform: none;
}

.flip-card .front {
    color: #ec6708;
    font-size: 60px;
    line-height: 150px;
}

.flip-card .back {
    transform: rotateY(-180deg);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.flip-card.no-animation .back {
    visibility: hidden;
}

.flip-card .back>span.text {
    font-size: 24px;
}

.flip-card.flipped .front, .flip-card.correct .front {
    transform: rotateY(180deg);
}

.flip-card.flipped.no-animation .front, .flip-card.correct.no-animation .front {
    visibility: hidden;
}

.flip-card.flipped .back, .flip-card.correct .back {
    transform: rotateY(0deg);
}

.flip-card.flipped.no-animation .back, .flip-card.correct.no-animation .back {
    visibility: visible;
}

.flip-card.correct>div {
    border-color: #999999;
    color: #999999;
    cursor: default;
}

.flip-card img {
    max-width: 100%;
    max-height: 100%;
}

.memory-wrapper {
    margin-left: -5px;
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: 20px;
}

.aufgabe-card-container {
    position: absolute;
    width: 850px;
    left: 0;
    top: 0;
}

.correct-pair-container {
    position: absolute;
    width: 220px;
    left: 845px;
    top: 0;
}

.correct-pair-item {
    width: 95px;
    height: 120px;
    position: relative;
    display: inline-block;
    margin: 3px 5px;
}

.correct-pair-item>div {
    width: 72px;
    height: 72px;
    margin: 0;
}

.correct-pair-item>div>div {
    border-radius: 15px;
    background-color: #fff;
}

.correct-pair-item>div:nth-of-type(1) {
    position: absolute;
    right: 0;
    top: 0;
}

.correct-pair-item>div:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    left: 0;
}

.correct-pair-item>div .back>span.text {
    font-size: 16px;
}

/************************
 *      Lueckentext     *
 ***********************/

.gap-text-container {
    margin-right: 50px;
}

.gap-text, .draggable {
    font-size: 22px;
    margin-bottom: 20px;
}

.draggable {
    float: left;
    width: 100%;
    cursor: pointer;
    line-height: 40px;
}

.gap-text>div {
    display: inline;
}

.gap-text>.solution {
    position: absolute;
    right: 0;
    bottom: 0;
}

.gap {
    /* border-bottom: 1px solid #ec6708; */
    padding: 0 40px;
    margin: 0 10px;
    min-width: 150px;
    text-align: center;
    height: 20px;
    position: relative;
    margin-bottom: -10px;
    display: inline-block !important;
}

.gap.correct::after {
    position: absolute;
    right: 5px;
    bottom: 12px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/ok.png);
}

.gap.wrong::after {
    position: absolute;
    right: 5px;
    bottom: 12px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/cancel.png);
}

.drag-item {
    display: flex;
    height: 20px;
    margin-bottom: 10px !important;
}

.droppable.drag-parent {
    z-index: 2;
}

.drag-item.droppable {
    padding: 0 40px;
}

.marker {
    width: 6px;
    height: 6px;
    background-color: #ec6708;
    border-radius: 50%;
    margin-top: 7px;
    margin-right: 10px;
    margin-left: -10px;
}

.gap>span.black, .draggable>span.black {
    color: black;
}

.gap>span.yellow, .draggable>span.yellow {
    color: #e8c422;
}

.gap>span.red, .draggable>span.red {
    color: #b21f23;
}

.gap>span.blue, .draggable>span.blue {
    color: #07a1e2;
}

.gap>span.green, .draggable>span.green {
    color: #72ae41;
}

/****************************************
*       Zuordnung / Drag u. Drop        *
****************************************/

.droppable {
    text-align: center;
    height: 40px;
    position: relative;
    background-color: #fce1ce;
    min-width: 150px;
}

.droppable.zuordnung-background, .fehler-background {
    width: calc(100% - 230px);
    height: calc(100% - 200px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent !important;
}

.drag-container {
    margin-right: 80px;
}

.drag-container.zuordnung {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
}

.drag-elements {
    position: absolute;
    right: 10px;
    top: 0;
    width: 230px;
}

/*.drag-item.zuordnung {
    width: 230px;
    height: 90px;
    float: none;
    border-radius: 10px;
    border: 2px solid #ec6708;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    color: #ec6708;
    line-height: 25px;
}*/

.drag-item.zuordnung {
    float: right;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    color: #ec6708;
    line-height: 2.9vh;
    height: 10.3vh;
    width: 26.5vh;
    border-radius: 1.2vh;
    border: 0.2vh solid #ec6708;
    font-size: 2.5vh;
    margin-bottom: 1.3vh !important;
}

.drag-item.zuordnung.text {
    flex-direction: column;
}

.drag-item.zuordnung>img {
    height: 97%;
    margin-top: 1%;
}

.drag-item.dnd {
    border: 2px solid #ec6708;
    background-color: #fff;
    width: 250px;
    height: 50px;
    color: #ec6708;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px !important;
    text-align: center;
    float: none;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 20px;
}

.drag-item.dnd-image {
    border-bottom-right-radius: 20px;
}

.drag-item.dnd-text {
    border-bottom-left-radius: 20px;
}

.droppable>.drag-item.dnd {
    margin: -2px 0 0 -2px;
}

.drag-item.dnd.dragging {
    z-index: 2;
}

.drop-element.image, .drop-element.text {
    display: inline-flex;
    margin-bottom: 20px;
}

.drop-element.text {
    display: flex;
}

.drop-element.image:nth-of-type(odd) {
    margin-right: 70px;
}

.drop-element.image>.image {
    width: 250px;
    height: 140px;
    text-align: center;
    border: 2px solid #ec6708;
}

.drop-element.text>.text {
    width: 250px;
    height: 50px;
    text-align: center;
    border-bottom-right-radius: 20px;
    color: #ec6708;
    font-size: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #ec6708;
    padding: 0 5px;
}

.drop-element.image>.image>img {
    max-width: 100%;
    max-height: 100%;
}

.drop-element.image>.droppable, .drop-element.text>.droppable, .droppable.dnd {
    width: 250px;
    height: 50px;
    background-color: transparent;
    border: 2px dashed #ec6708;
    transition: background-color .2s;
}

.drop-element.image>.droppable, .droppable.dnd-image {
    border-bottom-right-radius: 20px;
}

.drop-element.text>.droppable, .droppable.dnd-text {
    border-bottom-left-radius: 20px;
}

.droppable.dnd.hover {
    background-color: #fce1ce;
}

.drag-container>.droppable.dnd {
    margin-bottom: 20px;
}

.drop-element.image>.droppable.correct::after {
    position: absolute;
    right: -30px;
    top: 15px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/ok.png);
}

.drop-element.image>.droppable.wrong::after {
    position: absolute;
    right: -30px;
    top: 15px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/cancel.png);
}

.drop-element.text>.droppable.correct::after {
    position: absolute;
    left: -30px;
    top: 15px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/ok.png);
}

.drop-element.text>.droppable.wrong::after {
    position: absolute;
    left: -30px;
    top: 15px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/cancel.png);
}

/****************************
*       Fehler-Teufel       *
****************************/

.fehler-background:not(.visible) {
    opacity: 0;
}

.fehler-background {
    transition: opacity .5s;
    background-position: center left;
}

/************************
*       Sentence        *
************************/

.sentence-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.sentence-wrapper:not(.show) {
    display: none;
}

.sentence-number {
    background-color: #ec6708;
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    margin-right: 10px;
}

.sentence-number.add-solution:not(.show) {
    display: none;
}

.sentence-number.add-solution {
    cursor: pointer;
}

.sortable-sentence {
    /*display: flex;*/
    list-style-type: none;
    height: 40px;
    position: relative;
}

.underline {
    height: 1px;
    background-color: #ec6708;
}

.sortable-sentence>.part {
    color: #ec6708;
    border: 2px solid #ec6708;
    padding: 2px 10px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 24px;
    background-color: #fff;
    float: left;
    height: 36px;
}

.sortable-sentence>.part.forceCapitalize {
    text-transform: capitalize;
}

.sortable-sentence>.part.dragged {
    position: absolute;
}

.sortable-sentence>.placeholder {
    float: left;
    background-color: #fce1ce;
    margin-right: 5px;
}

.sortable-sentence>.placeholder.init {
    display: none !important;
}

.sortable-sentence>.part:last-of-type {
    margin-right: 0;
}

.sortable-sentence.correct::after {
    position: absolute;
    right: -30px;
    bottom: 12px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/ok.png);
}

.sortable-sentence.wrong::after {
    position: absolute;
    right: -30px;
    bottom: 12px;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/cancel.png);
}

/****************************************************
 * video
 ****************************************************/

div.video {
    overflow: visible;
    z-index: 40;
    position: fixed;
    display: none;
    /*background-color: rgba(0, 0, 0, 0.5);*/
}

div.video-content a.closebutton {
    z-index: 2000;
    position: absolute;
    right: -15px;
    top: -15px;
}

div.video-content {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0px;
    top: 0px;
}

div.video-player {
    width: 100%;
    height: 100%;
}

/**************************
*       Phase6 + VHS      *
**************************/

div.phase6-popup, div.vhs-popup {
    display: none;
    z-index: 2000;
    background-color: #fff;
    border: 2px solid #ec6708;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    max-width: 400px;
    min-height: 60px;
}

div.phase6-content, div.vhs-content {
    margin: 15px 70px 15px 15px;
    line-height: normal;
    text-align: left;
}

div.vhs-content {
    margin: 15px 15px 55px;
}

.phase6-content img, .vhs-content>a {
    display: block;
    width: 350px;
}

.phase6-content img {
    margin-bottom: 25px;
}

.vhs-content>a>img {
    height: 100%;
    width: 100%;
}

/************************
*       Impressum       *
************************/

div.impressum {
    display: none;
    z-index: 2000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div.impressum-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

div.impressum-container {
    width: 50vw;
    background-color: #fff;
    border: 2px solid #ec6708;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    position: relative;
    margin: 0 auto;
    max-height: 95vh;
}

div.impressum a.closebutton, div.phase6-popup a.closebutton, div.vhs-popup a.closebutton {
    position: absolute;
    right: 10px;
    bottom: 7px;
}

div.impressum-title {
    color: #ec6708;
    font-size: 30px;
    border-bottom: 1px solid #ec6708;
    margin-left: 40px;
    padding: 10px 0;
}

div.impressum-content {
    margin: 20px 20px 20px 40px;
    overflow: auto;
    height: calc(100% - 95px);
}

/****************************************************
 * zoom100
 ****************************************************/

.zoom100 {
    z-index: 40;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: none;
}

.zoom100-shadow {
    z-index: 50;
    background-color: black;
    opacity: 0.5;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.zoom100-imageframe {
    z-index: 60;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.zoom100-image {
    max-width: 100%;
    max-height: 100%;
}

.zoom100 a.closebutton {
    z-index: 60;
    position: absolute;
    right: 20px;
    bottom: 10px;
}

/****************************************************
 * audioplayer
 ****************************************************/

.audio-frame {
    position: fixed;
    width: 100%;
    bottom: 30px;
    left: 0px;
    z-index: 70;
    line-height: 0;
    transition: top 200ms;
    text-align: center;
    display: none;
}

.audio-content {
    position: relative;
    display: inline-block;
}

.audio-frame a.closebutton {
    z-index: 2000;
    position: absolute;
    right: -25px;
    top: -25px;
}

#location-dialog {
    display: none;
}

.dialog {
    position: absolute;
    left: calc(50% - 175px);
    top: calc(50% - 50px);
    z-index: 9999;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 2px solid #ec6708;
    background-color: #fff;
    box-sizing: border-box;
    width: 350px;
    height: 100px;
}

.dialog-content {
    font-size: 14px;
    padding: 10px;
    text-align: center;
    line-height: 18px;
}

.text-link {
    color: #fff;
    background-color: #ec6708;
    padding: 5px 15px;
    display: inline-block;
    margin: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/****************************************************
 * PDF
 ****************************************************/
.pdf-wrapper {
    position: relative;
    left: 0;
    top: 0;
    display: inline-flex;
    height: 955px;

    .pdf-side {
        position: relative;
        width: 675px;
        height: 100%;
        flex: none;

        img {
            width: 100%;
        }

        .pdf-page {
            position: relative;
            z-index: -1;
            width: 100%;
            height: 100%;
        }

        .pdf-hotspots {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            a.actionbutton {
                width: 5.5%;
                height: 5.5%;
            }
        }

    }

    /* Hack for Firefox using PDF.js as pdf-viewer */
    &.inset {

        .pdf-side {
            width: 705px;

            .pdf-page {
                margin-top: -33px;
                height: calc(100% + 33px);
            }
        }

        .pdf-hotspots {
            height: calc(100% + 33px);
        }
    }
}

@media (orientation: portrait) {
    body[data-type="2"] div.content.scale100mode {
        /* Typ PDF */
        overflow: auto !important;
    }

    .pdf-wrapper {
        flex-direction: column;
        height: calc(960px * 2);

        &::before {
            box-shadow: none;
        }

        &::after {
            box-shadow: none;
        }

        .pdf-side {
            height: 50%;

            &::before {
                box-shadow: -15px 0 15px -15px #ec6708 inset;
                content: " ";
                height: 100%;
                left: -15px;
                position: absolute;
                top: 0;
                width: 15px;
            }

            &::after {
                box-shadow: 15px 0 15px -15px #ec6708 inset;
                content: " ";
                height: 100%;
                position: absolute;
                top: 0;
                right: -15px;
                width: 15px;
            }
        }

        &.inset {

            .pdf-side {
                width: 705px;

                overflow: hidden;
            }
        }
    }
}

/****************************************************
 * MEDIA QUERIES
 ****************************************************/

@media (max-height: 670px) {
    div#menu a {
        height: 45px;
        background-size: 30px 30px;
    }

    div#menu a#menu-links-anleitung {
        bottom: 90px;
    }

    div#menu a#menu-links-impressum {
        bottom: 70px;
    }

    div#menu div#menu-logo {
        height: 40px;
        background-size: 40px 40px;
    }
}


/***************************************************
 * COLOR SCHEMES
 ***************************************************/

/*--------- Einfach zum Studium!  ----------*/

body.type_2 *:focus-visible {
    outline-color: #0f7a35 !important;
}

body.type_2 div#menu div#menu-strich-oben {
    border-bottom: 2px solid #0f7a35;
}

body.type_2 a.closebutton, body.type_2 div.phase6-popup, body.type_2 div.vhs-popup, body.type_2 div.popup, body.type_2 a.button, body.type_2 .flip-card>div, body.type_2 div.aufgabe-answer>input[type="checkbox"]+label::before, body.type_2 div.aufgabe-answer>input[type="radio"]+label::before, body.type_2 .drop-element.text>.text, body.type_2 .drag-item.dnd, body.type_2 .drop-element.image>.image, body.type_2 .sortable-sentence>.part {
    border: 2px solid #0f7a35;
}

body.type_2 div.menu-overlay {
    border-right: 2px solid #0f7a35;
}

body.type_2 div.popup-header {
    border-bottom: 1px solid #0f7a35;
}

body.type_2 div.menu-overlay-chapter-title, body.type_2 div.wuerfel-chapter-title, body.type_2 div.aufgabe-image>img {
    border: 1px solid #0f7a35;
}

body.type_2 .drag-item.zuordnung {
    border: 0.2vh solid #0f7a35;
}

body.type_2 div#menu a#menu-links-anleitung, body.type_2 div#menu a#menu-links-impressum, body.type_2 .menu-overlay-chapter-title>.text, body.type_2 div.wuerfel-overlay-content a, body.type_2 div.wuerfel-chapter-title>.text, body.type_2 div.popup-titel, body.type_2 a.button, body.type_2 .flip-card .front, body.type_2 .drop-element.text>.text, body.type_2 .drag-item.dnd, body.type_2 .drag-item.zuordnung, body.type_2 .sortable-sentence>.part {
    color: #0f7a35;
}

body.type_2 a.closebutton:hover, body.type_2 a.button:hover {
    background-color: #0f7a35 !important;
}

body.type_2 div.menu-overlay-zwischenueberschrift, body.type_2 .menu-overlay-chapter-title>.number, body.type_2 div.wuerfel-chapter-title>.number, body.type_2 div.popup-nummer, body.type_2 div.aufgabe-answer>input[type="checkbox"]:checked+label::before, body.type_2 div.aufgabe-answer>input[type="radio"]:checked+label::before, body.type_2 .sentence-number, body.type_2 .underline {
    background-color: #0f7a35;
}

body.type_2 .drop-element.image>.droppable, body.type_2 .drop-element.text>.droppable, body.type_2 .droppable.dnd {
    border: 2px dashed #0f7a35;
}

body.type_2 .drop-element.image>.droppable, body.type_2 .drop-element.text>.droppable, body.type_2 .droppable.dnd {
    background-color: transparent;
}

body.type_2 .droppable, body.type_2 .droppable.dnd.hover {
    background-color: #aeefc5;
}

body.type_2 div.content>div:not(.pdf-mode):before, body.type_2 .pdf-wrapper:before {
    box-shadow: -15px 0 15px -15px #0f7a35 inset;
}

body.type_2 div.content>div:not(.pdf-mode):after, body.type_2 .pdf-wrapper:after {
    box-shadow: 15px 0 15px -15px #0f7a35 inset;
}

body.type_2 div#menu a#menu-links-menu {
    background-image: url(../img/2/menu.svg);
}

body.type_2 div#menu a#menu-links-zoom-in {
    background-image: url(../img/2/zoom_in.svg);
}

body.type_2 div#menu a#menu-links-zoom-out {
    background-image: url(../img/2/zoom_out.svg);
}

body.type_2 div#menu a#menu-links-full-screen {
    background-image: url(../img/2/vollbild.svg);
}

body.type_2 div#menu a#menu-links-wuerfel {
    background-image: url(../img/2/wuerfel.svg);
}

body.type_2 div#menu a#menu-links-info {
    background-image: url(../img/2/info_ohne.svg);
}

body.type_2 div#menu a#menu-links-notiz {
    background-image: url(../img/2/notiz.svg);
}

body.type_2 div#menu a#menu-links-notiz-frei {
    background-image: url(../img/2/stift.svg);
}

body.type_2 a#next {
    background-image: url(../img/2/weiter.svg);
}

body.type_2 a#prev {
    background-image: url(../img/2/weiter.svg);
}

body.type_2 a.actionbutton.vhsHotspot {
    background-image: url(../img/2/vhs.svg);
}

body.type_2 a.actionbutton.exerciseHotspot {
    background-image: url(../img/2/aufgabe.svg);
}

body.type_2 a.actionbutton.zoomHotspot {
    background-image: url(../img/2/bild_gross.svg);
}

body.type_2 a.actionbutton.videoHotspot {
    background-image: url(../img/2/video.svg);
}

body.type_2 a.actionbutton.audioHotspot {
    background-image: url(../img/2/audio.svg);
}

body.type_2 div.menu-overlay-header:after {
    background-image: url(../img/2/menu.svg);
}

body.type_2 div.wuerfel-overlay-header:after {
    background-image: url(../img/2/wuerfel.svg);
}

body.type_2 .dialog {
    border: 2px solid #0f7a35;
}

body.type_2 .text-link {
    background-color: #0f7a35;
}

body.type_2 div.note-move {
    border-color: #0f7a35;
}

body.type_2 .freedraw-menu-label input {
    accent-color: #0f7a35;
}

body.type_2 .freedraw-menu-button.active {
    border-color: #0f7a35;
}

@media (orientation: portrait) {
    body.type_2 .pdf-side.left, body.type_2 .pdf-side.right {
        &::before {
            box-shadow: -15px 0 15px -15px #0f7a35 inset;
        }

        &::after {
            box-shadow: 15px 0 15px -15px #0f7a35 inset;
        }
    }
}

/*---------------  EB500 --------------*/

body.type_3 *:focus-visible {
    outline-color: #004e83 !important;
}

body.type_3 div#menu div#menu-strich-oben {
    border-bottom: 2px solid #004e83;
}

body.type_3 a.closebutton, body.type_3 div.phase6-popup, body.type_3 div.vhs-popup, body.type_3 div.popup, body.type_3 a.button, body.type_3 .flip-card>div, body.type_3 div.aufgabe-answer>input[type="checkbox"]+label::before, body.type_3 div.aufgabe-answer>input[type="radio"]+label::before, body.type_3 .drop-element.text>.text, body.type_3 .drag-item.dnd, body.type_3 .drop-element.image>.image, body.type_3 .sortable-sentence>.part {
    border: 2px solid #004e83;
}

body.type_3 div.menu-overlay {
    border-right: 2px solid #004e83;
}

body.type_3 div.popup-header {
    border-bottom: 1px solid #004e83;
}

body.type_3 div.menu-overlay-chapter-title, body.type_3 div.wuerfel-chapter-title, body.type_3 div.aufgabe-image>img {
    border: 1px solid #004e83;
}

body.type_3 .drag-item.zuordnung {
    border: 0.2vh solid #004e83;
}

body.type_3 div#menu a#menu-links-anleitung, body.type_3 div#menu a#menu-links-impressum, body.type_3 .menu-overlay-chapter-title>.text, body.type_3 div.wuerfel-overlay-content a, body.type_3 div.wuerfel-chapter-title>.text, body.type_3 div.popup-titel, body.type_3 a.button, body.type_3 .flip-card .front, body.type_3 .drop-element.text>.text, body.type_3 .drag-item.dnd, body.type_3 .drag-item.zuordnung, body.type_3 .sortable-sentence>.part {
    color: #004e83;
}

body.type_3 a.closebutton:hover, body.type_3 a.button:hover {
    background-color: #004e83 !important;
}

body.type_3 div.menu-overlay-zwischenueberschrift, body.type_3 .menu-overlay-chapter-title>.number, body.type_3 div.wuerfel-chapter-title>.number, body.type_3 div.popup-nummer, body.type_3 div.aufgabe-answer>input[type="checkbox"]:checked+label::before, body.type_3 div.aufgabe-answer>input[type="radio"]:checked+label::before, body.type_3 .sentence-number, body.type_3 .underline {
    background-color: #004e83;
}

body.type_3 .drop-element.image>.droppable, body.type_3 .drop-element.text>.droppable, body.type_3 .droppable.dnd {
    border: 2px dashed #004e83;
}

body.type_3 .drop-element.image>.droppable, body.type_3 .drop-element.text>.droppable, body.type_3 .droppable.dnd {
    background-color: transparent;
}

body.type_3 .droppable, body.type_3 .droppable.dnd.hover {
    background-color: #cfe8f9;
}

body.type_3 div.content>div:not(.pdf-mode):before, body.type_3 .pdf-wrapper:before {
    box-shadow: -15px 0 15px -15px #004e83 inset;
}

body.type_3 div.content>div:not(.pdf-mode):after, body.type_3 .pdf-wrapper:after {
    box-shadow: 15px 0 15px -15px #004e83 inset;
}

body.type_3 div#menu a#menu-links-menu {
    background-image: url(../img/3/menu.svg);
}

body.type_3 div#menu a#menu-links-zoom-in {
    background-image: url(../img/3/zoom_in.svg);
}

body.type_3 div#menu a#menu-links-zoom-out {
    background-image: url(../img/3/zoom_out.svg);
}

body.type_3 div#menu a#menu-links-full-screen {
    background-image: url(../img/3/vollbild.svg);
}

body.type_3 div#menu a#menu-links-wuerfel {
    background-image: url(../img/3/wuerfel.svg);
}

body.type_3 div#menu a#menu-links-info {
    background-image: url(../img/3/info_ohne.svg);
}

body.type_3 div#menu a#menu-links-notiz {
    background-image: url(../img/3/notiz.svg);
}

body.type_3 div#menu a#menu-links-notiz-frei {
    background-image: url(../img/3/stift.svg);
}

body.type_3 a#next {
    background-image: url(../img/3/weiter.svg);
}

body.type_3 a#prev {
    background-image: url(../img/3/weiter.svg);
}

body.type_3 a.actionbutton.vhsHotspot {
    background-image: url(../img/3/vhs.svg);
}

body.type_3 a.actionbutton.exerciseHotspot {
    background-image: url(../img/3/aufgabe.svg);
}

body.type_3 a.actionbutton.zoomHotspot {
    background-image: url(../img/3/bild_gross.svg);
}

body.type_3 a.actionbutton.videoHotspot {
    background-image: url(../img/3/video.svg);
}

body.type_3 a.actionbutton.audioHotspot {
    background-image: url(../img/3/audio.svg);
}

body.type_3 div.menu-overlay-header:after {
    background-image: url(../img/3/menu.svg);
}

body.type_3 div.wuerfel-overlay-header:after {
    background-image: url(../img/3/wuerfel.svg);
}

body.type_3 .dialog {
    border: 2px solid #004e83;
}

body.type_3 .text-link {
    background-color: #004e83;
}

body.type_3 div.note-move {
    border-color: #004e83;
}

body.type_3 .freedraw-menu-label input {
    accent-color: #004e83;
}

body.type_3 .freedraw-menu-button.active {
    border-color: #004e83;
}

@media (orientation: portrait) {
    body.type_3 .pdf-side.left, body.type_3 .pdf-side.right {
        &::before {
            box-shadow: -15px 0 15px -15px #004e83 inset;
        }

        &::after {
            box-shadow: 15px 0 15px -15px #004e83 inset;
        }
    }
}

/*------------- Einfach weiter! ----------------*/

body.type_4 *:focus-visible {
    outline-color: #b70e0c !important;
}

body.type_4 div#menu div#menu-strich-oben {
    border-bottom: 2px solid #b70e0c;
}

body.type_4 a.closebutton, body.type_4 div.phase6-popup, body.type_4 div.vhs-popup, body.type_4 div.popup, body.type_4 a.button, body.type_4 .flip-card>div, body.type_4 div.aufgabe-answer>input[type="checkbox"]+label::before, body.type_4 div.aufgabe-answer>input[type="radio"]+label::before, body.type_4 .drop-element.text>.text, body.type_4 .drag-item.dnd, body.type_4 .drop-element.image>.image, body.type_4 .sortable-sentence>.part {
    border: 2px solid #b70e0c;
}

body.type_4 div.menu-overlay {
    border-right: 2px solid #b70e0c;
}

body.type_4 div.popup-header {
    border-bottom: 1px solid #b70e0c;
}

body.type_4 div.menu-overlay-chapter-title, body.type_4 div.wuerfel-chapter-title, body.type_4 div.aufgabe-image>img {
    border: 1px solid #b70e0c;
}

body.type_4 .drag-item.zuordnung {
    border: 0.2vh solid #b70e0c;
}

body.type_4 div#menu a#menu-links-anleitung, body.type_4 div#menu a#menu-links-impressum, body.type_4 .menu-overlay-chapter-title>.text, body.type_4 div.wuerfel-overlay-content a, body.type_4 div.wuerfel-chapter-title>.text, body.type_4 div.popup-titel, body.type_4 a.button, body.type_4 .flip-card .front, body.type_4 .drop-element.text>.text, body.type_4 .drag-item.dnd, body.type_4 .drag-item.zuordnung, body.type_4 .sortable-sentence>.part {
    color: #b70e0c;
}

body.type_4 a.closebutton:hover, body.type_4 a.button:hover {
    background-color: #b70e0c !important;
}

body.type_4 div.menu-overlay-zwischenueberschrift, body.type_4 .menu-overlay-chapter-title>.number, body.type_4 div.wuerfel-chapter-title>.number, body.type_4 div.popup-nummer, body.type_4 div.aufgabe-answer>input[type="checkbox"]:checked+label::before, body.type_4 div.aufgabe-answer>input[type="radio"]:checked+label::before, body.type_4 .sentence-number, body.type_4 .underline {
    background-color: #b70e0c;
}

body.type_4 .drop-element.image>.droppable, body.type_4 .drop-element.text>.droppable, body.type_4 .droppable.dnd {
    border: 2px dashed #b70e0c;
}

body.type_4 .drop-element.image>.droppable, body.type_4 .drop-element.text>.droppable, body.type_4 .droppable.dnd {
    background-color: transparent;
}

body.type_4 .droppable, body.type_4 .droppable.dnd.hover {
    background-color: #fdd7d6;
}

body.type_4 div.content>div:not(.pdf-mode):before, body.type_4 .pdf-wrapper:before {
    box-shadow: -15px 0 15px -15px #b70e0c inset;
}

body.type_4 div.content>div:not(.pdf-mode):after, body.type_4 .pdf-wrapper:after {
    box-shadow: 15px 0 15px -15px #b70e0c inset;
}

body.type_4 div#menu a#menu-links-menu {
    background-image: url(../img/4/menu.svg);
}

body.type_4 div#menu a#menu-links-zoom-in {
    background-image: url(../img/4/zoom_in.svg);
}

body.type_4 div#menu a#menu-links-zoom-out {
    background-image: url(../img/4/zoom_out.svg);
}

body.type_4 div#menu a#menu-links-full-screen {
    background-image: url(../img/4/vollbild.svg);
}

body.type_4 div#menu a#menu-links-wuerfel {
    background-image: url(../img/4/wuerfel.svg);
}

body.type_4 div#menu a#menu-links-info {
    background-image: url(../img/4/info_ohne.svg);
}

body.type_4 div#menu a#menu-links-notiz {
    background-image: url(../img/4/notiz.svg);
}

body.type_4 div#menu a#menu-links-notiz-frei {
    background-image: url(../img/4/stift.svg);
}

body.type_4 a#next {
    background-image: url(../img/4/weiter.svg);
}

body.type_4 a#prev {
    background-image: url(../img/4/weiter.svg);
}

body.type_4 a.actionbutton.vhsHotspot {
    background-image: url(../img/4/vhs.svg);
}

body.type_4 a.actionbutton.exerciseHotspot {
    background-image: url(../img/4/aufgabe.svg);
}

body.type_4 a.actionbutton.zoomHotspot {
    background-image: url(../img/4/bild_gross.svg);
}

body.type_4 a.actionbutton.videoHotspot {
    background-image: url(../img/4/video.svg);
}

body.type_4 a.actionbutton.audioHotspot {
    background-image: url(../img/4/audio.svg);
}

body.type_4 div.menu-overlay-header:after {
    background-image: url(../img/4/menu.svg);
}

body.type_4 div.wuerfel-overlay-header:after {
    background-image: url(../img/4/wuerfel.svg);
}

body.type_4 .dialog {
    border: 2px solid #b70e0c;
}

body.type_4 .text-link {
    background-color: #b70e0c;
}

body.type_4 div.note-move {
    border-color: #b70e0c;
}

body.type_4 .freedraw-menu-label input {
    accent-color: #b70e0c;
}

body.type_4 .freedraw-menu-button.active {
    border-color: #b70e0c;
}

@media (orientation: portrait) {
    body.type_4 .pdf-side.left, body.type_4 .pdf-side.right {
        &::before {
            box-shadow: -15px 0 15px -15px #b70e0c inset;
        }

        &::after {
            box-shadow: 15px 0 15px -15px #b70e0c inset;
        }
    }
}

/*------------- Type 5 ----------------*/

body.type_5 *:focus-visible {
    outline-color: #009BA4 !important;
}

body.type_5 div#menu div#menu-strich-oben {
    border-bottom: 2px solid #009BA4;
}

body.type_5 a.closebutton, body.type_5 div.phase6-popup, body.type_5 div.vhs-popup, body.type_5 div.popup, body.type_5 a.button, body.type_5 .flip-card>div, body.type_5 div.aufgabe-answer>input[type="checkbox"]+label::before, body.type_5 div.aufgabe-answer>input[type="radio"]+label::before, body.type_5 .drop-element.text>.text, body.type_5 .drag-item.dnd, body.type_5 .drop-element.image>.image, body.type_5 .sortable-sentence>.part {
    border: 2px solid #009BA4;
}

body.type_5 div.menu-overlay {
    border-right: 2px solid #009BA4;
}

body.type_5 div.popup-header {
    border-bottom: 1px solid #009BA4;
}

body.type_5 div.menu-overlay-chapter-title, body.type_5 div.wuerfel-chapter-title, body.type_5 div.aufgabe-image>img {
    border: 1px solid #009BA4;
}

body.type_5 .drag-item.zuordnung {
    border: 0.2vh solid #009BA4;
}

body.type_5 div#menu a#menu-links-anleitung, body.type_5 div#menu a#menu-links-impressum, body.type_5 .menu-overlay-chapter-title>.text, body.type_5 div.wuerfel-overlay-content a, body.type_5 div.wuerfel-chapter-title>.text, body.type_5 div.popup-titel, body.type_5 a.button, body.type_5 .flip-card .front, body.type_5 .drop-element.text>.text, body.type_5 .drag-item.dnd, body.type_5 .drag-item.zuordnung, body.type_5 .sortable-sentence>.part {
    color: #009BA4;
}

body.type_5 a.closebutton:hover, body.type_5 a.button:hover {
    background-color: #009BA4 !important;
}

body.type_5 div.menu-overlay-zwischenueberschrift, body.type_5 .menu-overlay-chapter-title>.number, body.type_5 div.wuerfel-chapter-title>.number, body.type_5 div.popup-nummer, body.type_5 div.aufgabe-answer>input[type="checkbox"]:checked+label::before, body.type_5 div.aufgabe-answer>input[type="radio"]:checked+label::before, body.type_5 .sentence-number, body.type_5 .underline {
    background-color: #009BA4;
}

body.type_5 .drop-element.image>.droppable, body.type_5 .drop-element.text>.droppable, body.type_5 .droppable.dnd {
    border: 2px dashed #009BA4;
}

body.type_5 .drop-element.image>.droppable, body.type_5 .drop-element.text>.droppable, body.type_5 .droppable.dnd {
    background-color: transparent;
}

body.type_5 .droppable, body.type_5 .droppable.dnd.hover {
    background-color: #fdd7d6;
}

body.type_5 div.content>div:not(.pdf-mode):before, body.type_5 .pdf-wrapper:before {
    box-shadow: -15px 0 15px -15px #009BA4 inset;
}

body.type_5 div.content>div:not(.pdf-mode):after, body.type_5 .pdf-wrapper:after {
    box-shadow: 15px 0 15px -15px #009BA4 inset;
}

body.type_5 div#menu a#menu-links-menu {
    background-image: url(../img/5/menu.svg);
}

body.type_5 div#menu a#menu-links-zoom-in {
    background-image: url(../img/5/zoom_in.svg);
}

body.type_5 div#menu a#menu-links-zoom-out {
    background-image: url(../img/5/zoom_out.svg);
}

body.type_5 div#menu a#menu-links-full-screen {
    background-image: url(../img/5/vollbild.svg);
}

body.type_5 div#menu a#menu-links-wuerfel {
    background-image: url(../img/5/wuerfel.svg);
}

body.type_5 div#menu a#menu-links-info {
    background-image: url(../img/5/info_ohne.svg);
}

body.type_5 div#menu a#menu-links-notiz {
    background-image: url(../img/5/notiz.svg);
}

body.type_5 div#menu a#menu-links-notiz-frei {
    background-image: url(../img/5/stift.svg);
}

body.type_5 a#next {
    background-image: url(../img/5/weiter.svg);
}

body.type_5 a#prev {
    background-image: url(../img/5/weiter.svg);
}

body.type_5 a.actionbutton.vhsHotspot {
    background-image: url(../img/5/vhs.svg);
}

body.type_5 a.actionbutton.exerciseHotspot {
    background-image: url(../img/5/aufgabe.svg);
}

body.type_5 a.actionbutton.zoomHotspot {
    background-image: url(../img/5/bild_gross.svg);
}

body.type_5 a.actionbutton.videoHotspot {
    background-image: url(../img/5/video.svg);
}

body.type_5 a.actionbutton.audioHotspot {
    background-image: url(../img/5/audio.svg);
}

body.type_5 div.menu-overlay-header:after {
    background-image: url(../img/5/menu.svg);
}

body.type_5 div.wuerfel-overlay-header:after {
    background-image: url(../img/5/wuerfel.svg);
}

body.type_5 .dialog {
    border: 2px solid #009BA4;
}

body.type_5 .text-link {
    background-color: #009BA4;
}

body.type_5 div.note-move {
    border-color: #009BA4;
}

body.type_5 .freedraw-menu-label input {
    accent-color: #009BA4;
}

body.type_5 .freedraw-menu-button.active {
    border-color: #009BA4;
}

@media (orientation: portrait) {
    body.type_4 .pdf-side.left, body.type_4 .pdf-side.right {
        &::before {
            box-shadow: -15px 0 15px -15px #009BA4 inset;
        }

        &::after {
            box-shadow: 15px 0 15px -15px #009BA4 inset;
        }
    }
}

/*------------- Type 6 ----------------*/

body.type_6 *:focus-visible {
    outline-color: #027b91 !important;
}

body.type_6 div#menu div#menu-strich-oben {
    border-bottom: 2px solid #027b91;
}

body.type_6 a.closebutton, body.type_6 div.phase6-popup, body.type_6 div.vhs-popup, body.type_6 div.popup, body.type_6 a.button, body.type_6 .flip-card>div, body.type_6 div.aufgabe-answer>input[type="checkbox"]+label::before, body.type_6 div.aufgabe-answer>input[type="radio"]+label::before, body.type_6 .drop-element.text>.text, body.type_6 .drag-item.dnd, body.type_6 .drop-element.image>.image, body.type_6 .sortable-sentence>.part {
    border: 2px solid #027b91;
}

body.type_6 div.menu-overlay {
    border-right: 2px solid #027b91;
}

body.type_6 div.popup-header {
    border-bottom: 1px solid #027b91;
}

body.type_6 div.menu-overlay-chapter-title, body.type_6 div.wuerfel-chapter-title, body.type_6 div.aufgabe-image>img {
    border: 1px solid #027b91;
}

body.type_6 .drag-item.zuordnung {
    border: 0.2vh solid #027b91;
}

body.type_6 div#menu a#menu-links-anleitung, body.type_6 div#menu a#menu-links-impressum, body.type_6 .menu-overlay-chapter-title>.text, body.type_6 div.wuerfel-overlay-content a, body.type_6 div.wuerfel-chapter-title>.text, body.type_6 div.popup-titel, body.type_6 a.button, body.type_6 .flip-card .front, body.type_6 .drop-element.text>.text, body.type_6 .drag-item.dnd, body.type_6 .drag-item.zuordnung, body.type_6 .sortable-sentence>.part {
    color: #027b91;
}

body.type_6 a.closebutton:hover, body.type_6 a.button:hover {
    background-color: #027b91 !important;
}

body.type_6 div.menu-overlay-zwischenueberschrift, body.type_6 .menu-overlay-chapter-title>.number, body.type_6 div.wuerfel-chapter-title>.number, body.type_6 div.popup-nummer, body.type_6 div.aufgabe-answer>input[type="checkbox"]:checked+label::before, body.type_6 div.aufgabe-answer>input[type="radio"]:checked+label::before, body.type_6 .sentence-number, body.type_6 .underline {
    background-color: #027b91;
}

body.type_6 .drop-element.image>.droppable, body.type_6 .drop-element.text>.droppable, body.type_6 .droppable.dnd {
    border: 2px dashed #027b91;
}

body.type_6 .drop-element.image>.droppable, body.type_6 .drop-element.text>.droppable, body.type_6 .droppable.dnd {
    background-color: transparent;
}

body.type_6 .droppable, body.type_6 .droppable.dnd.hover {
    background-color: #fdd7d6;
}

body.type_6 div.content>div:not(.pdf-mode):before, body.type_6 .pdf-wrapper:before {
    box-shadow: -15px 0 15px -15px #027b91 inset;
}

body.type_6 div.content>div:not(.pdf-mode):after, body.type_6 .pdf-wrapper:after {
    box-shadow: 15px 0 15px -15px #027b91 inset;
}

body.type_6 div#menu a#menu-links-menu {
    background-image: url(../img/6/menu.svg);
}

body.type_6 div#menu a#menu-links-zoom-in {
    background-image: url(../img/6/zoom_in.svg);
}

body.type_6 div#menu a#menu-links-zoom-out {
    background-image: url(../img/6/zoom_out.svg);
}

body.type_6 div#menu a#menu-links-full-screen {
    background-image: url(../img/6/vollbild.svg);
}

body.type_6 div#menu a#menu-links-wuerfel {
    background-image: url(../img/6/wuerfel.svg);
}

body.type_6 div#menu a#menu-links-info {
    background-image: url(../img/6/info_ohne.svg);
}

body.type_6 div#menu a#menu-links-notiz {
    background-image: url(../img/6/notiz.svg);
}

body.type_6 div#menu a#menu-links-notiz-frei {
    background-image: url(../img/6/stift.svg);
}

body.type_6 a#next {
    background-image: url(../img/6/weiter.svg);
}

body.type_6 a#prev {
    background-image: url(../img/6/weiter.svg);
}

body.type_6 a.actionbutton.vhsHotspot {
    background-image: url(../img/6/vhs.svg);
}

body.type_6 a.actionbutton.exerciseHotspot {
    background-image: url(../img/6/aufgabe.svg);
}

body.type_6 a.actionbutton.zoomHotspot {
    background-image: url(../img/6/bild_gross.svg);
}

body.type_6 a.actionbutton.videoHotspot {
    background-image: url(../img/6/video.svg);
}

body.type_6 a.actionbutton.audioHotspot {
    background-image: url(../img/6/audio.svg);
}

body.type_6 div.menu-overlay-header:after {
    background-image: url(../img/6/menu.svg);
}

body.type_6 div.wuerfel-overlay-header:after {
    background-image: url(../img/6/wuerfel.svg);
}

body.type_6 .dialog {
    border: 2px solid #027b91;
}

body.type_6 .text-link {
    background-color: #027b91;
}

body.type_6 div.note-move {
    border-color: #027b91;
}

body.type_6 .freedraw-menu-label input {
    accent-color: #027b91;
}

body.type_6 .freedraw-menu-button.active {
    border-color: #027b91;
}

@media (orientation: portrait) {
    body.type_4 .pdf-side.left, body.type_4 .pdf-side.right {
        &::before {
            box-shadow: -15px 0 15px -15px #027b91 inset;
        }

        &::after {
            box-shadow: 15px 0 15px -15px #027b91 inset;
        }
    }
}