/*Globale Attribute*/

/*Local Hosting of Rubik font*/

@font-face {
    font-family: 'Rubik';
    src: url('Rubik-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

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

html, body {
    height: 100%;
    font-family: 'Rubik', monospace;
    font-size: 2.25vh;
    -webkit-text-size-adjust: 100%;
    overflow: hidden;
}

/*Header*/

header {
    display: flex;
    align-items: center;
    padding: 4vh;
}

#iudexcalculat-logo {
    height: 4.5vh;
    position: absolute;
    left: 2.5vw;
    top: 3vh;
}

.menu-icon {
    position: absolute;
    top: 5vh;
    right: 3.45vw;
}

.header-content {
    margin-right: 2vw;
}

.fa-bars, .fa-xmark {
    cursor: pointer;
    position: absolute;
    transition: transform 0.3s ease;
}

.fa-xmark {
    transform: scale(0);
    z-index: 1;
}

.menu {
    position: fixed;
    top: 0;
    left: -17.5vw;
    width: 17.5vw;
    height: 100%;
    background-color: black;
    color: white;
    transition: left 0.3s ease;
    z-index: 999;
    padding: 1.5vh;
    max-width: 300px;
    left: calc(-1 * min(17.5vw, 300px));
}

.menu ul {
    list-style: none;
}

.menu li {
    padding: 1vh;
}

.menu a {
    text-decoration: none;
    color: white;
    transition: color 0.2s ease;
}

.menu a:hover {
    color: #858383;
}

/*Landing Page*/

main {
    position: relative;
}

/*Landing Page - Typewriter*/

.typewriter-landing-page{
    display: flex;
    justify-content: center;
    margin: 22.5vh auto 10vh auto;
    width: fit-content;
}

.typewriter-text {
    border-right: 0.25vw solid black;
    white-space: nowrap;
    overflow: hidden;
    font-size: 3.5vh;
    animation: typing 3s steps(45, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}

/*Landing Page - Examenauswahl*/

.exam-decision{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 0 17.5vw 0 17.5vw;
}

.digit{
    font-size: 7vh;
    text-align: center;
}

.staatsexamen{
    font-size: 1.5vh;
}

.decision-box-second{
    background-color: #2c2c2c;
    cursor: pointer;
    border-radius: 1vh;
    width: 11vw;
    height: 5.5vw;
    transition: transform 0.25s ease;
    text-align: center;
    animation: fadeIn 1s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: white;
    display: flex;
    justify-content: center; /* Vertically align content */
    align-items: center;
    position: relative;
}

.decision-box-second:hover {
    transform: scale(1.05);
    background: transparent;
    color: white;
    background-color: #868686;
}

.decision-box[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    display: none;
    background: rgb(114, 113, 113);
    color: #fff;
    border-radius: 4px;
    padding: 0.8vh 0.8vw;
    font-size: 1.5vh;
    z-index: 999;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    width: 89%;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    transition: opacity 0.3s, transform 0.3s;
}

.decision-box:hover[data-tooltip]:before {
    display: block;
    opacity: 1;
    z-index: 1000;
    transform: translateX(-50%) translateY(-5px);
}

.decision-box[data-tooltip]:before {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.decision-box[data-tooltip]:before:hover {
    background: black;
}

.decision-box:hover {
    background-color: black;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
    border: none;
}

.decision-box.clicked{
    background-color: black;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
}

/*Erstes Staatsexamen: Bundesland-Auswahl*/

.state-path{
    cursor: pointer;
}

.state-path:hover{
    fill: rgb(78, 78, 78);
}

.tooltip, .tooltip3, .tooltipbe, .tooltipbb, .tooltipby, .tooltipbw, .tooltiphe, .tooltiprlp, .tooltipnrw, .tooltipnds {
    position: absolute;
    background: #2c2c2c;
    border-radius: 0.5vw;
    padding: 0.15vw;
    font-size: 1.75vh;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    color: white;
}

.tooltip {
    background: #252525;
    pointer-events: none;
}

.tooltip3    { top: 7vh;    left: 43.5vw; }
.tooltipbe   { top: 16vh;   left: 53vw;   }
.tooltipbb   { top: 15vh;   left: 54vw;   }
.tooltipby   { top: 45vh;   left: 50vw;   }
.tooltipbw   { top: 50vh;   left: 42.5vw; }
.tooltiphe   { top: 37.5vh; left: 42.5vw; }
.tooltiprlp  { top: 43vh;   left: 38vw;   }
.tooltipnrw  { top: 27.5vh; left: 37.5vw; }
.tooltipnds  { top: 20vh;   left: 45vw;   }

.tooltip ul,
.tooltip3 ul,
.tooltipbe ul,
.tooltipbb ul,
.tooltipby ul,
.tooltipbw ul,
.tooltiphe ul,
.tooltiprlp ul,
.tooltipnrw ul,
.tooltipnds ul {
    list-style: none;
    padding: 0.1vw;
    margin: 0;
}

.tooltip ul li,
.tooltip3 ul li,
.tooltipbe ul li,
.tooltipbb ul li,
.tooltipby ul li,
.tooltipbw ul li,
.tooltiphe ul li,
.tooltiprlp ul li,
.tooltipnrw ul li,
.tooltipnds ul li {
    padding: 0.25vw;
    color: white;
}

.tooltip3 ul li:hover,
.tooltipbe ul li:hover,
.tooltipbb ul li:hover,
.tooltipby ul li:hover,
.tooltipbw ul li:hover,
.tooltiphe ul li:hover,
.tooltiprlp ul li:hover,
.tooltipnrw ul li:hover,
.tooltipnds ul li:hover {
    color: darkgray;
    cursor: pointer;
}

#typewriter-fse-state {
    text-align: center;
    margin-top: 2vh;
}

#typewriter-fse-state p {
    font-size: 2vh;
}

#germany-svg-selection-fse {
    justify-content: center;
    position: relative;
    margin-top: 5.5vh;
}

