:root {


/*Unit*/
    --unit-feinregler: 3px;
    --unit: calc(var(--unit-feinregler) / 1);
    --unit-body-margin: calc(var(--unit) * 3);

    --unit-padding-left-right: calc(var(--unit) * 0);
    --unit-padding-top-bottom: calc(var(--unit) * 4);

    --variable-border: 1px;
    --variable-border-radius: 6px;

/*Container heights*/
    --project-titel-height: calc(var(--unit) * 16);
    --project-info-height: calc(var(--unit) * 24);
    --presentation-space-padding: calc(var(--unit) * 8);
    --presentation-space-padding-2: calc(var(--presentation-space-padding) * 2);
    --presentation-space-padding-3: calc(var(--presentation-space-padding) * 3);

    --presentation-space-gap: calc(var(--unit) * 8);

    --presentation-space-height:
            calc(100vh
            - var(--unit-body-margin) * 1
            - var(--project-titel-height)
            - var(--project-info-height));
    --presentation-space-height-two-rows:
            calc((100vh
            - var(--unit-body-margin) * 1
            - var(--project-titel-height)
            - var(--project-info-height))/2);

    --presentation-space-width:
            calc(100vw
            - var(--unit-body-margin) * 2);


/*picture-heights*/

    --picture-height-one-one-row:
            calc(var(--presentation-space-height)
            - var(--presentation-space-padding) * 2
            );

    --picture-height-one-half-row:
            calc(var(--picture-height-one-one-row) / 2
            - var(--presentation-space-gap) / 2
            );

    --picture-height-one-third-row:
            calc(var(--picture-height-one-one-row) / 3
            - var(--presentation-space-gap) / 2
            );

    --picture-height-two-third-row:
            calc(var(--picture-height-one-one-row) / 3 * 2
            - var(--presentation-space-gap) / 2
            );

    --picture-height-one-quart-row:
            calc(var(--picture-height-one-half-row) / 2
            - (var(--presentation-space-gap) / 2 )
            );







    /*ratio poster*/

    --width-100-prozent: 100vw;

    --variable-colums-number: 3;

    --img-width-x-colums: calc(99vw / var(--variable-colums-number));
    --poster-font-line-height-x-colums: calc(99vw / var(--variable-colums-number) * 7 / 8 / 6);
    --poster-font-size-x-colums: calc(99vw / var(--variable-colums-number) / 5.5);

    --poster-claim-font-line-height-x-colums: calc(99vw / var(--variable-colums-number) * 7 / 8 / 12);
    --poster-claim-font-size-x-colums: calc(99vw / var(--variable-colums-number) / 12.4);

    --poster-artist-font-line-height-x-colums: calc(99vw / var(--variable-colums-number) * 7 / 8 / 10);
    --poster-artist-font-size-x-colums: calc(99vw / var(--variable-colums-number) / 9.8);


    --ratio-1zu1: 1;
    --height-1zu1: calc(var(--width-100-prozent) * var(--ratio-1zu1));

    --ratio-4zu3: 3 / 4;
    --height-4zu3: calc(var(--width-100-prozent) * var(--ratio-4zu3));

    --ratio-3zu4: 4 / 3;
    --height-3zu4: calc(var(--width-100-prozent) * var(--ratio-3zu4));

    --ratio-3zu2: 2 / 3;
    --height-3zu2: calc(var(--width-100-prozent) * var(--ratio-3zu2));

    --ratio-16zu9: 9 / 19;
    --height-16zu9: calc(var(--width-100-prozent) * var(--ratio-16zu9));


    /*slide-show*/
    --variable-max-width: 1200px;
    --variable-pic-slide-height: calc(100vh - 4.5 * var(--sticky-pos-1));
    --variable-3zu2-width: calc(var(--variable-pic-slide-height) / 2 * 3);


    --sticky-pos-1: calc(var(--zab-6) +
    var(--unit-padding-top-bottom) * 2 +
    var(--unit-body-margin) +
    var(--variable-border) * 2);

    --sticky-pos-2: calc(var(--zab-6) * 2 +
    var(--unit-padding-top-bottom) * 4 +
    var(--unit-body-margin) +
    var(--variable-border) * 4);

    --sticky-pos-3: calc(var(--zab-6) * 3 +
    var(--unit-padding-top-bottom) * 6 +
    var(--unit-body-margin) +
    var(--variable-border) * 6);

   



    --zab-2: calc(var(--unit) * 2);
    --zab-3: calc(var(--unit) * 3);
    --zab-4: calc(var(--unit) * 4);
    --zab-5: calc(var(--unit) * 5);
    --zab-6: calc(var(--unit) * 6);
    --zab-7: calc(var(--unit) * 7);
    --zab-8: calc(var(--unit) * 8);
    --zab-9: calc(var(--unit) * 9);
    --zab-10: calc(var(--unit) * 10);
    --zab-12: calc(var(--unit) * 12);
    --zab-20: calc(var(--unit) * 20);


    --square-36: calc(var(--zab-6) + (var(--variable-border) * 2) + (var(--unit-padding-top-bottom) * 2));



    --font-size-2: calc(var(--unit) * 2);
    --font-size-3: calc(var(--unit) * 3);
    --font-size-4: calc(var(--unit) * 4);
    --font-size-5: calc(var(--unit) * 4.8);
    --font-size-6: calc(var(--unit) * 5.6);
    --font-size-7: calc(var(--unit) * 7.1);
    --font-size-8: calc(var(--unit) * 7.3);
    --font-size-9: calc(var(--unit) * 8.5);
    --font-size-10: calc(var(--unit) * 10.8);
    --font-size-12: calc(var(--unit) * 13);

    --font-size-20: calc(var(--unit) * 24);


}

.sticky-pos-0 {
    position: sticky;
    top: var(--unit-body-margin);
}


.sticky-pos-1 {
    position: sticky;
    top: var(--sticky-pos-1);
}

.sticky-pos-2 {
    position: sticky;
    top: var(--sticky-pos-2);
}


.sticky-pos-3 {
    position: sticky;
    top: var(--sticky-pos-3)
}

/*Schriftgrössen*/
.zab-2 {
    line-height: var(--zab-2);
    font-size: var(--font-size-2);
}

.zab-3 {
    line-height: var(--zab-3);
    font-size: var(--font-size-3);
}

.zab-4 {
    line-height: var(--zab-4);
    font-size: var(--font-size-4);
}

.zab-5 {
    line-height: var(--zab-5);
    font-size: var(--font-size-5);
}

.zab-6 {
    line-height: var(--zab-6);
    font-size: var(--font-size-6);
}


.zab-7 {
    line-height: var(--zab-7);
    font-size: var(--font-size-7);
}

.zab-8 {
    line-height: var(--zab-8);
    font-size: var(--font-size-8);
}


.zab-10 {
    line-height: var(--zab-10);
    font-size: var(--font-size-10);
    width: 95%;
}

.zab-12 {
    line-height: var(--zab-12);
    font-size: var(--font-size-12);
    width: 95%;
}

.zab-20 {
    line-height: var(--zab-20);
    font-size: var(--font-size-20);
    width: 95%;
}

/*wird nicht gebraucht, das padding ist auf dem block*/
.zab-2, .zab-3, .zab-4, .zab-5, .zab-6, .zab-7, .zab-8, .zab-10, .zab-12 {
    /*padding-left: calc(var(--unit-padding) * 2);*/
    /*padding-right: calc(var(--unit-padding) * 2);*/
}