.body {
    background-color: rgb(70, 70, 94);
    font-family: noi-grotesk, sans-serif;
    font-weight: 400;
}
@font-face {
    font-family: 'noi-grotesk';
    src: url('../fonts/NoiGrotesk-Regular.woff2') 
    format('woff2');
    font-weight: 400;
}

.Pikto {
    position: fixed;
    width: calc(56 / 1728 * 100vw);
    left: calc(39 / 1728 * 100vw);
    top: calc(28 / 1728 * 100vw);
    z-index: 10;
}

.Pikto:hover polyline {
    fill: white;
}

.matte {
    width: calc(100% / 13 * 12);
    background-image: url(../bilder/raster_hellgrau.svg);
    background-size: calc(100% / 12) auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: calc(100vw / 13);
}

.matte-13 {
    width: calc(100% / 13 * 13);
    background-image: url(../bilder/raster_hellgrau.svg);
    background-size: calc(100% / 13) auto;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-auto-rows: calc(100vw / 13);
}
.matte-startseite {
    width: calc(100% / 13 * 22);
    background-image: url(../bilder/raster_hellgrau.svg);
    background-size: calc(100% / 22) auto;
    display: grid;
    grid-template-columns: repeat(22, 1fr);
    grid-auto-rows: calc(100vw / 13);
}

.PORTFOLIO_JANA_KAYSER {
    grid-column: 9 / span 4;
    grid-row: 9 / span 2; 
    font-size: 4.55vw;
    font-weight: 500vw;
    color: rgb(255, 255, 255);
    line-height: calc(100vw / 13 / 5 * 3);
    margin-top: -0.7vw;
}

.startseite-Freie_Werke {
    grid-column: 1 / span 11; 
    grid-row: 1 / span 8;
}

.startseite_Energie-Uhr {
    grid-column: 12 / span 5;
    grid-row: 2 / span 5; 
}

.startseite_The_Lizzie_Line {
    grid-column: 17 / span 6;
    grid-row: 1 / span 6; 
}

.startseite_Master_Konzerte {
    grid-column: 2 / span 6;
    grid-row: 9 / span 9; 
}

.startseite_incognito {
    grid-column: 14 / span 4;
    grid-row: 8 / span 6; 
}

.startseite_typo {
    grid-column: 19 / span 3;
    grid-row: 8 / span 4; 
}

.startseite_24_Stunden {
    grid-column: 8 / span 5;
    grid-row: 11 / span 8; 
}

.startseite_morning_type {
    grid-column: 5 / span 5;
    grid-row: 18 / span 6; 
}

.startseite_verschwinden {
    grid-column: 16 / span 6;
    grid-row: 14 / span 8;  
}

.ABOUT_ME {
    grid-column: 9 / span 4;
    grid-row: 10 / span 2; 
    font-size: 4.55vw;
    font-weight: 500;
    line-height: calc(100vw / 13 / 5 * 3);
    margin-top: 0.8vw;
}

.ABOUT_ME_LINK {
    color: rgb(128, 128, 128);
    text-decoration: none;
}

.ABOUT_ME_LINK:hover {
    color: rgb(255, 255, 255);
}

.About_me_Kenntnisse {
    grid-column: 7 / span 4;
    grid-row: 10 / span 5; 
}

.About_me_Sprachen { 
    grid-column: 10 / span 4;
    grid-row: 10 / span 4; 
}

.Kontakt {
    grid-column: 2 / span 3;
    grid-row: 10 / span 2; 
}

.Mail {
    grid-column: 2 / span 2;
    grid-row: 9 / span 2; 
    color: rgb(255, 255, 255);
}

.Telefon {
    color: rgb(255, 255, 255);
}

.Insta {
    color: rgb(255, 255, 255);
}

.download {
    color: rgb(255, 255, 255);
} 

.abschnitt {
    display: flex;
}

.titel {
    width: calc(100% / 13 * 1);
    font-size: 3vw;
    color: rgb(255, 255, 255);
}
.titel-text {
    position: absolute;
    width: 200vh;
    transform-origin: left top;
    transform: rotate(-90deg) translateX(-100%);
    text-align: right;
    font-size: 7vw;
    padding-right: 8vw;
}

.matte-text {
    font-size: 1.7vw;
    color: rgb(255, 255, 255);
    line-height: calc(100vw / 13 / 5 * 1.5);
    margin-top: -0.19vw;
}

.titel_Prozess {
    width: calc(100% / 13 * 1);
    font-size: 7vw;
    color: rgb(255, 255, 255);
    margin-left: 1vw;
}

.Kompetenzen {
    grid-column: 2 / span 12;
    grid-row: 8 / span 12;
    font-size: 2.28vw;
    color: rgb(255, 255, 255);
    line-height: calc(100vw / 13 / 5 * 1.5);
    margin-top: -0.34vw;
    font-weight: 300;
}

.swiper {
    height: 100%;
}