#germanysvg {
    animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*Zweites Staatsexamen - Bundeslandauswahl*/

#typewriter-sse-state{
    text-align: center;
    margin-top: 2vh;
}

#typewriter-sse-state p{
    font-size: 2vh;
}

#germany-svg-selection-sse{
    justify-content: center;
    position: relative;
    margin-top: 5.5vh;
}

#germanysvg-sse{
    animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*Backward-Icon*/

#backwardIcon {
    position: fixed;
    display: none;
    bottom: 3.5vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    cursor: pointer;
    transition: transform 0.2s;
}

#backwardIcon:hover{
    color: black;
    transform: translateX(-50%) scale(1.25);
}

/*Erstes Staatsexamen - Berechnungen*/

#bremen-path,
#sh-path,
#mv-path,
#sn-path,
#sa-path,
#th-path,
#sl-path,
#uhh-path,
#bls-path,
#fu-path,
#hm-path,
#upo-path,
#euv-path,
#fau-path,
#bay-path,
#jlu-path,
#uau-path,
#upa-path,
#rgb-path,
#lmu-path,
#mon-path,
#hdb-path,
#tub-path,
#ksz-path,
#fbg-path,
#ffm-path,
#wsb-path,
#gie-path,
#mrb-path,
#mnz-path,
#tri-path,
#dus-path,
#bnn-path,
#boc-path,
#mün-path,
#clg-path,
#blf-path,
#hgn-path,
#hnv-path,
#osb-path,
#göt-path {
    display: flex;
}

#bremen-path > div,
#sh-path > div,
#mv-path > div,
#sn-path > div,
#sa-path > div,
#th-path > div,
#sl-path > div,
#uhh-path > div,
#bls-path > div,
#fu-path > div,
#hm-path > div,
#upo-path > div,
#euv-path > div,
#fau-path > div,
#bay-path > div,
#jlu-path > div,
#uau-path > div,
#upa-path > div,
#rgb-path > div,
#lmu-path > div,
#mon-path > div,
#hdb-path > div,
#tub-path > div,
#ksz-path > div,
#fbg-path > div,
#ffm-path > div,
#wsb-path > div,
#gie-path > div,
#mrb-path > div,
#mnz-path > div,
#tri-path > div,
#dus-path > div,
#bnn-path > div,
#boc-path > div,
#mün-path > div,
#clg-path > div,
#blf-path > div,
#hgn-path > div,
#hnv-path > div,
#osb-path > div,
#göt-path > div {
    height: 80vh;
}

#br-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#br-equation > div{
    flex-grow: 1;
}

#sh-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sh-equation > div{
    flex-grow: 1;
}

#mv-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mv-equation > div{
    flex-grow: 1;
}

#sn-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sn-equation > div{
    flex-grow: 1;
}

#sa-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sa-equation > div{
    flex-grow: 1;
}

#th-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#th-equation > div{
    flex-grow: 1;
}

#sl-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sl-equation > div{
    flex-grow: 1;
}

