@charset "UTF-8";

@font-face {
    font-family: 'fontregular';
    src: url('../assets/font/rjsancha/RJSancha-Regular.woff2') format('woff2'),
         url('../assets/font/rjsancha/RJSancha-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fontitalic';
    src: url('../assets/font/rjsancha/RJSancha-RegularItalic.woff2') format('woff2'),
         url('../assets/font/rjsancha/RJSancha-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Univers';
    src: url('../assets/font/univers/UniversLTPro-55Roman.woff') format('woff'),
    url('../assets/font/univers/UniversLTPro-55Roman.otf') format('otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;    
}

@font-face {
    font-family: "MagdaLight";
    src: url('../assets/font/magda/MagdaLightRegular.woff') format('woff'),
    url('../assets/font/magda/MagdaLightRegular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;   
}


@font-face {
    font-family: "MagdaTrash";
    src: url('../assets/font/magda/MagdaTrashRegular.woff') format('woff'),
    url('../assets/font/magda/MagdaTrashRegular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

* {
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    display: none;
}

::selection {
    color: #776868;
}

::-moz-selection {
    color: #776868;
}

/* TYPOGRAPHY */
 
 .rainbow-text {
    display: inline-block;
/*     border: 2.5px solid black;   */
 }

 
.rainbow-text a span {
    pointer-events: none; /* Verhindert doppelte Hover-Ereignisse */
}

/*.rainbow-text span:nth-child(1) { color: crimson; }
.rainbow-text span:nth-child(2) { color: grey; }
.rainbow-text span:nth-child(3) { color: green; }
.rainbow-text span:nth-child(4) { color: lightpink; }
.rainbow-text span:nth-child(5) { color: saddlebrown; }
.rainbow-text span:nth-child(6) { color: royalblue; }
.rainbow-text span:nth-child(7) { color: lemonchiffon; }
.rainbow-text span:nth-child(8) { color: rebeccapurple; }
.rainbow-text span:nth-child(9) { color: orange; }*/


a, p, ul {
    font-family: 'fontregular', Times New Roman, Times, serif;
    font-variant-numeric: oldstyle-nums;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    color: black;
    text-decoration: none;
}

span {
    display: inline;     
}

i {
    display: inline;    
    font-family: 'fontitalic', Times New Roman, Times, serif;
    letter-spacing: .1px;
    text-transform: none;
}

strong {
    display: inline;        
    text-transform: uppercase;
    letter-spacing: 2.5px; 
    font-weight: normal; 
}


.allcaps {
    text-transform: uppercase;
    letter-spacing: 2.5px;  
}

.letterspacing a {
    letter-spacing: 2.5px;
}

.sansserif, .sansserif a {
    font-family: 'Univers', Arial, sans-serif;
    font-variant-numeric: normal;
    font-size: 18px;
    line-height: 32px;
    word-spacing: .1px;
    letter-spacing: .3px;    
}

.headline {
    font-family: 'MagdaLight', Arial, sans-serif;
    font-variant-numeric: normal;
    font-size: 45px;
    line-height: 55px;
    letter-spacing: 1.5px;    
}

.insightlink a:hover {
    font-family: 'fontitalic', Times New Roman, Times, serif;
    font-style: italic;         
    color: #776868;
    letter-spacing: .25px;
}

.contactlink a:hover {
    color: #776868;
}

/* DESIGN */

html {
    width: 100vw;
    height: auto;
    background: white;
    cursor: default;
    font-size: 100.0%;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
}

ul {
    height: auto;
}

ul li {
    list-style-type: none;
}

.ignoreclick {
    display: inline-block;
}

.licentered {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.projectlist li {
    display: flex;         /* Nutzt Flexbox */
    align-items: flex-start; /* Richtet Text oben aus */
    gap: 5px 25px;
    margin: 0 0 25px 0;
}

.indexlist li {
    display: flex;         /* Nutzt Flexbox */
    align-items: flex-start; /* Richtet Text oben aus */
    gap: 25px;            /* Abstand zwischen Zahl und Text */
    margin: 10px 0 10px 0;
}

.number {
    text-align: left;
    flex-shrink: 0; /* Verhindert, dass sich die Zahl mit dem Text vergrößert */
    letter-spacing: 2.5px;
}

.text {
    flex: 1; /* Füllt den verfügbaren Platz */
}

.navi {
    position: absolute;
    max-width: calc(100% - 100px);
    top: 50px;
    left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;        
}

.navi a {
    color: white;
    mix-blend-mode: difference;
    -webkit-mix-blend-mode: difference;    
}


.navi a:hover {
    color: #776868;
    mix-blend-mode: normal;
    -webkit-mix-blend-mode: normal;    
}

#projects {
    display: block;
    width: 100vw;
    height: auto;
    /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    margin: 0;
}

.projektdetail {
    width: 100%;
    height: 100%;
    opacity: 1;
}

#div1 {
    overflow: hidden;
    position: relative;
}

#div2,
#div3,
#div4,
#div5,
#div6,
#div7,
#div8,
#div9,
#div10,
#div11,
#div12,
#div13,
#div14,
#div15,
#div16,
#div17,
#div18,
#div19,
#div20,
#div21,
#div22,
#div23,
#div24,
#div25,
#div26,
#div27,
#div28,
#div29,
#div30,
#div31,
#div32,
#div33,
#div34,
#div35,
#div36,
#div37,
#div38,
#div39,
#div40,
#div41,
#div42,
#div43,
#div44 {
    display: none;
}

.teaser {
    width: 100%;
    height: 100%;
}

.teaser video {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zuschneiden, um den Container zu füllen */          
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;     
}

.intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;        
    height: 100%;
    width: 100%;
}

.intro a, p {
    display: inline-flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    max-width: calc(100% - 50px);
    font-family: "MagdaLight", Arial, sans-serif;
    font-size: 14vw;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

#pattern {
    position: absolute;
    top: -5%;
    left: -15%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 110%;
    width: 130%;
}

.mobonly {
    display: none;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.row a {
    transform: rotate(-45deg);
}

#title1,
#title2,
#title3,
#title4,
#title5,
#title6,
#title7,
#title8,
#title9 {
    display: none;
    position: absolute;
}

.claim {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;       
}


.claim a:hover {
    color: #776868;
    mix-blend-mode: normal;
    -webkit-mix-blend-mode: normal;          
}

.claimtext {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 100px);
}

/* BILDFORMATE */

img, video {
    opacity: 1;
    transition: opacity 150ms ease-in-out; /* Sanfter Übergang */
}

.twocolumns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 100px;
}

.twocolumns img {
    max-width: 100%;
    max-height: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.tcleft {
    display: block;
}

.tcright {
    display: none;
}

.passepartout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.passepartout picture {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.passepartout img {
    display: block; /* Entfernt mögliche extra Abstände */
    max-width: 100%;
    max-height: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}

.fullbleed {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;  
}

.fullbleed picture {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.fullbleed img {
    display: block;
    width: 100%;  /* Stellt sicher, dass das Bild die volle Breite hat */
    height: 100%; /* Notwendig für object-fit */
    object-fit: cover; /* Zuschneiden, um den Container zu füllen */          
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}

.fullbleed video {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zuschneiden, um den Container zu füllen */          
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;        
}

.portrait {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.portrait picture {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.portrait img {
    display: block; /* Entfernt mögliche extra Abstände */
    max-width: 100%;
    max-height: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}

.pagina {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    bottom: 50px;
    text-align: center;
}

.pagina a {
    color: white;
    mix-blend-mode: difference;
    -webkit-mix-blend-mode: difference;    
}


.pagina a:hover {
    color: #776868;
    mix-blend-mode: normal;
    -webkit-mix-blend-mode: normal;    
}


.creditleft {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: calc(100% - 100px);
    position: absolute;
    bottom: 30vh;
    left: 50px;
    text-align: left;
}

.creditright {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: calc(100% - 100px);
    position: absolute;
    top: 30vh;
    right: 50px;
    text-align: left;
}

.information {
    display: flex;
    justify-content: center;
    width: calc(100% - 100px);
    margin: 50px 50px 80px 50px;  
}

.information ul {
    width: 100%;
}

.nocategory {
    display: flex;
    flex-wrap: wrap;
}

.nocategory li {
    display: flex;
    flex-wrap: wrap;
}

.nocategory a:hover {
    color: #776868;
}

.detailgallery {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 30;
    background: white;
}

.detailimage {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detailimage img {
    max-width: 100%;
    max-height: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.imgnr {
    width: 100%;
    bottom: 50px;
    display: flex;
    justify-content: center;    
    position: absolute;
    gap: 25px;    
}

.imgnr a {
    color: white;
    mix-blend-mode: difference;
    -webkit-mix-blend-mode: difference;    
}


/* ////////////////////////////////////////// PROJEKTE */


#detailabwesenheitsnotiz,
#detailanythinggoes,
#detailflowers,
#detailgerbion,
#detailsynthesis,
#detailroether,
#detailkarlfaber,
#detailofs,
#detailshapes,
#detailsuperoffice,
#detailmartinundich {
    display: none;
}


/* /////////////////////////////////////////// PROJECT DETAIL GALLERIES */

#pro1det1,
#pro2det1,
#pro3det1,
#pro4det1,
#pro5det1,
#pro6det1,
#pro8det1,
#pro9det1,
#pro10det1,
#pro11det1,
#pro12det1 {
    position: relative;
}

#pro1det2,
#pro1det3,
#pro1det4,
#pro1det5,
#pro1det6 {
    display: none;
}

#pro2det2,
#pro2det3,
#pro2det4,
#pro2det5,
#pro1det6,
#pro2det6,
#pro2det7 {
    display: none;
}


#pro4det2,
#pro4det3,
#pro4det4,
#pro4det5 {
    display: none;
}

#pro5det2,
#pro5det3,
#pro5det4,
#pro5det5,
#pro5det6 {
    display: none;
}

#pro6det2,
#pro6det3,
#pro6det4,
#pro6det5,
#pro6det6,
#pro6det7,
#pro6det8,
#pro6det9,
#pro6det10 {
    display: none;
}

#pro8det2,
#pro8det3,
#pro8det4,
#pro8det5,
#pro8det6,
#pro8det7,
#pro8det8,
#pro8det9 {
    display: none;
}