.swiper-pagination {
    font-size: 2.18vw;
    color: rgb(255, 255, 255);
    line-height: calc(100vw / 13 / 5 * 1.5);
    margin-top: -0.3vw;
}

:root {
    --swiper-theme-color: white !important;
}




.london-cover {
    grid-column: 1 / span 6;
    grid-row: 1 / span 8;
}
.london-text {
    grid-column: 7 / span 5;
    grid-row: 2 / span 1;
}
.london-slider {
    grid-column: 1 / span 12;
    grid-row: 8 / span 9;
}
.london_p_1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 5;
}
.london_p_2 {
    grid-column: 7 / span 7;
    grid-row: 1 / span 5;
}
.london_p_3 {
    grid-column: 1 / span 7;
    grid-row: 5 / span 5;
}
.london_p_4 {
    grid-column: 7 / span 7;
    grid-row: 5 / span 5;
}
.london_p_5 {
    grid-column: 1 / span 7;
    grid-row: 9 / span 5;
}
.london_p_6 {
    grid-column: 7 / span 7;
    grid-row: 9 / span 6;
}
.london_p_7 {
    grid-column: 5 / span 7;
    grid-row: 13 / span 5;
}
.london_p_8 {
    grid-column: 1 / span 6;
    grid-row: 14 / span 7;
}
.london_p_9 {
    grid-column: 7 / span 7;
    grid-row: 17 / span 6;
}



.digital_detox_Plakat {
    grid-column: 2 / span 4;
    grid-row: 2 / span 8; 
}

.digital_detox-slider {
    grid-column: 2 / span 10;
    grid-row: 9 / span 10;
}
.digital_detox-slider2 {
    grid-column: 2 / span 10;
    grid-row: 19 / span 8;
}

.animation_digital_detox {
    grid-column: 2 / span 4;
    grid-row: 28 / span 7;
}

.digital_detox_Plakat_2 {
    grid-column: 7 / span 5;
    grid-row: 28 / span 8;
}

.digital_detox_p1 {
    grid-column: 2 / span 3;
    grid-row: 2 / span 5; 
}
.digital_detox_p2 {
    grid-column: 6 / span 3;
    grid-row: 2 / span 5; 
}
.digital_detox_p3 {
    grid-column: 10 / span 3;
    grid-row: 2 / span 5; 
}
.digital_detox_p4 {
    grid-column: 2 / span 3;
    grid-row: 7 / span 5; 
}
.digital_detox_p5 {
    grid-column: 6 / span 3;
    grid-row: 7 / span 5; 
}
.digital_detox_p6 {
    grid-column: 10 / span 3;
    grid-row: 7 / span 5; 
}
.digital_detox_p7 {
    grid-column: 2 / span 3;
    grid-row: 12 / span 5; 
}
.digital_detox_p8 {
    grid-column: 6 / span 3;
    grid-row: 12 / span 5; 
}
.digital_detox_p9 {
    grid-column: 10 / span 3;
    grid-row: 12 / span 5; 
}
.digital_detox_p10 {
    grid-column: 2 / span 3;
    grid-row: 17 / span 5; 
}
.digital_detox_p11 {
    grid-column: 6 / span 3;
    grid-row: 17 / span 5; 
}
.digital_detox_p12 {
    grid-column: 9 / span 6;
    grid-row: 17 / span 5; 
}

.Portrait {
    grid-column: 2 / span 4;
    grid-row: 2 / span 8;
}



.titel-text-MAK {
    position: absolute;
    width: 200vh;
    transform-origin: left top;
    transform: rotate(-90deg) translateX(-100%);
    text-align: right;
    font-size: 7vw;
    padding-right: 8vw;
}
.MAK_Animation {
    grid-column: 2 / span 4;
    grid-row: 9 / span 7;
}
.MAK_Plakat_2 {
    grid-column: 7 / span 5;
    grid-row: 9 / span 8;
}


.MAK_A-E_1 {
    grid-column: 2 / span 3;
    grid-row: 2 / span 6; 
}
.MAK_A-E_2 {
    grid-column: 6 / span 3;
    grid-row: 2 / span 7; 
}
.MAK_A-E_3 {
    grid-column: 10 / span 3;
    grid-row: 2 / span 7; 
}
.MAK_A-E_4 {
    grid-column: 2 / span 3;
    grid-row: 8 / span 6; 
}
.MAK_A-E_5 {
    grid-column: 6 / span 3;
    grid-row: 8 / span 6; 
}
.MAK_A-E_6 {
    grid-column: 10 / span 3;
    grid-row: 8 / span 6; 
}
.MAK_A-E_7 {
    grid-column: 2 / span 3;
    grid-row: 14 / span 6; 
}
.MAK_A-E_8 {
    grid-column: 6 / span 3;
    grid-row: 14 / span 6; 
}
.MAK_A-E_9 {
    grid-column: 10 / span 3;
    grid-row: 14 / span 6; 
}