#uhh-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#uhh-equation > div{
    flex-grow: 1;
}

#bls-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bls-equation > div{
    flex-grow: 1;
}

#fu-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#fu-equation > div{
    flex-grow: 1;
}

#hm-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hm-equation > div{
    flex-grow: 1;
}

#upo-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#upo-equation > div{
    flex-grow: 1;
}

#euv-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#euv-equation > div{
    flex-grow: 1;
}

#fau-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#fau-equation > div{
    flex-grow: 1;
}

#bay-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bay-equation > div{
    flex-grow: 1;
}

#jlu-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#jlu-equation > div{
    flex-grow: 1;
}

#uau-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#uau-equation > div{
    flex-grow: 1;
}

#upa-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#upa-equation > div{
    flex-grow: 1;
}

#rgb-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#rgb-equation > div{
    flex-grow: 1;
}

#lmu-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#lmu-equation > div{
    flex-grow: 1;
}

#mon-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mon-equation > div{
    flex-grow: 1;
}

#hdb-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hdb-equation > div{
    flex-grow: 1;
}

#tub-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#tub-equation > div{
    flex-grow: 1;
}

#ksz-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ksz-equation > div{
    flex-grow: 1;
}

#fbg-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#fbg-equation > div{
    flex-grow: 1;
}

#ffm-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ffm-equation > div{
    flex-grow: 1;
}

#wsb-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#wsb-equation > div{
    flex-grow: 1;
}

#gie-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#gie-equation > div{
    flex-grow: 1;
}

#mrb-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mrb-equation > div{
    flex-grow: 1;
}

#mnz-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mnz-equation > div{
    flex-grow: 1;
}

#tri-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#tri-equation > div{
    flex-grow: 1;
}

#dus-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#dus-equation > div{
    flex-grow: 1;
}

#bnn-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bnn-equation > div{
    flex-grow: 1;
}

#boc-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#boc-equation > div{
    flex-grow: 1;
}

#mün-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mün-equation > div{
    flex-grow: 1;
}

#clg-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#clg-equation > div{
    flex-grow: 1;
}

#blf-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#blf-equation > div{
    flex-grow: 1;
}

#hgn-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hgn-equation > div{
    flex-grow: 1;
}

#hnv-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hnv-equation > div{
    flex-grow: 1;
}

#osb-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#osb-equation > div{
    flex-grow: 1;
}

#göt-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#göt-equation > div{
    flex-grow: 1;
}

#notenberechnung-bremen-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-sh-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-mv-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-sn-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-sa-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-th-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-sl-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-uhh-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-bls-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-fu-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-hm-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-upo-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-euv-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-fau-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-bay-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-jlu-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-uau-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-upa-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-rgb-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-lmu-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-mon-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-hdb-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-tub-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-ksz-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-fbg-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-ffm-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-wsb-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-gie-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-mrb-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-mnz-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-tri-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-dus-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-bnn-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-boc-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-mün-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-clg-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-blf-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-hgn-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-hnv-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-osb-path {
    float: left;
    width: 33.3%;
}

#notenberechnung-göt-path {
    float: left;
    width: 33.3%;
}

#bremen-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bremen-path a:hover{
    color: darkgray;
}

#sh-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#sh-path a:hover{
    color: darkgray;
}

#mv-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#mv-path a:hover{
    color: darkgray;
}

#sn-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#sn-path a:hover{
    color: darkgray;
}

#sa-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#sa-path a:hover{
    color: darkgray;
}

#th-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#th-path a:hover{
    color: darkgray;
}

#sl-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#sl-path a:hover{
    color: darkgray;
}

#uhh-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#uhh-path a:hover{
    color: darkgray;
}

#bls-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bls-path a:hover{
    color: darkgray;
}

#fu-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#fu-path a:hover{
    color: darkgray;
}

#hm-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hm-path a:hover{
    color: darkgray;
}

#upo-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#upo-path a:hover{
    color: darkgray;
}

#euv-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#euv-path a:hover{
    color: darkgray;
}

#fau-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#fau-path a:hover{
    color: darkgray;
}

#bay-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bay-path a:hover{
    color: darkgray;
}

#jlu-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#jlu-path a:hover{
    color: darkgray;
}

#uau-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#uau-path a:hover{
    color: darkgray;
}

#upa-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#upa-path a:hover{
    color: darkgray;
}

#rgb-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#rgb-path a:hover{
    color: darkgray;
}

