.qCont, .fCont {
    background-color: var(--backgroundLightBlue);
    /* padding: 20px 20px; */
    overflow: hidden;
    position: relative;
    height: 100em;
    width: 100%;
    max-width: 100%;

    /* background-image: url("../images/entscheidungshilfe/treeTemp.svg");
    background-size: 80%; 
    background-repeat: no-repeat;
    background-position: 0% 85%;
    background-blend-mode: normal; */
    
}
.backgroundImage {
    position: absolute;
    top: 40%;
    left: 30%;
    width: 70%;
    transform: translate(0, -50%) rotate(180deg);
    filter: var(--networkBlueFilter);
    opacity: 0.2;
}
#DIV_TEXT_welcome {
    background: rgba(255,255,255, 0.8);
}
#welcomeLogo {
    width: 40%
}
@media only screen and (max-width: 600px){
    #welcomeLogo {
    width: 60%
}
}
#DIV_TEXT_welcome > h1 {
    color: var(--networkBlack);
    text-align: center;
    font-size: 24px;
    width: 60%;
    margin: 0 auto 2em;
    
}
#DIV_TEXT_welcome > p {
    /* background: rgba(18, 161, 154, 0.8);; */
    border-radius: 0.8em;
    width: 60%;
    margin: 1em auto;
    /* padding: 0.8em 1em 1.5em 1em; */
    color: var(--networkBlack);
    /* text-align: center; */
}
#DIV_TEXT_welcome > ul {
    width: 85%;
    margin: auto;
}
#DIV_TEXT_welcome > ul > li {
    margin-bottom: 0.5em;
}
#DIV_TEXT_welcome > h1, #DIV_TEXT_welcome > p {
    width: 90%;
}
#start {
    background: var(--networkTurqoise)
}
#start, .qCont .submitButton {
    border: 3px solid rgba(255,255,255,0.7);
}
#start:hover {
    background: hwb(177 7% 27%);
}
#useCase2Container {
    font-size: 0.9em;
    width: 60%;
    min-width: 200px;
    margin: 2em auto;
    text-align: center;
}
#useCase2Container a {
    text-decoration: none;
    font-weight: bold;
    color: var(--networkBlue)
}
#useCase2Container a:hover {
    text-decoration: underline;
}
.qCont .submitButton:hover {
    background: hwb(205 6% 12%);
}
.qDiv {
    /* background: rgba(18, 161, 154, 0.8); */
    background: white;
    padding: 20px 20px;
    /* color: white; */
    color: var(--networkBlack);
    margin-bottom: 20px;
    position: absolute;
    left: 50%;
    top: 8%;
    width: calc(100% - 5em);
    max-width: 630px;
    transform: translate(-50%, 0);
    opacity: 1;
    transition: all 0.5s ease;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
@media only screen and (max-width: 600px){
    .qCont {
        height: 100em
    }
    .qDiv {
        top: 0.5em;
        transform: translate(-50%, 0);
        width: calc(100% - 3em);
    }
}

.qDiv.upcoming {
    left: 150%;
    opacity: 0;
}
.qDiv.past {
    left: -50%;
    opacity: 0;
}

#DIV_TEXT_labore a {
    text-decoration: none;
    font-weight: bold;
    color: var(--networkTurqoise)
}

#DIV_TEXT_labore a::before {
    content: "";
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("../../images/link.svg");
    filter: var(--networkTurqoiseFilter);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
#DIV_TEXT_labore ul {
    margin-top: 2em;
    margin-bottom: 4em;
}
#DIV_TEXT_labore li {
    margin-bottom: 1em;
}
/* p.qText  {
    margin-bottom: 0;
} */
/* "Context" accordeon */
.context {
    color: var(--networkTurqoise);
    transition: all 0.4s ease;
    padding-left: 0.5em;
}
div.context {
    margin-top: -0.5em;
    margin-bottom: 1em;
}
.context h5 {
    font-size: inherit;
    margin: 0 0;
    padding: 0 0;
    height: 1.5em;
    box-sizing: border-box;
    position: relative; 
    cursor: pointer;
}
.context h5 > * {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}
.context h5 > img {
    left:  0.5em;
    height: 0.5em;
    width: auto;
    filter: var(--networkTurqoiseFilter); 
    transition: all 0.4s ease;
}
.context h5 > span {
    left: 1.5em
}
.context h5:hover {
    opacity: 0.8;
}
.context.open {
    background: rgba(18, 161, 154, 0.08);
    padding: 0.8em 0.5em 0.3em;
}
.context .contextContent {
    height: 0;
    visibility: hidden;
    overflow: hidden;
    /* display: none; */
    padding: 0 0.6em 0.2em 0;
    margin-top: 0;
    font-size: 0.95em;
    line-height: 1.25em;
    transition: all 0.4s ease;
}
.context .contextContent ul {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: disc;
}
.context .contextContent p {
    padding-left: 1.5em
}
.context .contextContent li, .context .contextContent p {
    margin-top: 0;
    margin-bottom: 0.5em;
}
.context .contextContent a {
    text-decoration: none;
    color: inherit
}
.context.open h5 > img {
    transform: rotate(90deg) translate(-50%, 0);
}