#pro9det2,
#pro9det3,
#pro9det4,
#pro9det5,
#pro9det6,
#pro9det7,
#pro9det8,
#pro9det9,
#pro9det10,
#pro9det11,
#pro9det12,
#pro9det13 {
    display: none;
}

#pro10det2 {
    display: none;
}

#pro11det2,
#pro11det3,
#pro11det4,
#pro11det5,
#pro11det6,
#pro11det7,
#pro11det8,
#pro11det9,
#pro11det10,
#pro11det11,
#pro11det12 {
    display: none;
}

#pro12det2,
#pro12det3,
#pro12det4,
#pro12det5,
#pro12det6,
#pro12det7,
#pro12det8,
#pro12det9,
#pro12det10,
#pro12det11,
#pro12det12,
#pro12det13,
#pro12det14 {
    display: none;
}


.nextproject {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nextproject a:hover {
    color: #776868;
}

.currentprocess {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0 0 80px 0;  
    background: #776868;
}

.currentprocess picture {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.currentprocess img {
    display: block;
    width: 100%;  /* Stellt sicher, dass das Bild die volle Breite hat */
    height: 100%; /* Notwendig für object-fit */
    object-fit: cover; /* Zuschneiden, um den Container zu füllen */          
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}

.currenttitle {
    position: absolute;
    max-width: calc(100% - 100px);
    text-align: center;
}

.nextproject img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.links {
    width: calc(100% - 80px);
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;    
    gap: 30px;
    text-align: center;
}


.nextprojecthover {
    display: block;
    z-index: -900;
}

.titleindex {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw - 100px);
    height: calc(100vh - 100px);    
    padding: 50px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: auto;
}

.titleindex ul {
    color: white;
    mix-blend-mode: difference;
    -webkit-mix-blend-mode: difference;
}

#imprint {
    display: none; 
}