#lmu-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#lmu-path a:hover{
    color: darkgray;
}

#mon-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#mon-path a:hover{
    color: darkgray;
}

#hdb-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hdb-path a:hover{
    color: darkgray;
}

#tub-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#tub-path a:hover{
    color: darkgray;
}

#ksz-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#ksz-path a:hover{
    color: darkgray;
}

#fbg-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#fbg-path a:hover{
    color: darkgray;
}

#ffm-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#ffm-path a:hover{
    color: darkgray;
}

#wsb-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#wsb-path a:hover{
    color: darkgray;
}

#gie-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#gie-path a:hover{
    color: darkgray;
}

#mrb-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#mrb-path a:hover{
    color: darkgray;
}

#mnz-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#mnz-path a:hover{
    color: darkgray;
}

#tri-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#tri-path a:hover{
    color: darkgray;
}

#dus-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#dus-path a:hover{
    color: darkgray;
}

#bnn-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bnn-path a:hover{
    color: darkgray;
}

#boc-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#boc-path a:hover{
    color: darkgray;
}

#mün-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#mün-path a:hover{
    color: darkgray;
}

#clg-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#clg-path a:hover{
    color: darkgray;
}

#blf-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#blf-path a:hover{
    color: darkgray;
}

#hgn-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hgn-path a:hover{
    color: darkgray;
}

#hnv-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hnv-path a:hover{
    color: darkgray;
}

#osb-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#osb-path a:hover{
    color: darkgray;
}

#göt-path a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#göt-path a:hover{
    color: darkgray;
}

.parent-path-one {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parent-path-one {
    display: flex;
    align-items: center;
}

.parent-path-one p{
    flex: 1; /* Makes both headlines equally fill the available space */
    text-align: center; /* Adjust the text alignment as needed */
    font-size: 2vh; /* Adjust font size as required */
    color: black;
    animation: fadeIn 1s;
}

.parent-toggle{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    animation: fadeIn 1s;
    padding: 0 27vw;
    cursor: pointer;
}

.parent-toggle p{
    color: #868686;
    font-size: 1vh;
    margin: 0.15vh;
}

.child-toggle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.child-toggle-p-mün{
    color: #868686;
    font-size: 1vh;
    margin: -1vh;
}

.mün-sp-varianten{
    position: relative;
    height: 19vh;
}

.fa-toggle-on{
    color: rgb(72, 72, 72);
}

.fa-toggle-off{
    color: rgb(185, 185, 185);
}

.p-b-t-padd{
    padding: 0 8vw;
}

.p-p-t-th{
    padding: 0 11vw;
}

.p-p-t-fbg{
    padding: 0 11vw;
}

.p-p-t-ffm{
    padding: 0 7vw;
}

.p-p-t-mün{
    padding: 0 7vw;
}

#toggle-uni-version-mün{
    position: absolute;
    top: 97.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.parent-path-two{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    animation: fadeIn 1s;
}

.input-part-state{
    min-height: 35vh;
}

#parent-uhh-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-bls-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-schwerpunkt-bls{
    display: flex;
    flex-wrap: nowrap;
}

#parent-sh-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-fu-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-hm-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-upo-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-euv-two {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.parent-uhh-two-row {
    display: flex;
    gap: 7.5vw;
}
  
.parent-uhh-two-row.centered {
    justify-content: center;
}

.parent-fu-two-row {
    display: flex;
    gap: 7.5vw;
}
  
.parent-fu-two-row.centered {
    justify-content: center;
}

.parent-hm-two-row {
    display: flex;
    gap: 7.5vw;
}
  
.parent-hm-two-row.centered {
    justify-content: center;
}

.parent-upo-two-row {
    display: flex;
    gap: 7.5vw;
}
  
.parent-upo-two-row.centered {
    justify-content: center;
}

.parent-euv-two-row {
    display: flex;
    gap: 7.5vw;
}
  
.parent-euv-two-row.centered {
    justify-content: center;
}

.middle-offset {
    position: absolute;
    top: 80%;/* oder z.B. 1em / 20px, je nach gewünschtem Effekt */
}

.outer-offset {
    position: absolute;
    top: -40%;
}

.s-aver-offset{
    position: absolute;
    top: -50%;
}