.Energie-Uhr_Animation {
    grid-column: 2 / span 10;
    grid-row: 9 / span 8;
}
.Energie-Uhr_p1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 5; 
}
.Energie-Uhr_p2 {
    grid-column: 8 / span 5;
    grid-row: 2 / span 7; 
}
.Energie-Uhr_p3 {
    grid-column: 1 / span 13;
    grid-row: 6 / span 9; 
}



.morning_type_cover_1 {
    grid-column: 2 / span 4;
    grid-row: 2 / span 8;
}
.morning_type_specimen_1 {
    grid-column: 2 / span 4;
    grid-row: 9 / span 5;
}
.morning_type_specimen_2 {
    grid-column: 7 / span 4;
    grid-row: 9 / span 5;
}
.morning_type-slider {
    grid-column: 3 / span 7;
    grid-row: 16 / span 8;
}
.morning_type-3D {
    margin-bottom: calc(100% / 13 * 1) 0;
}
.morning_type_p1 {
    grid-column: 2 / span 11;
    grid-row: 2 / span 5; 
}
.morning_type_p2 {
    grid-column: 2 / span 5;
    grid-row: 10 / span 7; 
}
.morning_type_p3 {
    grid-column: 8 / span 5;
    grid-row: 10 / span 7; 
}
.morning_type_p4 {
    grid-column: 1 / span 7;
    grid-row: 17 / span 5; 
}
.morning_type_p5 {
    grid-column: 7 / span 7;
    grid-row: 17 / span 5; 
}
.morning_type_p6 {
    grid-column: 1 / span 7;
    grid-row: 21 / span 6; 
}
.morning_type_p7 {
    grid-column: 7 / span 7;
    grid-row: 21 / span 6; 
}
.morning_type_p8 {
    grid-column: 1 / span 7;
    grid-row: 25 / span 6; 
}
.morning_type_p9 {
    grid-column: 7 / span 7;
    grid-row: 25 / span 6; 
}



.zweivier_Stunden_slider1{
    grid-column: 1 / span 11;
    grid-row: 9 / span 9;
}
.zweivier_Stunden_slider2{
    grid-column: 2 / span 10;
    grid-row: 18 / span 8;
}



.incognito_T1_Augen {
    grid-column: 2 / span 10;
    grid-row: 9 / span 5;
}
.incognito-slider {
    grid-column: 2 / span 10;
    grid-row: 15 / span 8;
}
.incognito_p1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 5; 
}
.incognito_p2 {
    grid-column: 7 / span 7;
    grid-row: 1 / span 5; 
}
.incognito_p3 {
    grid-column: 2 / span 11;
    grid-row: 7 / span 8; 
}




.drei-D_Typo-slider {
    grid-column: 4 / span 5;
    grid-row: 9 / span 8;
}
.drei-D_Typo_p1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 6; 
}
.drei-D_Typo_p2 {
    grid-column: 7 / span 7;
    grid-row: 1 / span 6; 
}
.drei-D_Typo_p3 {
    grid-column: 2 / span 3;
    grid-row: 7 / span 6; 
}
.drei-D_Typo_p4 {
    grid-column: 6 / span 3;
    grid-row: 7 / span 6; 
}
.drei-D_Typo_p5 {
    grid-column: 10 / span 3;
    grid-row: 7 / span 6; 
}



.freie_Arbeit_Start {
    grid-column: 1 / span 6;
    grid-row: 1 / span 8;
}
.freie_Arbeiten_A1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 5; 
}
.freie_Arbeiten_A2 {
    grid-column: 7 / span 7;
    grid-row: 1 / span 5; 
}
.freie_Arbeiten_A3 {
    grid-column: 1 / span 7;
    grid-row: 5 / span 5; 
}
.freie_Arbeiten_A4 {
    grid-column: 7 / span 7;
    grid-row: 5 / span 5; 
}
.freie_Arbeiten_A5 {
    grid-column: 1 / span 7;
    grid-row: 9 / span 5; 
}
.freie_Arbeiten_A6 {
    grid-column: 7 / span 7;
    grid-row: 9 / span 5; 
}
.freie_Arbeiten_A7 {
    grid-column: 1 / span 7;
    grid-row: 14 / span 6; 
}
.freie_Arbeiten_A8 {
    grid-column: 7 / span 7;
    grid-row: 14 / span 6; 
}
.freie_Arbeiten_A9 {
    grid-column: 1 / span 5;
    grid-row: 19 / span 6; 
}
.freie_Arbeiten_A10 {
    grid-column: 5 / span 5;
    grid-row: 19 / span 6; 
}
.freie_Arbeiten_A11 {
    grid-column: 9 / span 5;
    grid-row: 19 / span 6; 
}
.freie_Arbeiten_A12 {
    grid-column: 2 / span 5;
    grid-row: 23 / span 7; 
}
.freie_Arbeiten_A13 {
    grid-column: 8 / span 5;
    grid-row: 23 / span 7; 
}
.freie_Arbeiten_A14 {
    grid-column: 9 / span 5;
    grid-row: 30 / span 9; 
}


.video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}