/* ////////////////////////////////////////// ABOUT */

#aboutcontainer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100vw;
    background: white;
}


/* ////////////////////////////////////////// REGISTER */

#registercontainer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-height: calc(100vh - 100px);
    width: calc(100vw - 100px);
    padding: 50px;
    background: white;
}

#registercontainer ul {
    width: 100%;
}


/* ////////////////////////////////////////// INDEX */

#indexcontainer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-height: calc(100vh - 100px);
    width: calc(100vw - 100px);
    padding: 50px;
    background: white;
}

#indexcontainer ul {
    position: relative;
    width: 100%;
    z-index: 20;
}

.indexhover {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Zuschneiden, um den Container zu füllen */              
    z-index: 10;  
}

.indexhover picture {
    display: flex; /* Falls das Bild innerhalb zentriert sein soll */
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.indexhover img {
    display: block;
    width: 100%;  /* Stellt sicher, dass das Bild die volle Breite hat */
    height: 100%; /* Notwendig für object-fit */
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}

.indexsuperoffice,
.indexkarlfaber,
.indexanythinggoes,
.indexmartinundich,
.indexshapesofshelter,
.indexabwesenheitsnotiz,
.indexsynthesis,
.indexflowers,
.indexgerbion,
.indexhannesroetherfs,
.indexhannesroetherhw,
.indexofs {
    display: none;
}



/* MEDIA SCREEN MIN 800PX */

@media screen and (min-width: 800px) {

    #pattern {
        top: -2%;
        left: -2%;
        height: 104%;
        width: 104%;
    }

    .mobonly {
        display: block;
    }    

    .navi {
        max-width: calc(50% - 50px);
    }

    .intro a, p {
        font-size: 7vw;
    }    

}



/* MEDIA SCREEN MIN 1000PX */

@media screen and (min-width: 1000px) {


    .twocolumns img {
        max-height: 65%;
    }

    .tcright {
        display: block;
    }

    .information {
        margin: 40px 50px 160px 50px;  
    }

    .information ul {
        width: 50%;
    }

    .nextproject img {
        max-width: 100%;
        max-height: 100%;
    }    

    .nextprojecthover {
        display: none;
    }

    .links {
        flex-wrap: nowrap;
        gap: 80px;    
    }   

    .currentprocess {
        margin: 0 0 160px 0;  
    }

    #registercontainer ul {
        width: 50%;
    }

    #indexcontainer ul {
        width: 50%;
    }    

    .passepartout img {
        max-height: 65%; 
    }

    .creditright {
        text-align: right;
    }    

}