.range {
    width: 15vw;
    height: 0.5vh;
    -webkit-appearance: none;
    appearance: none;
    background: #f0f0f0;
    outline: none;
    border-radius: 50%;
    margin: 7vh 0 3vh 0;
    position: relative;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2vh; /* Adjust width of the thumb */
    height: 2vh; /* Adjust height of the thumb */
    border-radius: 50%;
    background: #888;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    z-index: 2;
    margin-top: -0.75vh; /* Adjust positioning */
    position: relative; /* Change to relative */
}
.range::-moz-range-thumb {
    width: 2vh; /* Adjust width of the thumb */
    height: 2vh; /* Adjust height of the thumb */
    border-radius: 50%;
    -moz-appearance: none;
    background: #888;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: absolute;
    top: -50%;
    border: none;
}
.range::-webkit-slider-thumb:hover {
    background: #000;
}
.range::-moz-range-thumb:hover {
    background: #000;
}
.range::-webkit-slider-runnable-track {
    width: 15vw;
    height: 0.5vh;
    background: #ccc;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, #eeeeee 0%, #dfdfdf 25%, #d8d8d8 50%, #d3d3d3 75%, #bbbbbb 100%);
}
.range::-moz-range-track {
    width: 15vw;
    height: 0.5vh;
    background: #ccc;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, #eaeaea 0%, #d5d5d5 25%, #c4c4c4 50%, #bababa 75%, #a2a2a2 100%);
}

.rangevalue {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    flex-basis: 33.33%;
}

.rangevalue[style="display: none;"] {
    flex-basis: 100%; /* Wenn unsichtbar, kann dies z. B. 100% sein, damit der Platz nicht verschwendet wird */
}

.rangevalue span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.75vh;
    color: white;
    padding: 0.7vh 0.9vw;
    background-color: rgb(156, 156, 156);
    border-radius: 0.3vw;
    position: absolute;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 2.75vw;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rangevalueth{
    flex-basis: 50%;
}

.text-between {
    font-size: 1.25vh;
    position: absolute;
    top: 45%;
}

.rangevalue-wrapper {
    position: relative;
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blurred {
    filter: blur(1px);
    pointer-events: none;
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.plus-btn {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(56, 56, 56);
    border-radius: 50%;
    width: 3.5vh;
    height: 3.5vh;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 2vh;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 3;
    user-select: none;
    transition: all 0.3s ease;
}

/* Wenn Button als Minus gezeigt wird – nach oben rechts */
.rangevalue:not(.blurred) + .plus-btn {
    top: 5%;
    left: 80%;
    transform: translate(-50%, -50%);
    background-color: rgb(56, 56, 56);
}

/* Optional: Hover-Stil für Minus */
.rangevalue:not(.blurred) + .plus-btn:hover {
    background-color: black;
}

.plus-btn:hover {
    background-color: #000;
}

.duration-buttons{
    position: absolute;
    top: 80%;
}

.duration-buttons button {
    padding: 0.2vh 1vw;
    font-size: 1vh;
    border: 1px solid rgb(255, 255, 255);
    background-color: rgb(226, 226, 226);
    cursor: pointer;
    transition: background-color 0.2s;
}
  
.duration-buttons button.selected {
    background-color: rgb(111, 111, 111);
    color: white;
}
  
.duration-buttons button:hover {
    background-color: rgb(111, 111, 111);
}

.question-mark{
    position: relative;
}

.question-mark > p {
    margin-top: 1vh;
    color: #818181;
    font-size: 1vh;
    cursor: pointer;
}

.question-mark > p:hover {
    color: #2c2c2c;
}

.tooltipspfbg{
    position: absolute;
    top: 0%;
    left: 50%;
    width: 15vw;
    background: #2c2c2c;
    border-radius: 0.5vw;
    padding: 0.15vw;
    font-size: 1vh;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
}

.tooltipspfbg ul{
    list-style: none;
    padding: 0.1vw;
    margin: 0;
}

.tooltipspfbg ul li{
    padding: 0.25vw;
    color: rgb(255, 255, 255);
}
  
.mdluhh{
    flex-basis: 50%;
}

/*Zweites Staatsexamen - Berechnungen*/

#hb-sse {
    display: flex;
}

#hb-sse > div {
    height: 80vh;
}

#hb-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hb-sse-equation > div{
    flex-grow: 1;
}

#hb-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hb-sse a:hover{
    color: darkgray;
}

#total-grade-hb-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-hbsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-hb-sse {
    float: left;
    width: 33.3%;
}

#parent-hbsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-hbsse-three {
    min-height: 22.5vh;
}

#hhm-sse {
    display: flex;
}

#hhm-sse > div {
    height: 80vh;
}

#hhm-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hhm-sse-equation > div{
    flex-grow: 1;
}