.aDiv {
    margin-bottom: 0.4em;
    padding: 0 1em;
    width: calc(100%-40px);
    transition: all 0.5s ease;
    border-radius: 0.4em;
    border: 2px rgba(18, 161, 154, 0.2) solid;
}
.aDiv:hover {
    background: rgba(18, 161, 154, 0.2) 
}
.aDiv.highlighted {
    background: rgb(18, 161, 154);
    border: 2px rgb(18, 161, 154) solid;
    color: white;
}
input[type='radio'], input[type='checkbox']{
   opacity: 0;
   width: 1px;
   height: 1px;
   margin-left: -1px;
   margin-right: 0;
   overflow: hidden;
}
input[type='radio'] + label, input[type='checkbox'] + label {
    background: rgba(255,255,255,0);
    cursor: pointer;
    width: calc(100%);
    display: inline-block;
    padding: 0.5em 1em;
    margin-left: -1em;
    margin-right: -1em;
    border-radius: 0.4em;
}
input[type='radio']:disabled + label, input[type='checkbox']:disabled + label {
    cursor: auto;
}
.buttonContainer {
    width: 100%;
    height: 3em;
    position: relative;
    margin-top: 1em;
}

.qCont .submitButton, .nextButton.asIcon, .prevButton.asIcon {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 3em;
    margin: 0 0;
    transition: all 0.4s ease;
    cursor: pointer;
}
.nextButton.asIcon, .prevButton.asIcon {
    width: 3em;
    border-radius: 3em;
    background: rgba(0,0,0,0);
    background-repeat: no-repeat;
    background-size: 0.8em;
    border: 2px solid var(--networkTurqoise);
    filter: var(--networkTurqoiseFilter);
    opacity: 0.7;
    /* filter: brightness(0) saturate(100%) invert(99%) sepia(80%) saturate(0%) hue-rotate(11deg) brightness(109%) contrast(100%); */
}
.nextButton.asIcon {
    background-image: url("../../images/fwd3.svg");
    background-position: 55% 50%;
    left: calc(85% + 0em)
}
.prevButton.asIcon {
    background-image: url("../../images/bwd3.svg");
    background-position: 45% 50%;
    left: calc(15% - 0em)
}
.nextButton.asIcon:disabled, .prevButton.asIcon:disabled {
    opacity: 0.2;
    transition: all 0.4s ease;
    cursor: auto;
}

#whichPart {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 0.8em;
    font-style: italic;
    color: rgba(18, 161, 154, 0.4) !important;
    visibility: hidden;
}
#whichPart.show {
    visibility: visible
}
div.progressBar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 1em;
    opacity: 0;
    border: 1px solid rgba(18, 161, 154, 0.2); 
    border-radius: 1em;
    display: flex;
    flex-direction: row;
    align-content: space-evenly;
    overflow: hidden;
}

.progressBar .bit {
    flex-grow: 1;
}
.progressBar .bit.full {
    background: rgba(18, 161, 154, 0.4);
}

/* .progressBar .phase {
    width: calc(25% - 0px);
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-top: 1px solid rgba(18, 161, 154, 0.3);
    border-bottom: 1px solid rgba(18, 161, 154, 0.3); 
}

.progressBar .first.phase {
    border-radius: 1em 0 0 1em;
    left: 12.5%;
}
.progressBar .first.phase:not(.active) {
    border-right: 1px solid rgba(18, 161, 154, 0.3);
}
.progressBar:not(.discreet) .first.phase.active {
    border-radius: 1em 0.2em 0.2em 1em;
    border: 1px solid rgba(18, 161, 154, 0.9);
}

.progressBar .second.phase {
    left: 37.5%; 
}
.progressBar .second.phase:not(.active) {
    border-right: 1px solid rgba(18, 161, 154, 0.3);
}
.progressBar:not(.discreet) .second.phase.active {
    border-radius: 0.2em;
    border: 1px solid rgba(18, 161, 154, 0.9);
}

.progressBar .third.phase {
    left: 62.5%;
}
.progressBar .third.phase:not(.active) {
    border-right: 1px solid rgba(18, 161, 154, 0.3);
}
.progressBar:not(.discreet) .third.phase.active {
    border-radius: 0.2em;
    border: 1px solid rgba(18, 161, 154, 0.9);
}

.progressBar .fourth.phase {
    border-radius: 0 1em 1em 0em;
    left: 87.5%;
}
.progressBar:not(.discreet) .fourth.phase.active {
    border-radius: 0.2em 1em 1em 0.2em;
    border: 1px solid rgba(18, 161, 154, 0.9);
}

.progressBar .full {
    background: rgba(18, 161, 154, 0.2);
    z-index:2
}
.progressBar .active {
    background: rgba(18,161,154,0.1);
    border-color: var(--networkTurqoise);
    z-index:3;
}
.progressBar:not(.discreet) .active {
    border: 1.5px solid hsl(205, 85%, 49%);
    background: hsl(205, 85%, 79%);
    background: radial-gradient(hsl(205, 85%, 95%) 0%, hsl(205, 85%, 85%) 100%);
}
div.progressBar.discreet .full {
    background: rgba(18, 161, 154, 0.4);
}
div.progressBar.discreet .active {
    background: rgb(18,161,154);
    box-shadow: none;
} */

.qCont .submitButton {
    left: 50%;
    border-radius: 1em;
    padding: 0.5em 1em;
    color: white;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.05em;
    background: var(--networkBlue)
}
.sources {
    font-size: 0.8em;
}

h3.addedTitle {
    text-align: center;
}