:root{--f-fl: "rift"; --c-txt: #e0e0e0; --c-a: #4e7b96; --c-ci: #fedb43; --c-d: #323237; --c-ga: #808080; --c-dk: #121212; --txt-m: 3.8vh; --txt-h: 5vh; --txt-fl-h: 2.9vh; --txt-l-h: 3.6vh; --c-g: #8ac070;} .dme{--f-fl: "rift"; --c-txt: #2c2c2e; --c-a: #407db3; --c-ci: #2c2c2e; --c-d: #f9f9f9; --c-ga: #808080; --c-dk: #e0e0e0; --txt-m: 3.8vh; --txt-h: 5vh; --txt-fl-h: 2.9vh; --txt-l-h: 3.6vh;}
/*2022-07-22 HEI*/ ::-webkit-scrollbar{height: 0; width: 0; background: transparent;}textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox{-webkit-appearance: none; background: none; color: inherit; border: none; padding: 0; outline: none;} .h{-webkit-appearance: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap;}
@font-face{font-family: "symbols"; src: url("woff2/se-symbols.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap;}

@font-face{font-family: "rift"; src: url("ttf/se-rift-variable.ttf") format("ttf"); src: url("woff2/se-rift-variable.woff2") format("woff2"); src: url("woff/se-rift-variable.woff") format("woff"); font-style: normal; font-display: swap;}
@font-face{font-family: "menu"; font-weight: 400; src: url("ttf/menu.ttf") format("ttf"); src: url("woff2/menu.woff2") format("woff2"); src: url("woff/menu.woff") format("woff"); font-style: normal; font-display: swap;}
html{overflow: hidden; overflow-x: hidden; background-color: var(--c-dk); width: 100vw; max-width: 100vw; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} body{width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; top: 0; left: 0; margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #d-m-t{bottom: 2.25vh; right: 7vh; font-size: 4.25vh; line-height: 4vh; height: auto; width: auto; color: var(--c-txt); margin: auto; display: inline-block; position: fixed; font-display: swap; font-family: "symbols"; z-index: 99; border-radius: 6px; background-color: var(--c-d); white-space: nowrap; word-spacing: 0; padding: 0.33vh 0.8vh 0vh 1vh;} #d-m-t:hover{color: var(--c-d); background: var(--c-ci);} .cursor{border-radius: 50%; mix-blend-mode: difference; width: 11.5vh; height: 11.5vh; position: fixed; background-color: var(--c-ci); display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 999; transform: scale(0.15); transition: transform 200ms ease-in-out;} .c-big{transform: scale(.69); border-radius: 11%;}
h1, h2, h3, p, a, text, i{font-weight: 400; font-display: swap; font-family: "rift"; font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; z-index: 95; margin-block-start: 0; margin-block-end: 0;} .u{text-transform: uppercase;} .ml{color: var(--c-txt);} .ml:hover{color: var(--c-txt);} .cd-f{height: 8.75vw; max-height: 17.5vh; color: var(--c-txt); width: 17.5vw; max-width: 17.5vw; display: inline-grid; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); margin: 0; padding: 0; z-index: 6;} .it-ft{max-height: 17vh; color: var(--c-txt); z-index: 6; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center;} .kds1{border-radius: 6px; color: var(--c-txt); max-height: auto; width: 60vw; position: absolute; display: inherit; top: 48%; left: 30%; transform: translate(-50%, -50%); z-index: 95;} .kds1 .kd1{height: 80vh; color: var(--c-txt); width: 57.5vh; max-width: 69vw; display: inherit;} .kds1 .kd1 .kd1-hd{position: relative; color: var(--c-txt);} .kds1 .kd1 .kd1-hd a.kd1-e{position: absolute; border-radius: 6px; padding-top: 0;} .kds1 .kd1 .kd1-hd a.kd1-e:hover{color: var(--c-d);} .kd1-p{position: relative; background-color: #fff; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); width: 100%; height: auto; margin: 0; padding: 0; left: 50%; transform: translate(-50%); z-index: 6;} .kds1 .kd1 .cd-in{text-rendering: geometricPrecision; height: 75vh; max-height: 75vh; overflow: hidden; text-overflow: ellipsis; color: var(--c-txt); display: grid; width: auto; padding-top: 0.48vh; position: inherit; font-display: swap; font-family: var(--f-fl);} .iframe{position: relative; display: block; border-radius: 6px; width: 100%; height: 80vh; margin: 0; padding: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;} .kds1 .kd1 .cd-in{text-rendering: geometricPrecision; height: 75vh; max-height: 75vh; overflow: hidden; text-overflow: ellipsis; color: var(--c-txt); display: grid; width: auto; padding-top: 0.48vh; position: inherit; font-display: swap; font-family: var(--f-fl);} .kds1 .kd1 .kd1-hd a.kd1 a.kd1 a.kd1-e:hover{color: var(--c-ci); background-color: var(--c-dk);} .kds1 .kd1 .kd1-hd a.kd1-e .ex{display: block;color: var(--c-txt);} .kds1 .kd1 .cd-fr{} .kds1 .kd1 .cd-fr a{color: var(--c-txt);} .kds1 .kd1 .cd-body,.kds1 .kd1 .cd-fr{padding-bottom: 11vh; margin: 0; border-radius: 6px; z-index: 11;}
/*2022-08-20 BOTTOM*/ .f-l-b{position: absolute; margin-left: 2.25vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: -18.5vh; z-index: 97; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-r-b{position: absolute; left: 23vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: -18.5vh; z-index: 97; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .m-ne{height: 0; display: none; width: 0; height: 0;cursor: auto;} .f-r-b2{position: absolute; margin-left: 2.25vw; width: 17.5vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 50vh; text-align: left; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-r-b3{position: absolute; left: 23vw; width: 17.5vw; text-align: left; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 50vh; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-r-b4{position: absolute; left: 10.2%; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 157.5vh; margin: 0; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-r-b5{position: absolute; right: 10.2%; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 157.5vh; margin: 0; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-r-b6{position: absolute; margin-left: 40.5vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); bottom: -4.7vh; z-index: 95; border-radius: 6px;} .f-r-b7{position: absolute; right: 10.2%; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); bottom: -4.7vh; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-l-t{color: var(--c-txt); display: inline-block; height: auto; position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d); font-weight: 500; white-space: nowrap; word-spacing: normal; border-radius: 6px; padding: 0 1vh 0.5vh 1.75vh; line-height: var(--gap-line-height); margin-left: 0.5vw; width: 17.5vw; top: 57vh; text-align: left; z-index: 95; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .font-element{display: grid; position: inherit; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; font-size: calc(2* var(--txt-fl-h)); line-height: calc(2 * var(--txt-l-h)); overflow: hidden; color: var(--c-txt);} .f-l{z-index: 94; color: var(--c-txt); display: grid; left: 50.5%; height: auto; width: auto; position: absolute; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); white-space: normal;} .f-fl{max-width: 40vw; width: 40vw; position: absolute; margin-left: 8.4vw; color: var(--c-txt); display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background-color: none; border-radius: 6px; padding: 0.5vh 2vh 2vh 2.5vh; word-spacing: normal; margin-top: 64vh; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); white-space: normal; z-index: 96;} .f-l-t{color: var(--c-txt); display: inline-block; height: auto; position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d);white-space: nowrap; word-spacing: normal; border-radius: 6px; padding: 0.69vh 1.5vh 0.8vh 1.5vh; margin-left: 0.5vw; width: 17.5vw; top: 57vh; text-align: left; z-index: 95; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-h{margin-left: 8.4vw; color: var(--c-txt); display: inline-block; height: 25.51vh; max-width: 40vw; width: 40vw; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d); border-radius: 6px; margin-top: 56vh; padding: 0vh 1vh 1vh 2.5vh; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); z-index: 95;} .f-cs1{border-radius: 6px; color: var(--c-txt); max-height: auto; width: 44vw; position: absolute; display: inherit; top: 31%; left: 29%; transform: translate(-50%, -50%); z-index: 90;} .f-cs1 .f-cd1{height: 40vh; color: var(--c-txt); width: auto; max-width: 44vw; display: inherit;} .f-cs1 .f-cd1 .f-cd1-hd{height: 0;} .f-cs1 .f-cd1 .f-cd1-hd a.f-cd1-e{height: 0;} .f-cs1 .f-cd1 .f-cd1-hd a.f-cd1-e:hover{height: 0;} .f-cd1-p{position: relative; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 100%; height: auto; margin: 0; padding: 0; left: 50%; transform: translate(-50%); z-index: 6;} .f-cd1-hd{height: 0;} .f-cd1-he{height: 0;} .f-cs3{width: 17.5vw; left: 50.5%; margin-left: 23vw; top: 15vh; border-radius: 6px; color: var(--c-txt); max-height: 80vh; position: absolute; display: inline-grid; z-index: 95;} .f-cs2{left: 50.5%; margin-left: 2.25vw; top: 15vh; border-radius: 6px; color: var(--c-txt); max-height: 80vh; width: 17.5vw; position: absolute; display: inline-grid; z-index: 95;} .f-cs2 .f-cd2{max-height: 17.5vh; height: 17.5vh; color: var(--c-txt); width: 17.5vw; margin-top: 2.4vh; max-width: 17.5vw; display: inline-grid;} .f-cs2 .f-cd2 .f-cd2-hd a.f-cd2-e{display: none; width: 0; height: 0;} .f-cd2-p{position: relative; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 17.5vw; height: auto; margin: 0; padding: 0; left: 50%; transform: translate(-50%); z-index: 6;} .f-cs3 .f-cd3{height: 17.5vh; color: var(--c-txt); width: 17.5vw; margin-top: 2.4vh; max-width: 17.5vw; display: inline-grid;} .f-cd3-p{position: relative; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 17.5vw; height: auto; margin: 0; padding: 0; left: 50%; transform: translate(-50%); z-index: 6;} .f-cd3-p:hover{background-color: var(--c-d);} .f-cd2-p:hover{background-color: var(--c-d);}h2 .ch{font-display: swap; font-family: "rift";margin-top: 31.6%; color: var(--c-txt); font-size: calc(3.9 * var(--txt-fl-h)); line-height: calc(4.2 * var(--txt-l-h)); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 0, 'rift' 100, 'slab' 0, 'futr' 100;}h2 .char{--delay: calc((var(--char-index) + 1) * 7500ms); animation: var1 7500ms infinite both; animation-delay: var(--delay);} @keyframes var1{0%{font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 0, 'rift' 100, 'slab' 0, 'futr' 100; font-size: calc(3.9 * var(--txt-fl-h));}25%{font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 0, 'rift' 100, 'slab' 100, 'futr' 100; font-size: calc(3.9 * var(--txt-fl-h));}75%{font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 0, 'rift' 100, 'slab' 100, 'futr' 100; font-size: calc(3.9 * var(--txt-fl-h));}100%{font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 0, 'rift' 100, 'slab' 0, 'futr' 100; font-size: calc(3.9 * var(--txt-fl-h));}}.block{background-color: var(--c-dk); display: block; margin-top: 4.4vh; margin-bottom: 1vh; right: 1vh; width: 5vh; height: 93.6vh; max-height: 94%; position: absolute; z-index: 21; border-left: 2px solid var(--c-d); border-bottom: 2px solid var(--c-d); border-right: 2px solid var(--c-d);} .sp .word, .sp .char{display: inline-block;} .sp .char{position: relative;} .sp .char::before, .sp .char::after{content: attr(data-char); position: absolute; top: 0; left: 0; visibility: hidden; transition: inherit; user-select: none;} .sp{--word-center: calc((var(--word-total) - 1) / 2); --char-center: calc((var(--char-total) - 1) / 2); --line-center: calc((var(--line-total) - 1) / 2);} .sp .word{--word-percent: calc(var(--word-index) / var(--word-total)); --line-percent: calc(var(--line-index) / var(--line-total));} .sp .char{--char-percent: calc(var(--char-index) / var(--char-total)); --char-offset: calc(var(--char-index) - var(--char-center)); --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center)); --distance-sine: calc(var(--char-offset) / var(--char-center)); --distance-percent: calc((var(--distance) / var(--char-center)));}
/*2022-09-30 SCREENS*/ body:after{content: 'desktop'; display: none;} div .sc1{height: 100vh; width: 100vw; max-height: 100%; max-width: 100%; padding: 1vh; z-index: 21; left: 0; top: 0;} div .s2{height: 100vh; width: 100vw; max-height: 100%; max-width: 100%; padding: 1vh; z-index: 22; left: 0; top: 0;} div .s3{height: 100vh; width: 100vw; max-height: 100%; max-width: 100%; padding: 1vh; z-index: 23; left: 0; top: 0;} div .s4{height: 100vh; width: 100vw; padding: 1vh; z-index: 24; left: 0; top: 0;} div .s5{height: 100vh; width: 100vw; max-height: 100%; max-width: 100%; padding: 1vh; z-index: 25; left: 0; top: 0;} div .s6{height: 100vh; width: 100vw; max-height: 100%; max-width: 100%; padding: 1vh; z-index: 26; left: 0; top: 0;} .m2{display: grid; overflow: hidden; grid-template-rows: auto 80px; grid-template-columns: 80px 3fr 1.3fr; height: 98vh; z-index: 32;} .bm{border: 2px solid var(--c-d); box-sizing: border-box; top: 0; right: 0; margin-right: 1vh; margin-top: 1vh; height: 4.4vh; width: 5vh; background-color: var(--c-dk); display: block; position: fixed; z-index: 98;} .svg{width: auto; height: auto;} .block{background-color: var(--c-dk); display: block; margin-top: 4.4vh; margin-bottom: 1vh; right: 1vh; width: 5vh; height: 93.6vh; max-height: 94%; position: absolute; z-index: 21;border-left: 2px solid var(--c-d); border-bottom: 2px solid var(--c-d); border-right: 2px solid var(--c-d);} .d-w{position: relative; overflow: hidden; text-overflow: ellipsis; z-index: 91; height: auto; max-height: 91vh; width: auto; background-color: var(--c-dk);} .d-w-inner{position: relative; overflow: hidden; text-overflow: ellipsis; height: 98vh;} .d-w-open:checked+.d-w-i{position: static; opacity: 100;} .d-w-i{opacity: 0;} .d-w-i img{display: inherit; position: absolute;} .d-w-i video{display: inherit; position: absolute;} .d-w-control:hover{color: var(--c-d); background-color: var(--c-ci);} #d-w-1:checked~.control-1, #d-w-2:checked~.control-2, #d-w-3:checked~.control-3{display: block;} #d-w-1:checked~.control-1~.d-w-indicators li:nth-child(1) .d-w-bullet, #d-w-2:checked~.control-2~.d-w-indicators li:nth-child(2) .d-w-bullet, #d-w-3:checked~.control-3~.d-w-indicators li:nth-child(3) .d-w-bullet{color: var(--c-a);} .projekte-wrper{position: relative; overflow: hidden; text-overflow: ellipsis; z-index: 91; height: auto; max-height: 91.5vh; width: auto;} .projekte-wrper-inner{position: relative; overflow: hidden; text-overflow: ellipsis; height: 98vh;} .projekte-wrper-open:checked+.projekte-wrper-item{position: static; opacity: 100;} .projekte-wrper-item{position: absolute; opacity: 0;} .projekte-wrper-item img{display: inherit; position: absolute;} #projekte-wrper-1:checked~.control-1, #projekte-wrper-2:checked~.control-2, #projekte-wrper-3:checked~.control-3{display: block;} #projekte-wrper-1:checked~.control-1~.projekte-wrper-indicators li:nth-child(1) .projekte-wrper-bullet, #projekte-wrper-2:checked~.control-2~.projekte-wrper-indicators li:nth-child(2) .projekte-wrper-bullet, #projekte-wrper-3:checked~.control-3~.projekte-wrper-indicators li:nth-child(3) .projekte-wrper-bullet{color: var(--c-a);} .cs1{border-radius: 6px; color: var(--c-txt); max-height: auto; height: 72vh; width: 60vh; position: absolute; display: inherit; top: 50%; left: 27.5%; transform: translate(-50%, -50%); z-index: 93;} .cs1 .cd1{height: 72vh; width: 60vh; max-width: 66vw; display: inherit;} .cs1 .cd1 .cd1-hd{position: relative;} .cd1-p{position: relative; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 100%; height: auto; margin: 0; left: 50%; border-radius: 6px; transform: translate(-50%); z-index: 6;} .cs{max-width: 99vw; max-height: 75vh; align-items: stretch; justify-items: center; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; width: inherit; z-index: 69; gap: 0.5vh; margin: 15vh 15vh 0;} .cs .cd{display: inherit; height: 33vh; max-height: 33vh; width: 25vw; z-index: 69;} .cs .cd .cd-hd{position: relative; padding: 0;} .cs .cd .cd-hd a.cd-e{position: absolute; border-radius: 6px; padding: 0.9vh 0.7vh 0.9vh 0.8vh; margin: auto; right: 0; font-size: 3vh; line-height: 3vh; height: 4.5vh; width: auto; color: var(--c-ci); background-color: var(--c-d); z-index: 97;} .cs .cd .cd-in{max-height: 75vh; overflow: hidden; text-overflow: ellipsis; display: grid; width: auto; padding-left: 0.55vw; padding-top: 0.55vh; position: inherit; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;} .cs .cd .cd-hd a.cd a.cd-e:hover{color: var(--c-ci); background-color: var(--c-dk);} .cs .cd .cd-hd a.cd-e .ex{display: block; color: var(--c-ci);} .cs .cd .cd-fr{} .cs .cd .cd-fr a{color: var(--c-txt);} .cd-p{position: relative; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 100%; height: auto; margin: 0; padding: 2.75vh 0 0; left: 50%; transform: translate(-50%); z-index: 6;} .cd-t-lt{top: 0; border-radius: 6px; left: 0vw; position: absolute; width: 100%; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; color: var(--c-txt); background: var(--c-d); height: 4.5vh; z-index: 69;} .cd-he{left: 0.5vw; letter-spacing:1px; font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; margin: auto; width: auto; max-width: inherit; white-space: nowrap; position: absolute; font-display: swap; font-family: var(--f-fl); font-size: calc(1.1 * var(--txt-fl-h)); line-height: calc(1.1 * var(--txt-l-h)); color: var(--c-txt); height: 4vh; z-index: 69;} .c-l-b{position: absolute; margin-left: 2.25vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 55.5vh; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-r-b{position: absolute; left: 15vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 55.5vh; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-r-b2{position: absolute; margin-left: 0.5vw; width: 17.5vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 30vh; text-align: left; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-r-b3{position: absolute; left: 23vw; width: 17.5vw; text-align: left; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 30vh; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-r-b4{position: absolute; left: 10.2%; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 157.5vh; margin: 0; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-r-b5{position: absolute; right: 10.2%; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); top: 157.5vh; margin: 0; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-r-b6{position: absolute; margin-left: 40.7vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); bottom: -5vh; z-index: 95; border-radius: 6px;} .c-r-b7{position: absolute; right: 10.2%; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); bottom: 12vh; z-index: 95; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .cs3{width: 17.5vw; left: 49%; margin-left: 23vw; top: 69vh; border-radius: 6px; color: var(--c-txt); max-height: 17.5vh; position: absolute; display: inline-grid; z-index: 95;} .cs2{width: 17.5vw; left: 49%; margin-left: 0.5vw; top: 69vh; border-radius: 6px; color: var(--c-txt); max-height: 17.5vh; position: absolute; display: inline-grid; z-index: 95;} .cs2 .cd2{height: 17.5vh; max-height: 17.5vh; color: var(--c-txt); width: 17.5vw; max-width: 17.5vw; display: inline-grid;} .cs2 .cd2 .cd2-hd a.cd2-e{display: none; width: 0; height: 0;} .cd2-p{position: relative; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 17.5vw; max-height: 17.5vh; height: auto; margin: 0; padding: 0; left: 50%; transform: translate(-50%); z-index: 6;} .cs3 .cd3{height: 17.5vh; color: var(--c-txt); width: 17.5vw; max-width: 17.5vw; display: inline-grid;} .cd3-p{position: relative; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d); width: 17.5vw; height: auto; margin: 0; padding: 0; left: 50%; transform: translate(-50%); z-index: 6;} .cd3-p:hover{background-color: var(--c-d);} .cd2-p:hover{background-color: var(--c-d);}
/*2022-07-25 kontakt*/ .mn-al:hover, .mn-ol:hover{border: 2px solid var(--c-ci);} a.mn-al:hover, a.mn-ol:hover, a.ch-itl:hover{color: var(--c-d);} .mn-al, a.mn-al{background: var(--c-dk); border: 2px solid var(--c-d); list-style: none;} .mn-ol, a.mn-ol{background: var(--c-d); border: 2px solid var(--c-dk); list-style: none;} .t-cd{left: 15vh; top: 8vh; position: absolute; display: block; z-index: 95; height: auto; width: auto; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background: var(--c-d);} .t{border-radius: 6px; color: var(--c-ci); position: absolute; display: block; z-index: 95; margin-top: 1.45vh; padding: 1vh 2.75vh 1.1vh 2.75vh; height: auto; width: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;white-space: nowrap; word-spacing: normal; line-height: calc(3 * var(--txt-l-h)); font-size: calc(3 * var(--txt-fl-h)); box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .t-cd-s{left: 15vh; top: 19.25vh; position: absolute; display: block; z-index: 93; height: auto; width: auto; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); color: var(--c-txt);} .t-sub{border-radius: 6px; position: absolute; display: block; z-index: 95; margin-top: 0.5vh; padding: 3vh 3vh 0.55vh 3vh; height: auto; width: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;white-space: nowrap; word-spacing: normal; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); color: var(--c-txt);} .cs4{left: 15vh; bottom: 10vh; border-radius: 6px; position: absolute; display: block; z-index: 95;} .t-cd-m{left: 5vh; top: 3.6vh; position: absolute; display: block; z-index: 95; height: auto; width: auto; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .cs-m{left: 5vh; bottom: 5vh; border-radius: 6px; position: absolute; display: block; z-index: 95;} .t-cd-s2{left: 5vh; top: 15vh; position: absolute; display: block; z-index: 93; height: auto; width: auto; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-cd{font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; line-height: calc(0.78 * var(--txt-l-h)); font-size: calc(0.55 * var(--txt-fl-h));border-radius: 6px; position: absolute;} .c-it, .c-it a{color: var(--c-txt); background-color: var(--c-dk); margin-top: 1.25vh; margin-bottom: 1.25vh; padding: 0.55vh 1.25vh 0.7vh 1.5vh; display: flow-root; height: auto; width: 29vh; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;z-index: 95; white-space: nowrap; word-spacing: normal; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border-radius: 6px; border: 2px solid var(--c-d); box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .ch-it, .c-lg, .c-it:hover{color: var(--c-d); background: var(--c-ci);} .c-lg{bottom: 33vh; display: flow-root; height: auto; width: 29vh; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-dk);z-index: 95; white-space: nowrap; word-spacing: normal; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border-radius: 6px; border: 2px solid var(--c-d);} .cs5:hover .ch-it{border: 2px solid var(--c-ci); background: var(--c-ci); color: var(--c-d);} .cs5:hover .ch-lg{border: 2px solid var(--c-ci);} .cs6:hover .ch-it{border: 2px solid var(--c-ci); background: var(--c-ci); color: var(--c-d);} .cs5:hover .t1{color: var(--c-d)!important;} .cs5:hover .t2{color: var(--c-d)!important;} .cs6:hover .ch-lg{border: 2px solid var(--c-ci);} .cs6:hover .t1{color: var(--c-d)!important;} .cs6:hover .t2{color: var(--c-d)!important;} .cs5-cap{right: 20vh; top: 9.5vh; border-radius: 6px; color: var(--c-d); position: absolute; display: block; z-index: 95;} .cs5-dup{right: 20vh; bottom: 17.9vh; border-radius: 6px; color: var(--c-d); position: absolute; display: block; z-index: 95;} .cs5{right: 20vh; top: 18vh; border-radius: 6px; color: var(--c-d); position: absolute; display: block; z-index: 95;} .ch-cd{font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; line-height: calc(0.78 * var(--txt-l-h)); font-size: calc(0.55 * var(--txt-fl-h));border-radius: 6px; position: absolute;} .ch-it{color: var(--c-ci); margin: 0; padding: 15vh 0vh 0.45vh 1.25vh; display: flow-root; height: auto; width: 29vh; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-dk);z-index: 95; white-space: nowrap; word-spacing: normal; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border-radius: 6px; border: 2px solid var(--c-d); box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .ch-lg:hover{border: 2px solid var(--c-ci);} .ch-lg{position: absolute; color: var(--c-d); margin: 0vh; top: 0vh; display: flow-root; height: auto; width: 29vh; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-dk);z-index: 95; white-space: nowrap; word-spacing: normal; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border-radius: 6px; border: 2px solid var(--c-d);} .cs6{right: 20vh; top: 46.5vh; border-radius: 6px; color: var(--c-d); position: absolute; display: block; z-index: 95;} .c-wr{position: relative; overflow: hidden; text-overflow: ellipsis; z-index: 21; height: auto; width: auto;} .c-wr-in{position: relative; overflow: hidden; text-overflow: ellipsis; height: 98vh;} .c-wr-op:checked+.c-wr-it{position: static; opacity: 100;} .c-wr-it{position: absolute; opacity: 0;} .c-wr-it img{position: absolute; display: inherit;} #c-wr-1:checked~.control-1, #c-wr-2:checked~.control-2, #c-wr-3:checked~.control-3{display: block;} #c-wr-1:checked~.control-1~.c-wr-indicators li:nth-child(1) .c-wr-bt, #c-wr-2:checked~.control-2~.c-wr-indicators li:nth-child(2) .c-wr-bt, #c-wr-3:checked~.control-3~.c-wr-indicators li:nth-child(3) .c-wr-bt{color: var(--c-a);}
/*2022-07-21 connect*/ .connect{padding: 0.69vh 1.5vh 0.8vh 1.5vh; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background-color: var(--c-d); color: var(--c-txt); line-height: calc(0.82 * var(--txt-l-h)); z-index: 95; border: 2px solid var(--c-ci); margin-top: calc(9 * var(--txt-fl-h));} .connect:hover{color: var(--c-d); background-color: var(--c-ci);} .cnct2{padding: 0.69vh 1.5vh 0.8vh 1.5vh; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); background-color: var(--c-d); color: var(--c-txt); border: 2px solid var(--c-a); line-height: calc(0.82 * var(--txt-l-h)); z-index: 95; margin-top: calc(9 * var(--txt-fl-h));} .cnct2:hover{color: var(--c-d); background-color: var(--c-a);} .s-lg-d{display: block;} .s-lg-m{display: none; width: 0; height: 0;} .ml{font-display: swap; font-family: "symbols"; z-index: 95;} .shaye{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-left: 0.5vh; margin-top: 5vh; font-size: 6.3vh; align-content: center; grid-auto-flow: dense; z-index: 96;} .shaye a{color: #fedb43;} .shaye a:hover{color: #fedb43;} .ins:hover{color:var(--c-dk);} .hei:hover{color:var(--c-dk);} .kontakt:hover{color:var(--c-dk);} .knt:hover{color:var(--c-dk);} .ins:hover{color:var(--c-dk);} .projekte:hover{color:var(--c-dk);} .work:hover{color:var(--c-dk);} .pi:hover{color:var(--c-dk);} .typefaces:hover{color:var(--c-dk);} .aboutme:hover{color:var(--c-dk);} .ame:hover{color:var(--c-dk);} .hei{text-transform: uppercase; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; margin-top: 4.4vh; font-size: var(--txt-m); color: var(--c-ga); align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .hei a{color: var(--c-ga);} .hei a:hover{color: var(--c-dk);} .kontakt{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-top: 10vh; margin-bottom: inherit; font-size: var(--txt-m); color: var(--c-ga); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; align-content: center; grid-auto-flow: dense; white-space: nowrap; width: auto; height: auto;} .knt{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-top: 9.6vh; margin-bottom: inherit; font-size: var(--txt-m); color: var(--c-ga); color:var(--c-dk); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; align-content: center; grid-auto-flow: dense; white-space: nowrap; width: auto; height: auto;} .ins{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-top: 13.5vh; margin-bottom: inherit; font-size: var(--txt-m); color: var(--c-ga); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; align-content: center; grid-auto-flow: dense; white-space: nowrap; width: auto; height: auto;} .projekte{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg);margin-left: 0.25vh; margin-top: 13.3vh; font-size: var(--txt-m); color: var(--c-ga); line-height: calc(1.25 * var(--txt-l-h)); align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .work{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; margin-top: 11.5vh; font-size: var(--txt-m); color: var(--c-ga); color: var(--c-dk); align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .pi{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; margin-top: 14.7vh; font-size: var(--txt-m); color: var(--c-ga); color: var(--c-dk); align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .typefaces{color: var(--c-dk); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; margin-top: 13.4vh; font-size: var(--txt-m); align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .aboutme{color: var(--c-dk);-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; margin-top: 15vh; font-size: var(--txt-m); color: var(--c-ga); align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .ame{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-left: 0.25vh; margin-top: 16.9vh; font-size: var(--txt-m); color: var(--c-ga); color: var(--c-dk);align-content: flex-start; grid-auto-flow: row; white-space: nowrap; width: auto; height: auto;} .shaye1{padding: 0; align-content: center; max-height: 20vh; font-size: 5vh; width: 2.1vh; max-width: 2.1vh; margin: 0; z-index: 0; -webkit-animation-name: example2; -webkit-animation-duration: 6s; -webkit-animation-delay: 0s; animation-name: example2; animation-duration: 6s; animation-delay: 0s;} .shy{-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(90deg); font-size: 6vh; line-height: 4.2vh; width: 2.1vh; max-width: 2.1vh; margin: 0; padding: 0;} .shy a{color: #fedb43;} .shy2 a:hover{color: var(--c-dk); background-color: var(--c-ci); width: 2.5vh; max-width: 2.5vh; height: 5vh; max-height: 5vh;} .shy1 a{color: #fedb43; width: 2.5vh; max-width: 2.5vh; height: 5vh; max-height: 5vh;} .shy1 a:hover{color: var(--c-txt);} .shy2 a{color: var(--c-txt);} .blackm{bottom: 2vh; left: 2vh;} .n05a-t-f{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); line-height: calc(1.25 * var(--txt-l-h)); margin-top: 92vh; font-size: var(--txt-m); color: var(--c-ga); align-content: center; grid-auto-flow: dense; width: auto; animation-name: example2; animation-duration: 6s; animation-delay: 0s; margin-bottom: 0; margin-left: 0.1vh;} .n05a-t-f a{font-size: var(--txt-m); color: var(--c-ga); align-content: center;} .n05a-t-f .n05a-tf{visibility: hidden;} .n05a-t-f .n05a-tf::after{content: "";} .n05a-t-f:hover .n05a-tf, .n05a-type:hover{visibility: visible; color: var(--c-ci)} .nomargin{margin: 0; padding: 0;} .header{z-index: 91; position: fixed; width: 100vw;}
/*2022-07-21 DATA-GRID*/ [data-grid]{align-content: center; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; letter-spacing: 0.75px; height: auto;} [data-grid="shaye"]{padding-top: 0.2vh; border-right: 2.2px solid var(--c-d); border-bottom: 2px solid var(--c-d); position: fixed; display: block; width: 5vh; height: 12.5vh; grid-column: 1; grid-row: 1; z-index: 95; background-color: #121212; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; color: #fedb43;} [data-grid="n05a-t-a"]{width: 5vh; height: 3vh; grid-column: 1; grid-row-start: 3; grid-row-end: 4; overflow: inherit; align-self: flex-end; white-space: nowrap; margin-top: 1vh; z-index: 55;} [data-grid="n05a-type"]{color: var(--c-txt); width: 5vh; height: 98vh; position: absolute; overflow: inherit; align-self: flex-start; white-space: nowrap; margin-top: 0; z-index: 88; background-color: var(--c-d);} [data-grid="n05a-type3"]{display: block; margin-top: 4.3vh; padding: 0; width: 5vh; height: 31vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1; color: var(--c-ci); background-color: var(--c-dk);} [data-grid="projekte"]{display: block; border-bottom: 2px solid var(--c-d); margin-top: 4.3vh; padding: 0; width: 5vh; height: 20.5vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1;} [data-grid="projekte"]:hover{background-color: var(--c-ci);} [data-grid="work"]{background-color: var(--c-ci); display: block; margin-top: 4.4vh; padding: 0; width: 5vh; height: 17.7vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1;} [data-grid="work"]:hover{background-color: var(--c-ci);} [data-grid="aboutme"]{display: block; border-bottom: 2px solid var(--c-d); margin-top: -10.5vh; padding: 0; width: 5vh; height: 21.5vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 2;} [data-grid="aboutme"]:hover{background-color: var(--c-ci);} [data-grid="ame"]{background-color: var(--c-ci); display: block; margin-top: 4.4vh; padding: 0; width: 5vh; height: 23vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1;} [data-grid="ame"]:hover{background-color: var(--c-ci);} [data-grid="fotografie"]{background-color: var(--c-ci); display: block; margin-top: 4.4vh; padding: 0; width: 5vh; height: 20.7vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1;} [data-grid="fotografie"]:hover{background-color: var(--c-ci);} [data-grid="kontakt"]{width: 5vh; border-bottom: 2px solid var(--c-d); height: 18vh; grid-column: 4; grid-row: 3; z-index: 32; margin-top: 4vh;} [data-grid="kontakt"]:hover{background-color: var(--c-ci);} [data-grid="typefaces"]{background-color: var(--c-ci); display: block; margin-top: 4.4vh; padding: 0; width: 5vh; height: 19.4vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1;} [data-grid="typefaces"]:hover{background-color: var(--c-ci);} [data-grid="knt"]{background-color: var(--c-ci); display: block; margin-top: 4.4vh; padding: 0; width: 5vh; height: 15.7vh; grid-column: 4; z-index: 42; align-content: end; grid-row: 1;} [data-grid="knt"]:hover{background-color: var(--c-ci);} [data-grid="ins"]{width: 5vh; height: 20vh; grid-column: 4; grid-row: 3; z-index: 32; margin-top: 23vh;} [data-grid="ins"]:hover{background-color: var(--c-ci);} [data-grid="hei"]{width: 5vh; border-top: 2px solid var(--c-d); height: auto; align-self: flex-end; grid-column: 4; grid-row: 3; padding-bottom: 1.75vh; z-index: 33;} [data-grid="hei"]:hover{background-color: var(--c-ci); color: var(--c-txt);} [data-grid="lg"]{width: 5vh; max-width: 5vh; margin-top: 35vh; margin-left: 1.2vh; height: 5vh; max-height: 5vh; position: absolute; grid-column: 1; grid-row-start: 1; align-self: flex-start; z-index: 96;} [data-grid="lg"]:hover{color: var(--c-ci);} [data-grid="c-b"]{color: var(--c-txt); border: 2px solid var(--c-d); background-color: var(--c-dk); width: auto; height: 98vh; grid-column: 1; grid-column-end: 5; grid-row-start: 1; grid-row-end: 4; overflow: hidden; text-overflow: ellipsis; z-index: 9; border-radius: 6px; border-top-right-radius: 0;} .c-l{color: var(--c-txt); display: grid; left: 9vw; height: auto; width: auto; position: absolute; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); white-space: normal;} h1{color: var(--c-txt); display: grid; height: auto; width: auto; position: absolute; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; font-size: calc(1.93 * var(--txt-fl-h)); line-height: calc(1.93 * var(--txt-l-h)); max-width: inherit; padding: 0; z-index: 94;} a, p, h2, h3{color: var(--c-txt); font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;word-spacing: normal; border-radius: 6px;}
/*2022-07-21 STORE-FONT*/ .cr{margin: 0; letter-spacing:1px; font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; padding-top: 0.75vh;} .c-hd{margin-left: 0.4vw; color: var(--c-txt); display: inline-block; max-height: 25.51vh; height: 9.5vh; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d); border-radius: 6px; width: 40vw; margin-top: calc(0.82 * var(--txt-fl-h)); z-index: 96; white-space: nowrap; padding: 0vh 0vh 0vh 2vh; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .c-fl{max-width: 40vw; width: 40vw; position: absolute; margin-left: 0.4vw; color: var(--c-txt); display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background-color: var(--c-d); border-radius: 6px; padding: 0.5vh 2vh 2vh 2.5vh; word-spacing: normal; margin-top: calc(7.2 * var(--txt-fl-h)); font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); white-space: normal;} .c-l-t{color: var(--c-txt); display: inline-block; height: auto; position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d);white-space: nowrap; word-spacing: normal; border-radius: 6px; padding: 0.69vh 1.5vh 0.8vh 1.5vh; margin-left: 0.5vw; width: 17.5vw; text-align: left; z-index: 95; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); top: 59.33vh;} .f-ly-b{z-index:97; margin: auto; flex: auto; object-position: right; right: 0px; top: -6vh; padding: 0.9vh 1vh 0.1vh; background-color: var(--c-d); color: var(--c-txt); border: 2px solid var(--c-g); font-display: swap; font-family: "symbols"; position: absolute; display: block; height: auto; width: auto; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); text-align: center; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-ly{color: var(--c-g); border: 2px solid var(--c-g); display: inline-block; height: auto; position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d);white-space: nowrap; word-spacing: normal; border-radius: 6px; padding: 0.69vh 1.5vh 0.8vh 1.5vh; left: 23vw; width: 17.5vw; top: 60vh; text-align: left; z-index: 95; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .f-ly:hover, .f-ly-b:hover, .m-ne:hover{color: var(--c-d); background: var(--c-g);} .h-nav{background-color: var(--c-d); white-space: nowrap; word-spacing: 0; letter-spacing: 0.36px; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; line-height: calc(0.66 * var(--txt-l-h)); font-size: calc(0.55 * var(--txt-fl-h));z-index: 95; top: 2vh; right: 6.75vh; border-radius: 6px; position: absolute;} .h-nav a{z-index: 95; color: var(--c-txt); letter-spacing: 0.36px; line-height: calc(0.66 * var(--txt-l-h)); font-size: calc(0.55 * var(--txt-fl-h)); border: 0;} .imp a{z-index: 95; color: var(--c-txt); letter-spacing: 0.45px; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border: 0;} .h-it{color: var(--c-txt); padding: 0.4vh 1vh 0.5vh 1vh; display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;z-index: 95; white-space: nowrap; word-spacing: normal; border-radius: 6px;} .h-it:hover{color: var(--c-d); background-color: var(--c-ci);} .h-it-d{color: var(--c-txt); padding: 0.4vh 1vh; display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0;z-index: 95; white-space: nowrap; word-spacing: normal; border-radius: 6px;} .h-it-d:hover{color: var(--c-d); background-color: var(--c-ci);} .imp{white-space: nowrap; letter-spacing: 0.36px; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; line-height: calc(0.55 * var(--txt-l-h)); font-size: calc(0.55 * var(--txt-fl-h)); border: 0; display: inline-block;z-index: 88; left: 50%; transform: translate(-50%, -50%); height: 4vh; border-radius: 6px; position: absolute; margin-top: 85vh;} .footer{white-space: nowrap; letter-spacing: 0.36px; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h));z-index: 88; left: 50%; transform: translate(-50%, -50%); height: 4vh; border-radius: 6px; position: absolute; margin-top: 79.5vh;} .footer a{color: var(--c-txt); letter-spacing: 0.45px; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border: 0;} .imp a{z-index: 95; color: var(--c-txt); letter-spacing: 0.45px; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); border: 0;} .f-it{box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.05), 0px 2px 8px 6px rgba(0, 0, 0, 0.05); color: var(--c-txt); margin-left: 1vh; margin-right: 1vh; padding: 0.5vh 1.25vh 0.75vh; display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d); border-radius: 6px;} .f-it:hover{color: var(--c-d); display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-ci); border-radius: 6px;}
/*2022-08-20 NAV-s-m*/ .b{z-index: 99; position: absolute; right: 1.93vh; top: 2.5vh; -webkit-transform: rotateY(0); transform: rotateY(0); transition: all 0.5s cubic-bezier(0.25, 1, 0.25, 1);} .b-p{z-index: 99; width: 3vh; height: 0.2vh; margin: 0 0 3px 0; background-color: var(--c-txt); transition: all 0.4s cubic-bezier(0.6, 1.6, 0.6, 1.6);} .b-p:last-child{margin-bottom: 0;} .b-c{-webkit-transform: rotate(180deg); transform: rotate(180deg);} .b-c .b-p:nth-child(1){-webkit-transform: rotate(45deg) translate(3px, 3px); transform: rotate(45deg) translate(3px, 3px);} .b-c .b-p:nth-child(2){opacity: 0;} .b-c .b-p:nth-child(3){-webkit-transform: rotate(-45deg) translate(5px, -4px); transform: rotate(-45deg) translate(5px, -4px);} .menu{padding: 0; margin: 0; position: fixed; top: 0; left: 0; width: 100vw; visibility: hidden; z-index:98} .m--a{visibility: visible; width: 100vw; z-index:97;} .m-b, .m-l{flex-flow: column wrap; align-items: center; float: left; width: 56%; height: 100vh; overflow: hidden; text-overflow: ellipsis; z-index: 97;top: 0;} .m-l{font-display: swap; font-family: "menu"; font-weight: 400; font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; -webkit-text-stroke: 2px var(--c-a); -webkit-text-fill-color: var(--c-dk);z-index: 30; margin: 0; padding: 0; width: 44%; list-style-type: none; transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); font-size: 11.11vw; line-height: 11vh; right: 0; background-color: var(--c-dk); align-self: flex-end;} .wl{font-display: swap; font-family: "menu"; font-weight: 400; font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; -webkit-text-stroke: 2px; -webkit-text-fill-color: var(--c-dk); color: var(--c-ci);} .wl:hover{font-display: swap; font-family: "menu"; font-weight: 400; font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 100; color: var(--c-ci); -webkit-text-stroke: 0; -webkit-text-fill-color: var(--c-ci);} .l1{margin-top: 104.5vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-left: -33vw; align-self: flex-end;} .l2{margin-top: -25vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-left: -11vw; color: var(--c-a); align-self: center;} .l3{margin-top: -2.5vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-left: 11vw; align-self: flex-end;} .l4{margin-top: 25vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transform: rotate(270deg); margin-left: 33vw; align-self: flex-end;} .m-l--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .m-b{background-color: var(--c-d); transition: all 0.5s cubic-bezier(0.25, 1, 0.25, 1); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);} .m-b--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .m-it{-webkit-transform: translate3d(1000px, 0, 0); transform: translate3d(1000px, 0, 0); transition: all 0.5s cubic-bezier(0.25, 1, 0.30, 1);} .m-it--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .menu-link{padding: 25px 0;transition: all 1s cubic-bezier(0.25, 1, 0.25, 1);} .menu-link:before{content: ""; position: absolute; bottom: 0; left: 50%; width: 10px; height: 0; background-color: var(--c-dk); -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.8s cubic-bezier(0.25, 1, 0.30, 1); z-index: 90;} .menu-link:hover:before{width: 100%;} .menu .m-it:nth-child(1){transition-delay: 0.1s;} .menu .m-it:nth-child(2){transition-delay: 0.2s;} .menu .m-it:nth-child(3){transition-delay: 0.3s;} .menu .m-it:nth-child(4){transition-delay: 0.4s;} .menu .m-it:nth-child(5){transition-delay: 0.5s;} .menu .m-it:nth-child(6){transition-delay: 0.6s;} .move{animation: ease-in-out; animation-duration: 0;} @keyframes move{from{transform: translateY(0vh);}to{transform: translateY(+100vh);}} @-webkit-keyframes bounce{0%, 20%, 50%, 80%, 100%{-webkit-transform: translateY(0); transform: translateX(0);}40%{-webkit-transform: translateY(-30px); transform: translateY(-30px);}60%{-webkit-transform: translateY(-15px); transform: translateY(-15px);}} @-moz-keyframes bounce{0%, 20%, 50%, 80%, 100%{transform: translateY(0);}40%{transform: translateY(-30px);}60%{transform: translateY(-15px);}} @keyframes bounce{0%, 20%, 50%, 80%, 100%{-ms-transform: translateY(0); transform: translateY(0);}40%{-ms-transform: translateY(-30px); transform: translateY(-30px);}60%{-ms-transform: translateY(-15px); transform: translateY(-15px);}}.bounce{-webkit-animation: bounce 2.5s infinite; animation: bounce 2.5s infinite;} .about{background-color: var(--c-dk);} .datenschutz-wrapper{background-color: var(--c-dk);} .leistungen-wrapper{background-color: var(--c-dk);} .cloud-wrapper{background-color: var(--c-dk);} .cloud1-wrapper{background-color: var(--c-dk);} .cloud2-wrapper{background-color: var(--c-dk);} .daten-wrapper{background-color: var(--c-dk);} .hosting-wrapper{background-color: var(--c-dk);} .server-wrapper{background-color: var(--c-dk);} .newsletter-wrapper{background-color: var(--c-dk);} .newsletter1-wrapper{background-color: var(--c-dk);} .newsletter2-wrapper{background-color: var(--c-dk);} .newsletter3-wrapper{background-color: var(--c-dk);} .newsletter4-wrapper{background-color: var(--c-dk);} .newsletter5-wrapper{background-color: var(--c-dk);} .cookies-wrper{background-color: var(--c-dk);} .cookies1-wrapper{background-color: var(--c-dk);} .kommunikation-wrapper{background-color: var(--c-dk);} .kommunikation1-wrapper{background-color: var(--c-dk);} .kommunikation2-wrapper{background-color: var(--c-dk);} .kommunikation3-wrapper{background-color: var(--c-dk);} .kommunikation4-wrapper{background-color: var(--c-dk);} .btn:focus{outline: 0.1rem auto #4d90fe;}*, :before, :after{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
/*2022-08-20 SOZIAL*/ .s-wr{z-index: 95; width: 100vw; height: 100vh; margin: auto; padding-top: 25.5vh; top: 50%; left: 51.5%; background-color: var(--c-dk); transform: translate(-50%, -50%); align-self: center; align-content: center; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; position: absolute;} .s1{z-index: 97; margin: 30vh auto; width: 39vh; height: 39vh; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);} .s1 a{z-index: 90; border-radius: 6px; position: relative; height: 12vh; width: 12vh; font-size: 1vh; line-height: 5vh; float: left; margin-right: 1vh; margin-top: 1vh; text-align: center; border: 1.5px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .6); -webkit-transition: -webkit-transform .7s; -moz-transition: -moz-transform .7s; -o-transition: -o-transform .7s; transition: transform .7s;} .s1 .twitter{background-color: #00aced !important; border-color: #00aced !important;} .s1 .facebook{background-color: #4267b2; border-color: #4267b2;} .s1 .youtube{background-color: #ff0000; border-color: #ff0000;} .s1 .pixel{background-color: #cc2127; border-color: #cc2127;} .s1 .dribbble{background-color: #ea4c89; border-color: #ea4c89;} .s1 .instagram{background-color: #ffa526; border-color: #ffa526;} .s1 .linkedin{background-color: var(--c-a); border-color: var(--c-a);} .s1 .soundcloud{background-color: #ff5500; border-color: #ff5500;} .s1 .codepen{background-color: #fedb43 !important; border-color: #fedb43 !important;} .s1 a i{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} .s1 a:hover{border: 1px; -webkit-transform: scale(1.15, 1.15); -moz-transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); -o-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15);} .s{z-index: 95; border: 1px; margin: -2vh auto; width: 39vh; height: 39vh; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);} .svg-box{position: relative; z-index: 95; padding: 0;text-align: center; color: var(--c-txt); font-weight: normal; line-height: 12vh; transform: rotate(-45deg); height: 8vh; width: auto; padding-right: 2.45vh; padding-top: 2.5vh;} .s a{z-index: 90; position: relative; height: 12vh; width: 12vh; line-height: 12vh; border-radius: 6px; float: left; font-size: 1vh; margin-right: 1vh; margin-top: 1vh; text-align: center; -webkit-transition: -webkit-transform .7s; -moz-transition: -moz-transform .7s; -o-transition: -o-transform .7s; transition: transform .7s;} .s .twitter{background-color: #00aced; border-color: #00aced;} .s .facebook{background-color: #4267b2; border-color: #4267b2;} .s .youtube{background-color: #ff0000; border-color: #ff0000;} .s .pixel{background-color: #cc2127; border-color: #cc2127;} .s .dribbble{background-color: #ea4c89; border-color: #ea4c89;} .s .instagram{background-color: #ffa526; border-color: #ffa526;} .s .linkedin{background-color: var(--c-a); border-color: var(--c-a);} .s .soundcloud{background-color: #ff5500; border-color: #ff5500;} .s .codepen{background-color: #fedb43; border-color: #fedb43;} .s a i{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} .s a:hover{border: 1px; opacity: 0.8; z-index: 95; -webkit-transform: scale(1.15, 1.15); -moz-transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); -o-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15);} .c-codepen{background-color: #fedb43 !important; border-color: #fedb43 !important;} .c-twitter{background-color: #00aced !important; border-color: #00aced !important;} .c-facebook{background-color: #4267b2 !important; border-color: #4267b2 !important;} .c-pixel{background-color: #cc2127 !important; border-color: #cc2127 !important;} .c-youtube{background-color: #ff0000 !important; border-color: #ff0000 !important;} .c-dribbble{background-color: #ea4c89 !important; border-color: #ea4c89 !important;} .c-instagram{background-color: #ffa526 !important; border-color: #ffa526 !important;} .c-linkedin{background-color: var(--c-a) !important; border-color: var(--c-a) !important;} .c-soundcloud{background-color: #ff5500 !important; border-color: #ff5500 !important;} .c-twitter, .c-facebook, .c-pixel, .c-youtube, .c-dribbble, .c-instagram{-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
/*2022-08-20 ADD-ONS*/ .t1{color: var(--c-ci);} .t2{color: var(--c-txt);} .t3{color: var(--c-ci);} .t5{text-decoration-color: var(--c-ci)!important; text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted;} .mobile{display: none; width: 0; height: 0;} .desktop{display: block;} .tablet{display: none; width: 0; height: 0;} .bar-d{color: none; margin: 0; padding: 0; display: inline-block; height: auto; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background-color: var(--c-d);z-index: 95; white-space: nowrap; word-spacing: normal;} .g{-webkit-appearance: auto; margin-top: 1vh; margin-bottom: 1.25vh; padding: 0.55vh 1.25vh 0.7vh 1.5vh; display: flow-root; height: auto; width: 29vh; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; background: var(--c-d);z-index: 95; white-space: nowrap; word-spacing: normal; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h)); box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);list-style-type: none; color: var(--c-g); border: 2px solid var(--c-g); border-radius: 6px;} .g:hover{background: var(--c-g); color: var(--c-d);}
html, body, img, div, p, h1, h2, h3, h3, #data-grid, .m2, .c-l, .c-g, .cs, .menu, .c-fl, .c-hd, .c-l-t, .content, .c-r-bk, .c-wr, .c-it, .g, .f-ly, .c-lg, .cs1, .cs2, .cs3, .cs4, .s, .t-cd, .block, .mobile, .tablet, .desktop, .t-cd-s, .cd-f, .cs, .cd, sc1, .s2, .s3, .s4, .s5, .m-l, .cd-he, .cd1-hd, .cd-hd, .s-wr, .s, .bm, .imp, footer, .footer, .cs .cd .cd-hd, button, a, .shaye, .c-l-b .projekte, .n05a-type, .aboutme, .kontakt, .typefaces, .m-ne, .h, #d-m-t, .connect, .cnct2, .b, .cd-e, .cd1-e, .cd-hd, .ex, .ml, path, fa, .b-p, .youtube, .facebook, .codepen, .dribbble, .soundcloud, .instagram, .pixel, .linkedin, .fa, .svg-box, .iframe{cursor: none; text-decoration: none;} .cd .cd-e{border: 2px solid var(--c-d);} .demo{border: 2px solid var(--c-d);} .cd .cd-t-lt{border: 2px solid var(--c-d);} .cd .cd-p{border: 2px solid var(--c-d);} .cd2 .cd2-p{border: 2px solid var(--c-d);} .cd3 .cd3-p{border: 2px solid var(--c-d);} .cd-f{border: 2px solid var(--c-d);} .cd1 .cd1-p{border: 2px solid var(--c-d);} .f-cd1 .f-cd1-p{border: 2px solid var(--c-d);} .f-cd2 .f-cd2-p{border: 2px solid var(--c-d);} .f-cd3 .f-cd3-p{border: 2px solid var(--c-d);} .f-cs1 .f-cd1-p{border: 2px solid var(--c-d);} .cd:hover .cd-e{border: 2px solid var(--c-ci);} .demo:hover{border: 2px solid var(--c-ci);} .cd:hover .cd-t-lt{border: 2px solid var(--c-ci);} .cd:hover .cd-p{border: 2px solid var(--c-ci);} .cd2:hover .cd2-p{border: 2px solid var(--c-ci);} .cd3:hover .cd3-p{border: 2px solid var(--c-ci);} .cd-f:hover{border: 2px solid var(--c-ci);} .cd1:hover .cd1-p{border: 2px solid var(--c-ci);} .f-cd1:hover .f-cd1-p{border: 2px solid var(--c-ci);} .f-cd2:hover .f-cd2-p{border: 2px solid var(--c-ci);} .f-cd3:hover .f-cd3-p{border: 2px solid var(--c-ci);} .f-cs1:hover .f-cd1-p{border: 2px solid var(--c-ci);} .c-g{display: grid; position: inherit; z-index: 97; height: auto; width: 98vw; white-space: nowrap;}
/*2022-08-20 MEDIA*/ @media only screen and (min-width: 1921px){.cs .cd .cd-hd a.cd-e{position: absolute; justify-content: center; right: 0; font-size: 2.9vh; line-height: 2.9vh; height: 4vh; padding: 0.7vh; vertical-align: middle;} .cd-t-lt{top: 0; left: 0vw; position: absolute; font-size: calc(0.45 * var(--txt-fl-h)); line-height: calc(0.45 * var(--txt-l-h)); height: 4vh; z-index: 22;} .cd-he{position: absolute; width: inherit; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); padding:0.1vh 0vh;} .cd-p{position: relative; width: 100%; height: auto; margin: 0; padding: 3vh 0 0;} .cs{gap: 3.6vh; margin: 14.4vh 16vh 0;} .cs .cd{display: inherit; height: 31.5vh; width: 23.4vw;} .demo{margin: 22vh 3.66vh ;}}
@media only screen and (max-width: 1800px){.cs .cd .exed .cd-in{margin-top: 4vh;} .cs{z-index: 69; gap: 2.5vh; margin: 18vh 14vh;} .cs .cd{display: inherit; height: 30vh; width: 23vw; z-index: 69;} h1{font-size: calc(2.4 * var(--txt-fl-h)); line-height: calc(2.3 * var(--txt-l-h));} .c-hd{max-width: 60vw; width: 60vw; height: 10vh;} .c-fl{max-width: 40vw; width: 40vw; padding: 0vh 2vh 2vh 2.5vh;} .f-h{max-width: 40vw; width: 40vw;} .f-fl{max-width: 40vw; width: 40vw;}}
@media only screen and (max-width: 1499px){.t-cd{display: none; width: 0; height: 0;} .f-ly-b{display: none; width: 0; height: 0;} .demo{margin: 22vh 3.66vh ;} .f-l{z-index: 94; color: var(--c-txt); display: grid; left: 10.2%; transform: translate(0%, 0); height: auto; width: auto; position: absolute; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); white-space: normal;} .c-hd{max-width: 44vw; width: 44vw; max-height: calc(3.3 * var(--txt-fl-h));} .c-fl{max-width: 40vw; width: 40vw; padding: 0vh 2vh 2vh 2.5vh;} .iframe-text{display: none; width: 0; height: 0; width: 0;} .f-cs1{border-radius: 6px; color: var(--c-txt); max-height: auto; width: 60vw; position: absolute; display: inherit; top: 30%; left: 45%; transform: translate(-50%, -50%); z-index: 95;} .f-cs1 .f-cd1{height: auto; color: var(--c-txt); width: auto; max-width: 60vw; display: inherit;}.f-cs2{left: 73.3%; margin-left: 2.25vw; top: 15vh; border-radius: 6px; color: var(--c-txt); max-height: 80vh; width: 20vw; position: absolute; display: inline-grid; z-index: 97;} .f-cs2 .f-cd2{max-height: 20.5vh; color: var(--c-txt); width: 20vw; margin-top: 2.4vh; max-width: 20vw; display: inline-grid;} .f-cs2 .f-cd2 .f-cd2-hd a.f-cd2-e{display: none; width: 0; height: 0;} .f-cd2{display: none; width: 0; height: 0;} .f-cs3{display: none; width: 0; height: 0;} .f-cd3{display: none; width: 0; height: 0;} .f-r-b2{display: none; width: 0; height: 0;} .f-r-b3{display: none; width: 0; height: 0;} .f-r-b4{display: none; width: 0; height: 0;} .f-r-b5{display: none; width: 0; height: 0;} .f-r-b6{display: none; width: 0; height: 0;} .f-r-b7{display: none; width: 0; height: 0;} .t-cd-s{display: none; width: 0; height: 0;} .c-l-t{display: none; width: 0; height: 0;} .cs2{display: none; width: 0; height: 0;} .cs3{display: none; width: 0; height: 0;} .cs4{display: none; width: 0; height: 0;} .cs5{display: none; width: 0; height: 0;} .cs5-cap{display: none; width: 0; height: 0;} .cs5-dup{display: none; width: 0; height: 0;} .cs6{display: none; width: 0; height: 0;} .f-ly{display: none; width: 0; height: 0;} .c-r-b2{display: none; width: 0; height: 0;} .c-r-b3{display: none; width: 0; height: 0;} .c-r-b6{display: none; width: 0; height: 0;} .c-r-b7{display: none; width: 0; height: 0;} .t-cd-s{display: none; width: 0; height: 0;} .cs .cd .exed .cd-in{margin-top: 2vh;} .cs{z-index: 69; gap: 3vh; margin: 18vh 16vh;} .cs .cd{display: inherit; height: 30vh; width: 23vw; z-index: 69;} .c-fl{max-width: 60vw; width: 60vw; background: var(--c-d); box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15); font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); margin-top: calc(20.25 * var(--txt-fl-h));} .c-r-b{position: absolute; left: 2.25vw; margin-left: 24.5vh; font-size: calc(0.82 * var(--txt-fl-h)); top: 52.5vh;} .c-l-b{font-size: calc(0.82 * var(--txt-fl-h)); top: 52.5vh; margin-left: 2.25vw;}.f-r-b2{display: none; width: 0; height: 0;} .f-r-b3{display: none; width: 0; height: 0;} .f-r-b6{display: none; width: 0; height: 0;} .f-r-b7{display: none; width: 0; height: 0;} .f-h{margin-left: 45vw; transform: translate(-50%, 0); height: 15vh; max-width: 53vw; width: 53vw; margin-top: calc(17.5 * var(--txt-fl-h));} .f-fl{max-width: 53vw; width: 53vw; background: var(--c-d); font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); margin-top: calc(20.5 * var(--txt-fl-h)); margin-left: 45vw; transform: translate(-50%, 0); height: 15vh;} .f-r-b{left: 2.25vw; margin-left: 33vw; font-size: calc(0.82 * var(--txt-fl-h)); top: 50vh;} .f-l-b{font-size: calc(0.82 * var(--txt-fl-h)); top: 50vh; margin-left: 12.25vw;} .tablet{display: none; width: 0; height: 0;} .mobile{display: none; width: 0; height: 0;} .desktop{display: block;}}
@media only screen and (max-width: 1459px){.cursor{width: 0; height: 0; display: none;} html, body, img, div, p, h1, h2, h3, h3, #data-grid, .m2, .c-l, .c-g, .cs, .menu, .c-fl, .c-hd, .c-l-t, .content, .c-r-bk, .c-wr, .c-it, .g, .f-ly, .c-lg, .cs1, .cs2, .cs3, .cs4, .s, .t-cd, .block, .mobile, .tablet, .desktop, .t-cd-s, .cd-f, .cs, .cd, sc1, .s2, .s3, .s4, .s5, .m-l, .cd-he, .cd1-hd, .cd-hd, .s-wr, .s, .bm, .imp, footer, .footer, .cs .cd .cd-hd a.cd-e:hover{cursor: auto;} button, a, .shaye, .c-l-b .projekte, .n05a-type, .aboutme, .kontakt, .typefaces, .m-ne, .h, #d-m-t, .connect, .cnct2, .b, .cd-e, .cd1-e, .cd-hd, .ex, .ml, path, fa, .b-p, .youtube, .facebook, .codepen, .dribbble, .soundcloud, .instagram, .pixel, .linkedin, .fa, .svg-box, .iframe{cursor: pointer;} .c-r-b4{left: 11.75%; bottom:14vh}.c-r-b5{right: 10.2%; bottom:14vh}[data-grid="hei"]{display: none; width: 0; height: 0;} .f-fl{margin-top: calc(20.5 * var(--txt-fl-h));} .footer{margin-top: 77vh;} .footer a{line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h));} .imp{margin-top: 82.5vh;} .imp a{z-index: 95; line-height: calc(0.82 * var(--txt-l-h)); font-size: calc(0.82 * var(--txt-fl-h));} .c-hd{max-width: 55vw; width: 55vw;} .c-fl{max-width: 55vw; width: 55vw;} .f-h{margin-top: calc(18.5 * var(--txt-fl-h)); max-width: 60vw; width: 60vw;} .f-fl{margin-top: calc(21.5 * var(--txt-fl-h)); max-width: 60vw; width: 60vw;} .wide-img1{display: run-in; height: 100vh; width: auto; background-size: cover; background-repeat: repeat; background-position: center center; overflow: hidden; text-overflow: ellipsis; align-self: center; align-content: stretch; position: absolute; padding: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;} #d-m-t{top: 1.9vh; left: 7.9vh; bottom: auto; right: auto; font-size: 3.6vh; line-height: 3.3vh; padding: 0.36vh 1vh 0.2vh;} [data-grid="c-b"]{max-height: 91vh; height: 91vh;} .block{margin-top: 4.4vh; right: 1vh; width: 5vh; height: 86.6vh; border-bottom-right-radius: 6px;} [data-grid="n05a-type"]{width: 5vh; height: 91vh; z-index: 10; border-radius: 6px; border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 0;} .n05a-type{display: none; width: 0; height: 0;} [data-grid="n05a-t-a"]{display: none; width: 0; height: 0;} [data-grid="hei"]{display: none; width: 0; height: 0;} .demo{height: 0; display: none;} .cs .cd{display: inherit; height: 29vh; width: 24vw; z-index: 69;}}
@media only screen and (min-width: 1250px){.m-l{font-size: 15.6vh; line-height: 6vh;} .l1{margin-left: -33vw;} .l2{margin-left: -11vw;} .l3{margin-left: 11vw;} .l4{margin-left: 33vw;}}
@media only screen and (max-width: 1250px){.h-nav{display: none; width: 0; height: 0; position:relative;}.cs .cd .cd-hd a.cd-e{position: absolute; justify-content: center; font-size: 2.9vh; line-height: 2.9vh; height: 4vh; padding: 0.4vh 0.62vh; vertical-align: middle;} [data-grid="c-b"]{max-height: 88vh; height: 88vh;} .block{height: 83.6vh;} [data-grid="n05a-type"]{height: 88vh;} .f-cs2{left: 67.75%; top: 7.5vh; border-radius: 6px; height: 30vh; width: 30vw; position: absolute; display: block; margin: 0; padding: 0;} .f-cs2 .f-cd2{height: 0; display: none; width: 0; height: 0;margin: 0;} .f-cs2 .f-cd2-m{height: 30vh; width: 30vw; margin: 0; padding: 0; position: absolute; display: block;} .f-cs3{left: 69%; top: 27.5vh; border-radius: 6px; height: 30vh; width: 30vw; position: absolute; display: block; margin: 0; padding: 0;} .f-cs3 .f-cd3{height: 0; display: none; width: 0; height: 0;margin: 0;} .f-cs3 .f-cd3-m{height: 30vh; width: 30vw; margin: 0; padding: 0; position: absolute; display: block;} .f-cd2-p{width: 27.5vw; height: auto;} .f-cd3-p{width: 27.5vw; height: auto;} .cd-t-lt{top: 0; left: 0vw; position: absolute; font-size: calc(0.45 * var(--txt-fl-h)); line-height: calc(0.45 * var(--txt-l-h)); height: 4vh; z-index: 22;} .cd-he{position: absolute; width: inherit; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); padding:0.1vh 0.3vh;} .cd-p{position: relative; width: 100%; height: auto; margin: 0; padding: 2.25vh 0 0;} .cd1-p{position: relative; width: 93%; height: auto; margin-top: 6vh;} .f-r-b{left: 2.25vw; margin-left: 33vw; font-size: calc(0.82 * var(--txt-fl-h)); top: 52.5vh;} .f-l-b{font-size: calc(0.82 * var(--txt-fl-h)); top: 52.5vh; margin-left: 12.25vw;} .c-hd{max-width: 44vw; height: 8vh; white-space: nowrap; border-radius: 6px;} .f-h{width: 69vw; max-width: 69vw; border-radius: 6px;} h1{font-size: calc(1.5 * var(--txt-fl-h)); line-height: calc(1.5 * var(--txt-l-h));} [data-grid="hei"]{display: none; width: 0; height: 0;} .n05a-type{display: none; width: 0; height: 0;} [data-grid="n05a-t-a"]{display: none; width: 0; height: 0;} .c-fl{max-width: 69vw; width: 69vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); margin-top: calc(16.5 * var(--txt-fl-h));} .f-fl{max-width: 69vw; width: 69vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h));} .c-r-b{font-size: calc(0.82 * var(--txt-fl-h)); top: 52.5vh; margin-left: 20vw;} .c-l-b{font-size: calc(0.82 * var(--txt-fl-h)); top: 52.5vh; margin-left: 0vw;} .cs .cd .exed .cd-in{margin-top: 8vh;} .cs{z-index: 69; gap: 0; margin: 17vh 10.5vh;} .cs .cd{display: inherit; height: 31.5vh; width: 23.4vw; z-index: 69;} .mobile{display: none; width: 0; height: 0;} .tablet{display: none; width: 0; height: 0;} .desktop{display: block;} .m-l{font-size: 17.6vw; height: 100vh; width: 100vw; line-height: 10vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); z-index: 33;} div.m-b{display: none; width: 0; height: 0;} ul.m-l--a, div.m-b--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .l1{margin-left: -65vw; margin-top: 105vh;} .l2{margin-left: -22.25vw; margin-top: -38vh;} .l3{margin-left: 22.25vw; margin-top: 12.5vh;} .l4{margin-left: 65vw; margin-top: 5vh;} .m-b{height: 0; width: 100vw; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} .m-b .lg{display: none; width: 0; height: 0;}}
@media only screen and (min-width: 1200px){.mobile{display: none; width: 0; height: 0;} .tablet{display: none; width: 0; height: 0;} .desktop{display: block;}}
@media only screen and (max-width: 1200px){body:after{content: 'small_desktop';}.c-hd{width: 60vw; margin-top: calc(0.82 * var(--txt-fl-h));} .c-fl{width: 60vw; margin-top: calc(17.25 * var(--txt-fl-h));} .c-l{margin-top: 2.5vh;} .c-r-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 51.5vh; margin-left: 23vw;} .c-l-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 51.5vh; margin-left: 0vw;} .f-r-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 51.5vh; margin-left: 23vw;} .f-l-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 51.5vh; margin-left: 7vw;} .m-ne{z-index:97; margin-top: calc(10* var(--txt-fl-h)); left: 77.5vw; flex: auto; object-position: right; padding: 0.36vh 1vh 0.2vh; background-color: var(--c-d); color: var(--c-txt); border: 2px solid var(--c-g); font-display: swap; font-family: "symbols"; position: absolute; display: block; height: auto; width: auto; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); text-align: center; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .mobile{display: none; width: 0; height: 0;} .tablet{display: block; width: auto; height: auto;} .desktop{display: none; width: 0; height: 0;} .kds1{width: 60vw; height: 82vh; top: 44%; left: 50%; transform: translate(-50%, -50%);} .kds1 .kd1{width: 60vw; height: 82vh;} .kd1-p{position: relative; top: 0%; left: 50%; transform: translate(-50%); width: 60vw; height: 82vh; margin: 0; padding: 0; z-index: 6;} .kds1 .kd1 .cd-in{text-rendering: geometricPrecision; width: 60vw; height: 82vh; max-height: 100vh; overflow: hidden; text-overflow: ellipsis; color: var(--c-txt); display: grid; padding-top: 0.48vh; position: inherit; font-display: swap; font-family: var(--f-fl);} .iframe{position: relative; display: block; border-radius: 6px; width: 60vw; height: 82vh; margin: 0; padding: 0; top: 0%; left: 50%; transform: translate(-50%); z-index: 6;} .kds1 .kd1 .cd-in{text-rendering: geometricPrecision; width: 60vw; height: 82vh; max-height: 100vh; overflow: hidden; text-overflow: ellipsis; color: var(--c-txt); display: grid; padding-top: 0.48vh; position: inherit; font-display: swap; font-family: var(--f-fl);} .c-fl{max-width: 75vw; width: 75vw; font-size: calc(0.82 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); white-space: normal;} .c-hd{max-width: 44vw; width: 44vw;} .f-fl{max-width: 44vw; width: 44vw; z-index: 97; font-size: calc(0.82 * var(--txt-fl-h)); margin-top: calc(19.5 * var(--txt-fl-h)); line-height: calc(0.82 * var(--txt-l-h)); margin-left: 49.5vw; max-height: 19.5vh;} .f-h{max-width: 77vw; width: 77vw; z-index: 96; white-space: nowrap; margin-left: 49.5vw; margin-top: calc(6 * var(--txt-fl-h));} .mobile{display: none; width: 0; height: 0;} .tablet{display: block; width: auto; height: auto;} .desktop{display: none; width: 0; height: 0;} .block{z-index: 12;} .cs1{margin-top: 0; width: auto; height: 73.5vh;} .cs{align-items: stretch; gap: 0; justify-items: center; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; width: inherit;} .cs .cd{display: inherit; height: 24vh; gap: 0; width: 33vw;}}
@media only screen and (max-width: 1024px){body:after {content: 'tablet';}.c-hd{max-width: 60vw; width: 60vw;} .c-l{margin-top: 2.5vh;} .f-cs2{left: 23.5%; top: 36.5vh; border-radius: 6px; height: 30vh; width: 30vw; position: absolute; display: block; margin: 0; padding: 0;} .f-cs2 .f-cd2{height: 0; display: none; width: 0; height: 0;margin: 0;} .f-cs2 .f-cd2-m{height: 30vh; width: 30vw; margin: 0; padding: 0; position: absolute; display: block;} .f-cs3{left: 62%; top: 36.5vh; border-radius: 6px; height: 30vh; width: 30vw; position: absolute; display: block; margin: 0; padding: 0;} .f-cs3 .f-cd3{height: 0; display: none; width: 0; height: 0;margin: 0;} .f-cs3 .f-cd3-m{height: 30vh; width: 30vw; margin: 0; padding: 0; position: absolute; display: block;} .f-cd2-p{width: 29vw; height: auto;} .f-cd3-p{width: 29vw; height: auto;} .c-r-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 50vh; margin-left: 35vw;} .c-l-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 50vh; margin-left: 5.5vw;} .f-r-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 50vh; margin-left: 55.5vw;} .f-l-b{position: absolute; font-size: calc(0.82 * var(--txt-fl-h)); top: 50vh; margin-left: 8.5vw;} [data-grid="n05a-type"]{width: 5vh; border-radius: 6px; border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 0;} .cs{align-items: stretch; justify-items: center; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; width: inherit; z-index: 69; height: 70vh; max-height: 90vh; margin: 5.5vh 7.5vh 0;} .cs .cd{display: inherit; height: 25vh; width: 44vw; z-index: 69;} div.m-b{display: none; width: 0; height: 0;} ul.m-l--a, div.m-b--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .l1{margin-left: -65vw; margin-top: 75vh;} .l2{margin-left: -22.25vw; margin-top: -20vh;} .l3{margin-left: 22.25vw; margin-top: 20vh;} .l4{margin-left: 65vw; margin-top: 5vh;} .m-b{height: 0; width: 100vw; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} .m-b .lg{display: none; width: 0; height: 0;}}
@media only screen and (max-width: 824px){[data-grid="ins"]{height: 20vh; grid-column: 4; grid-row: 3; z-index: 32; margin-top: 18.5vh;} [data-grid="aboutme"]{margin-top: -13.5vh;} [data-grid="kontakt"]{height: 18vh; margin-top: 0vh;} [data-grid="c-b"]{max-height: 85vh; height: 85vh;} .block{height: 80.6vh;} [data-grid="n05a-type"]{height: 85vh;}.imp{margin-top: 79.5vh;} .footer{margin-top: 74vh;} .c-hd{max-width: 75vw; width: 75vw;} .c-l{margin-top: 2.5vh;} .m-ne{margin-top: calc(8.5* var(--txt-fl-h)); left: 82.25vw; top: 22.5vh;} .kds1{width: 80vw; height: 69vh; top: 42%; left: 58%; transform: translate(-50%, -50%);} .kds1 .kd1{width: 80vw; height: 69vh;} .kd1-p{position: relative; top: 0%; left: 50%; transform: translate(-50%); width: 80vw; height: 69vh; margin: 0; padding: 0; z-index: 6;} .iframe{position: relative; display: block; border-radius: 6px; width: 80vw; height: 69vh; margin: 0; padding: 0; top: 0%; left: 50%; transform: translate(-50%); z-index: 6;} .kds1 .kd1 .cd-in{text-rendering: geometricPrecision; width: 80vw; height: 69vh; max-height: 69vh; overflow: hidden; text-overflow: ellipsis; color: var(--c-txt); display: grid; padding-top: 0.48vh; position: inherit; font-display: swap; font-family: var(--f-fl);} .c-r-b1{margin-top: calc(9 * var(--txt-fl-h)); padding: 0.45vh 0.5vh 0.5vh 0.5vh; font-display: swap; font-family: "symbols"; position: absolute; display: block; left: 20vw; margin-left: 0; height: 5vh; width: 5vh; font-size: calc(0.82 * var(--txt-fl-h)); top: 21.5vh; text-align: center; border-radius: 6px; box-shadow: 4px 8px 8px rgba(30, 30, 30, 0.15);} .mobile{display: block; height: auto; width: auto; z-index: 95;} .sitemap{display: none; width: 0; height: 0;} .sch{display: none; width: 0; height: 0;} .desktop{display: none; width: 0; height: 0;} .tablet{display: none; width: 0; height: 0;} .cs{align-items: stretch; justify-items: center; display: grid; gap: 0; grid-template-columns: 1fr; grid-template-rows: auto; width: inherit; z-index: 69;} .cs .cd{display: inherit; width: 44vw; gap: 0; z-index: 69;} .cs .cd .cd-hd{position: relative; padding: 0;} .m-l{font-size: 18.14vw; height: 100vh; width: 100vw; line-height: 10vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); z-index: 33;} div.m-b{display: none; width: 0; height: 0;} ul.m-l--a, div.m-b--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .l1{margin-left: -65vw;} .l2{margin-left: -22.25vw;} .l3{margin-left: 22.25vw;} .l4{margin-left: 65vw;} .m-b{height: 0; width: 100vw; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} .m-b .lg{display: none; width: 0; height: 0;}}
@media only screen and (max-width: 767px){body:after {content: 'mobile';}#d-m-t{top: 1.9vh; left: 15.25vh; bottom: auto; right: auto;} .c-l{margin-top: 4.4vh;} .h-it-d{color: none; margin: 0; padding: 0; display: none; width: 0; height: 0; font-display: swap; font-family: none; z-index: 0; border: 0;} .bar-desktop{color: none; margin: 0; padding: 0; display: none; width: 0; height: 0; font-display: swap; font-family: none; z-index: 0; border: 0;} .f-cs2{left: 15%; top: 36vh; border-radius: 6px; height: 30vh; width: 30vw; position: absolute; display: block; margin: 0; padding: 0;} .f-cs3{left: 66%; top: 36vh; border-radius: 6px; height: 30vh; width: 30vw; position: absolute; display: block; margin: 0; padding: 0;} .f-cd2-p{width: 40vw; height: auto;} .f-cd3-p{width: 40vw; height: auto;} .f-cs1{border-radius: 6px; color: var(--c-txt); max-height: auto; width: 88vw; position: absolute; display: inherit; top: 23%; left: 50%; transform: translate(-50%, -50%);} .f-cs1 .f-cd1{height: auto; color: var(--c-txt); width: auto; max-width: 88vw; display: inherit;} .m-ne{margin-top: calc(8.5* var(--txt-fl-h)); left: 82.25vw; top: 22.5vh;} .c-r-b4{left: 2.5vh;} .c-r-b5{right: 2.5vh;} .svg-box{position: relative; z-index: 3; font-weight: normal; line-height: 8vh; transform: rotate(-45deg); height: 6.7vh; width: auto; padding-right: 1.45vh; padding-top: 1.3vh;} .s a{z-index: 3; height: 9vh; width: 9vh; line-height: 8vh; font-size: 1vh; border-radius: 6px; text-align: center;} .shaye{-webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); transform: rotate(0deg); margin-left: 0.2vh; margin-top: -1vh; font-size: 6.3vh; align-content: center; grid-auto-flow: dense; color: var(--c-ci);} [data-grid="shaye"]{position: fixed; display: block; width: 12.5vh; height: 6.29vh; grid-column: 1; grid-row: 1; z-index: 42;} .imp{margin-top: 79.5vh;} .footer{margin-top: 74vh;} .cs1{margin: 10vh 0;} .cs{align-items: stretch; justify-items: center; display: grid; gap: 0; grid-template-columns: 1fr; grid-template-rows: auto; width: inherit; z-index: 69;} .cs .cd{display: inherit; width: 44vw; gap: 0; height: 10vh; max-height: 50vh;} .cs{margin: 8.25vh 0vh 0; gap: 0;} .cs .cd{display: inherit; height: 10vh; margin: 0; width: 44vw;} h1{color: var(--c-txt); display: grid; height: inherit; width: inherit; position: absolute; font-display: swap; font-family: var(--f-fl); font-variation-settings: 'wght' 400, 'wdth' 0, 'mono' 100, 'rift' 100, 'slab' 0, 'futr' 0; font-size: calc(1.25 * var(--txt-fl-h)); line-height: calc(1.25 * var(--txt-l-h)); max-width: inherit; background-color: transparent;} p{color: var(--c-txt); display: grid; height: inherit; width: inherit; margin-left: 0.05vw;} .c-l-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); top: 48vh; margin-left: 5vw;} .c-r-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); top: 48vh; margin-left: 35vw;} .f-l-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); top: 55.5vh; margin-left: 5vw;} .f-r-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); margin-left: 35vw; top: 55.5vh;} .c-fl{max-width: 85vw; width: 85vw; z-index: 97; font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); margin-top: calc(14.55 * var(--txt-fl-h)); padding: 1vh 1vh 1.5vh 1.75vh;} .c-hd{height: auto; min-height: 6.6vh; max-width: 80vw; width: 80vw; z-index: 97; padding: 0.25vh 1vh 1.5vh 1.75vh;} .f-fl{max-width: 85vw; width: 85vw; z-index: 97; font-size: calc(0.55 * var(--txt-fl-h)); margin-top: calc(20.5 * var(--txt-fl-h)); line-height: calc(0.66 * var(--txt-l-h)); margin-left: 47.5vw; white-space: nowrap; padding: 1vh 1vh 1.5vh 1.75vh;} .f-h{max-width: 85vw; width: 85vw; padding: 0.25vh 1vh 1.5vh 1.75vh; max-height: 17vh; margin-left: 47.5vw; margin-top: calc(2 * var(--txt-fl-h));} [data-grid="typefaces"]{display: none; width: 0; height: 0;} [data-grid="fotografie"]{display: none; width: 0; height: 0;} [data-grid="ins"]{display: none; width: 0; height: 0;} [data-grid="aboutme"]{display: none; width: 0; height: 0;} [data-grid="ame"]{display: none; width: 0; height: 0;} [data-grid="n05a-type"]{display: none; width: 0; height: 0;} [data-grid="n05a-t-a"]{display: none; width: 0; height: 0;} [data-grid="projekte"]{display: none; width: 0; height: 0;} [data-grid="work"]{display: none; width: 0; height: 0;} [data-grid="kontakt"]{display: none; width: 0; height: 0;} [data-grid="knt"]{display: none; width: 0; height: 0;} [data-grid="hei"]{display: none; width: 0; height: 0;} [data-grid="lg"]{display: none; width: 0; height: 0;} [data-grid="content3"]{width: inherit; height: auto; grid-column: 3; grid-row: 3; z-index: 2;} [data-grid="content4"]{width: inherit; height: auto; grid-column: 2; grid-row: 3; z-index: 2;} .block{display: none; width: 0; height: 0;}div.m-b{display: none; width: 0; height: 0;}ul.m-l--a, div.m-b--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .m-l{font-size: 20vw; height: 100vh; width: 100vw; line-height: 10vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);} .m-b{display: none; width: 0; height: 0;} .m-b .lg{display: none; width: 0; height: 0;}}
@media only screen and (max-width: 525px){.f-r-b4{display: none; width: 0; height: 0;} .f-r-b5{display: none; width: 0; height: 0;} .c-hd{margin-top: calc(0 * var(--txt-fl-h)); left: -7.5vw; max-width: 84vw; width: 84vw; white-space: nowrap; padding: 0.25vh 1.5vh 1.5vh 2vh; word-spacing: normal; letter-spacing: normal;} .c-l-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); top: 42.5vh; margin-left: -4vw;} .c-r-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); margin-left: 34vw; top: 42.5vh;} .f-l-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); top: 52vh; margin-left: 9vw;} .f-r-b{font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); margin-left: 40vw; top: 52vh;} .c-fl{max-width: 90vw; width: 90vw; z-index: 97; font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); margin-top: calc(13.5 * var(--txt-fl-h));} .f-h{max-width: 82.25vw; width: 82.25vw; white-space: nowrap; padding: 0.75vh 1.5vh 1.5vh; word-spacing: normal; letter-spacing: normal; margin-top: calc(0 * var(--txt-fl-h));} .f-fl{max-width: 90vw; width: 90vw; font-size: calc(0.55 * var(--txt-fl-h)); line-height: calc(0.55 * var(--txt-l-h)); margin-top: calc(18.66 * var(--txt-fl-h));} .c-r-b4{display: none; width: 0; height: 0;} .c-r-b5{display: none; width: 0; height: 0;} div.m-b{display: none; width: 0; height: 0;} ul.m-l--a, div.m-b--a{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .m-l{font-size: 22.25vw; height: 100vh; width: 100vw; line-height: 7.5vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); z-index: 33;} .l1{margin-left: -65vw;} .l2{margin-left: -22.25vw;} .l3{margin-left: 22.25vw;} .l4{margin-left: 65vw;} .m-b{height: 0; width: 100vw; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} .m-b .lg{display: none; width: 0; height: 0;} .cs1{margin: 8.5vh 0;} [data-grid="c-b"]{max-height: 83.5vh;} .cs{display: grid;} .cs .cd{display: inherit; width: 60vw; height: 20vh;} .c-l{margin-top: 7.5vh;}}
@media only screen and (max-width: 400px){.m-ne{margin-top: calc(7.5* var(--txt-fl-h)); left: 82.25vw; top: 22.5vh;} .sch{display: none; width: 0; height: 0;} [data-grid="c-b"]{max-height: 82.5vh;} .cs1{margin: 7vh 0;} .cs .cd{display: inherit; width: 60vw;}}