#hhm-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hhm-sse a:hover{
    color: darkgray;
}

#total-grade-hhm-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-hhmsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-hhm-sse {
    float: left;
    width: 33.3%;
}

#parent-hhmsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-hhmsse-three {
    min-height: 22.5vh;
}

#slw-sse {
    display: flex;
}

#slw-sse > div {
    height: 80vh;
}

#slw-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#slw-sse-equation > div{
    flex-grow: 1;
}

#slw-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#slw-sse a:hover{
    color: darkgray;
}

#total-grade-slw-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-slwsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-slw-sse {
    float: left;
    width: 33.3%;
}

#parent-slwsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-slwsse-three {
    min-height: 22.5vh;
}

#mvp-sse {
    display: flex;
}

#mvp-sse > div {
    height: 80vh;
}

#mvp-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mvp-sse-equation > div{
    flex-grow: 1;
}

#mvp-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#mvp-sse a:hover{
    color: darkgray;
}

#total-grade-mvp-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-mvpsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-mvp-sse {
    float: left;
    width: 33.3%;
}

#parent-mvpsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-mvpsse-three {
    min-height: 22.5vh;
}

#saa-sse {
    display: flex;
}

#saa-sse > div {
    height: 80vh;
}

#saa-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#saa-sse-equation > div{
    flex-grow: 1;
}

#saa-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#saa-sse a:hover{
    color: darkgray;
}

#total-grade-saa-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-saasse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-saa-sse {
    float: left;
    width: 33.3%;
}

#parent-saasse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-saasse-three {
    min-height: 22.5vh;
}

#bln-sse {
    display: flex;
}

#bln-sse > div {
    height: 80vh;
}

#bln-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bln-sse-equation > div{
    flex-grow: 1;
}

#bln-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bln-sse a:hover{
    color: darkgray;
}

#total-grade-bln-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-blnsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-bln-sse {
    float: left;
    width: 33.3%;
}

#parent-bln-sse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-blnsse-three {
    min-height: 22.5vh;
}

#bdb-sse {
    display: flex;
}

#bdb-sse > div {
    height: 80vh;
}

#bdb-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bdb-sse-equation > div{
    flex-grow: 1;
}

#bdb-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bdb-sse a:hover{
    color: darkgray;
}

#total-grade-bdb-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-bdbsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-bdb-sse {
    float: left;
    width: 33.3%;
}

#parent-bdb-sse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-bdbsse-three {
    min-height: 22.5vh;
}

#fsn-sse {
    display: flex;
}

#fsn-sse > div {
    height: 80vh;
}

#fsn-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#fsn-sse-equation > div{
    flex-grow: 1;
}

#fsn-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#fsn-sse a:hover{
    color: darkgray;
}

#total-grade-fsn-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-fsnsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-fsn-sse {
    float: left;
    width: 33.3%;
}

#parent-fsnsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-fsnsse-three {
    min-height: 22.5vh;
}

#thr-sse {
    display: flex;
}

#thr-sse > div {
    height: 80vh;
}

#thr-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#thr-sse-equation > div{
    flex-grow: 1;
}

#thr-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#thr-sse a:hover{
    color: darkgray;
}

#total-grade-thr-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-thrsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-thr-sse {
    float: left;
    width: 33.3%;
}

#parent-thrsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-thrsse-three {
    min-height: 22.5vh;
}

#bay-sse {
    display: flex;
}

#bay-sse > div {
    height: 80vh;
}

#bay-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bay-sse-equation > div{
    flex-grow: 1;
}

#bay-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#bay-sse a:hover{
    color: darkgray;
}

#total-grade-bay-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-baysse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-bay-sse {
    float: left;
    width: 33.3%;
}

#parent-baysse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-baysse-three {
    min-height: 22.5vh;
}

#baw-sse {
    display: flex;
}

#baw-sse > div {
    height: 80vh;
}

#baw-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#baw-sse-equation > div{
    flex-grow: 1;
}

#baw-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#baw-sse a:hover{
    color: darkgray;
}

#total-grade-baw-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-bawsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-baw-sse {
    float: left;
    width: 33.3%;
}

#parent-bawsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-bawsse-three {
    min-height: 22.5vh;
}

#hsn-sse {
    display: flex;
}

#hsn-sse > div {
    height: 80vh;
}

#hsn-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hsn-sse-equation > div{
    flex-grow: 1;
}

#hsn-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#hsn-sse a:hover{
    color: darkgray;
}

