:root{
    /* ### Bildergalerie (Wrapper1) ### */
    
    /*Wrapper1-Groessen*/
	--wrapper1Height: calc(100vh - var(--scrollbarWidth));
    --wrapper1Width: calc(100vw - var(--scrollbarWidth));
    --w1h: calc(var(--wrapper1Height) / 100);
    --w1w: calc(var(--wrapper1Width) / 100);
    
    /*Grundgeruest-Groessen*/
    --ueberschriftenboxHoehe: calc(20 * var(--w1h));
    --ueberschriftenboxHoeheMax: 140px;
    --footerboxHoehe: calc(10 * var(--w1h));
    --footerboxHoeheMax: 100px;
    --obenUntenGesamt: calc(min(var(--ueberschriftenboxHoehe), var(--ueberschriftenboxHoeheMax)) + min(var(--footerboxHoehe), var(--footerboxHoeheMax)));
    --contentboxHoehe: calc(calc(99.5 * var(--w1h)) - var(--obenUntenGesamt));
    
    /*Content-Groessen*/
    --pfeilBreite: calc(8 * var(--w1w));
    --pfeilBreiteMax: 100px;
    --pfeilHoehe: calc(2.801 * min(var(--pfeilBreite), var(--pfeilBreiteMax)));
    --switchBoxHoehe: calc(0.2 * var(--pfeilHoehe));
    --switchBoxAbstandZuPfeil: 10px;
    --galerieBreite: calc(calc(98 * var(--w1w)) - calc(min(var(--pfeilBreite), var(--pfeilBreiteMax)) * 2));
    --bildCenterHoehe: calc(var(--galerieBreite) * 0.75);
    --galerieBildBorderGroesse: 10px;
    --galerieBildMargin: 1%;
    --galerieBildGesamtGroesse: calc(100% - calc(2 * calc(var(--galerieBildBorderGroesse) + var(--galerieBildMargin))));
}

/* ### Bildergalerie (Wrapper1) ### */

#id_wrapper1 {
    height: var(--wrapper1Height);
    width: var(--wrapper1Width);
    background-color: white;
    margin-left: 0vw;
    margin-top: 0vh;
    position: fixed;
    z-index: 1;
    opacity: 1;
}

#id_ueberschriftenbox {
    height: var(--ueberschriftenboxHoehe);
    max-height: var(--ueberschriftenboxHoeheMax);
    overflow: hidden;
}

#id_contentbox {
    height: var(--contentboxHoehe);
    overflow: hidden;
    margin: 0px var(--galerieBildMargin);
}

#id_footerbox {
    height: var(--footerboxHoehe);
    max-height: var(--footerboxHoeheMax);
    overflow: hidden;
}

#id_schildbox {
    width: min(100%, calc(min(var(--ueberschriftenboxHoehe), var(--ueberschriftenboxHoeheMax)) * 3.66));
    height: min(100%, calc(100 * var(--w1w)) / 3.66);
    margin: auto;
}

#id_schildBild {
    height: 100%;
    width: 100%;
}

#id_galerieBox {
    width: var(--galerieBreite);
    height: 100%;
    float: left;
}

#id_galerieBildCenter {
    width: 100%;
    height: min(100%, var(--bildCenterHoehe));
    text-align: center;
    margin: calc((var(--contentboxHoehe) - min(var(--contentboxHoehe), var(--bildCenterHoehe))) / 2) 0px;
}

#id_galerieBild {
    max-width: var(--galerieBildGesamtGroesse);
    max-height: var(--galerieBildGesamtGroesse);
    margin: var(--galerieBildMargin);
    border: var(--galerieBildBorderGroesse) var(--BilerrahmenFarbeGalerie1) groove;
}

#id_kleineBilderVerschiebung {
    margin-left: calc(50% + ((var(--footerboxHoehe) * 0.6) / 0.75 + 15.3px) * ((var(--bildPos) + 0.5) * -1));
}
.class_pfeilBox {
    width: var(--pfeilBreite);
    max-width: var(--pfeilBreiteMax);
    height: 100%;
    float: left;
}

.class_pfeilBox2 {
    width: 100%;
    height: var(--pfeilHoehe);
    margin: calc((var(--contentboxHoehe) - var(--pfeilHoehe)) / 2) 0px;
}


#id_pfeilBildLinks {
    width: 100%;
    height: 100%;
    transition-duration: 0.1s;
}

#id_pfeilBildLinks:hover {
    cursor: pointer;
}

#id_pfeilBildRechts {
    width: 100%;
    height: 100%;
    transition-duration: 0.1s;
    transform: scaleX(-1);
}

#id_pfeilBildRechts:hover {
    cursor: pointer;
}

.class_kleineBilder {
    float: left;
    height: calc(var(--footerboxHoehe) * 0.6);
    border: 3px grey groove;
    margin-left: 10px;
    margin-top: calc(var(--footerboxHoehe) * 0.2);
    margin-bottom: var(--footerboxHoehe);
}

.class_kleineBilder:hover {
    border: 5px black groove;
    margin-left: 8px;
    margin-top: calc((var(--footerboxHoehe) * 0.2) - 2px);
    margin-right: -2px;
}