#total-grade-hsn-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-hsnsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-hsn-sse {
    float: left;
    width: 33.3%;
}

#parent-hsnsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-hsnsse-three {
    min-height: 22.5vh;
}

#rlp-sse {
    display: flex;
}

#rlp-sse > div {
    height: 80vh;
}

#rlp-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#rlp-sse-equation > div{
    flex-grow: 1;
}

#rlp-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#rlp-sse a:hover{
    color: darkgray;
}

#total-grade-rlp-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-rlpsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-rlp-sse {
    float: left;
    width: 33.3%;
}

#parent-rlpsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-rlpsse-three {
    min-height: 22.5vh;
}

#sld-sse {
    display: flex;
}

#sld-sse > div {
    height: 80vh;
}

#sld-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sld-sse-equation > div{
    flex-grow: 1;
}

#sld-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#sld-sse a:hover{
    color: darkgray;
}

#total-grade-sld-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-sldsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-sld-sse {
    float: left;
    width: 33.3%;
}

#parent-sld-sse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-sldsse-three {
    min-height: 22.5vh;
}

#nrw-sse {
    display: flex;
}

#nrw-sse > div {
    height: 80vh;
}

#nrw-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nrw-sse-equation > div{
    flex-grow: 1;
}

#nrw-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#nrw-sse a:hover{
    color: darkgray;
}

#total-grade-nrw-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-nrwsse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-nrw-sse {
    float: left;
    width: 33.3%;
}

#parent-nrwsse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-nrwsse-three {
    min-height: 22.5vh;
}

#nds-sse {
    display: flex;
}

#nds-sse > div {
    height: 80vh;
}

#nds-sse-equation {
    float: left;
    width: 66.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nds-sse-equation > div{
    flex-grow: 1;
}

#nds-sse a{
    text-decoration: none;
    color: black;
    font-size: 1.5vh;
}

#nds-sse a:hover{
    color: darkgray;
}

#total-grade-nds-sse {
    margin-top: 0.25vh;
}

#total-grade-parent-ndssse{
    width: 6.5vw;
    height: 7vh;
}

#canvas-nds-sse {
    float: left;
    width: 33.3%;
}

#parent-ndssse-two {
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#parent-ndssse-three {
    min-height: 22.5vh;
}

.parent-toggle-sse{
    margin-top: -3vh;
}

.parent-toggle-sse-six{
    margin-top: -1.5vh;
}

.parent-toggle-sse-four{
    margin-top: -1vh;
}

/*Global - Results*/

.parent-path-three{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 2.5vh 10vw 0 10vw;
}

#total-grade-parent{
    width: 6.5vw;
    height: 7vh;
}

#total-grade{
    margin-top: 0.25vh;
}

#total-grade-parent-sh{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-sh{
    margin-top: 0.25vh;
}

#total-grade-parent-mv{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-mv{
    margin-top: 0.25vh;
}

#total-grade-parent-sn{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-sn{
    margin-top: 0.25vh;
}

#total-grade-parent-sa{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-sa{
    margin-top: 0.25vh;
}

#total-grade-parent-th{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-th{
    margin-top: 0.25vh;
}

#total-grade-parent-sl{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-sl{
    margin-top: 0.25vh;
}

#total-grade-parent-uhh{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-uhh{
    margin-top: 0.25vh;
}

#total-grade-parent-bls{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-bls{
    margin-top: 0.25vh;
}

#total-grade-parent-fu{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-fu{
    margin-top: 0.25vh;
}

#total-grade-parent-hm{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-hm{
    margin-top: 0.25vh;
}

#total-grade-parent-upo{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-upo{
    margin-top: 0.25vh;
}

#total-grade-parent-euv{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-euv{
    margin-top: 0.25vh;
}

#total-grade-parent-fau{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-fau{
    margin-top: 0.25vh;
}

#total-grade-parent-bay{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-bay{
    margin-top: 0.25vh;
}

#total-grade-parent-jlu{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-jlu{
    margin-top: 0.25vh;
}

#total-grade-parent-uau{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-uau{
    margin-top: 0.25vh;
}

#total-grade-parent-upa{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-upa{
    margin-top: 0.25vh;
}

#total-grade-parent-rgb{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-rgb{
    margin-top: 0.25vh;
}

#total-grade-parent-lmu{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-lmu{
    margin-top: 0.25vh;
}

#total-grade-parent-mon{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-mon{
    margin-top: 0.25vh;
}

#total-grade-parent-hdb{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-hdb{
    margin-top: 0.25vh;
}

#total-grade-parent-tub{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-tub{
    margin-top: 0.25vh;
}

#total-grade-parent-ksz{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-ksz{
    margin-top: 0.25vh;
}

#total-grade-parent-fbg{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-fbg{
    margin-top: 0.25vh;
}

#total-grade-parent-ffm{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-ffm{
    margin-top: 0.25vh;
}

#total-grade-parent-wsb{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-wsb{
    margin-top: 0.25vh;
}

#total-grade-parent-gie{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-gie{
    margin-top: 0.25vh;
}

#total-grade-parent-mrb{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-mrb{
    margin-top: 0.25vh;
}

#total-grade-parent-mnz{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-mnz{
    margin-top: 0.25vh;
}

#total-grade-parent-tri{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-tri{
    margin-top: 0.25vh;
}

#total-grade-parent-dus{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-dus{
    margin-top: 0.25vh;
}

#total-grade-parent-bnn{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-bnn{
    margin-top: 0.25vh;
}

#total-grade-parent-boc{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-boc{
    margin-top: 0.25vh;
}

#total-grade-parent-mün{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-mün{
    margin-top: 0.25vh;
}

#total-grade-parent-clg{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-clg{
    margin-top: 0.25vh;
}

#total-grade-parent-blf{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-blf{
    margin-top: 0.25vh;
}

#total-grade-parent-hgn{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-hgn{
    margin-top: 0.25vh;
}

#total-grade-parent-hnv{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-hnv{
    margin-top: 0.25vh;
}

#total-grade-parent-osb{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-osb{
    margin-top: 0.25vh;
}

#total-grade-parent-göt{
    width: 6.5vw;
    height: 7vh;
}

#total-grade-göt{
    margin-top: 0.25vh;
}

.results {
    width: 6vw;
    height: 6.5vh;
    background-color: rgb(0, 0, 0);
    color: white;
    border-radius: 0.5vh;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-align: center;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-digits {
    font-size: 2.45vh;
    padding-top: 1.5vh;
    text-align: center;
}

.result-explanation {
    color: #d4d4d4;
    font-size: 1vh;
}

/*Global - Canvas part*/

.right-text {
    grid-area: right-text;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    padding: 2.75vh 4vw 0 0;
    position: relative;
    /*border-left: dashed 0.1px darkgray;*/
}

.right-text a{
    font-size: 1.6vh;
    color: black;
    text-decoration: none;
}

.right-text a:hover{
    color: darkgray;
    cursor: pointer;
}

.right-text-canvas {
    text-align: center;
    animation: fadeIn 1s;
    display: flex;
    flex-direction: column;
    height: 80vh;
    margin-top: 1.5vh;
}

.right-text-canvas a, p{
    font-size: 1.5vh;
}

.canvas-rightside{
    flex-grow: 1;
    width: 33.33333vw;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 0 0 5vh 0;
}

.canvasbremen, .canvassh, .canvasmv, .canvassn, .canvassa, .canvasth, .canvasth, .canvassl, .canvasuhh, .canvasbls, .canvasfu, .canvashm, .canvasupo, .canvaseuv, .canvasfau, .canvasbay, .canvasjlu, .canvasuau, .canvasupa, .canvasrgb, .canvaslmu, .canvasmon, .canvashdb, .canvastub, .canvasksz, .canvasfbg, .canvasffm, .canvaswsb, .canvasgie, .canvasmrb, .canvasmnz, .canvastri, .canvasdus, .canvasbnn, .canvasboc, .canvasmün, .canvasclg, .canvasblf, .canvashgn, .canvashnv, .canvasosb, .canvasgöt, .canvashbsse, .canvashhmsse, .canvasslwsse, .canvasmvpsse, .canvassaasse, .canvasblnsse, .canvasbdbsse, .canvasfsnsse, .canvasthrsse, .canvasbaysse, .canvasbawsse, .canvashsnsse, .canvasrlpsse, .canvassldsse, .canvasnrwsse, .canvasndssse{
    margin-top: 2vh;
}

.canvas-rightside a {
    margin-bottom: 3vh; /* Abstand zwischen Link und Canvas */
    display: block; /* Damit der Abstand wirkt */
}

.canvas-rightside p {
    margin-bottom: 3vh; /* Abstand zwischen p und Canvas */
}

/*Footer*/

footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    text-align: center;
    z-index: 1000;
    font-size: 1.3vh;
    color: rgb(59, 59, 59);
  }