/* Abstände Paddings Margins ================================================== */ @media (max-width: 749px) { .padding-top-responsive { padding-top: 6%; } .padding-bottom-responsive { padding-bottom: 6%; } .padding-intro-responsive { padding: 10% 0; } .padding-content-responsive { padding-bottom: 10%; } } @media (min-width: 750px) { .padding-top-responsive { padding-top: 2%; } .padding-bottom-responsive { padding-bottom: 2%; } .padding-intro-responsive { padding: 5% 0; } .padding-content-responsive { padding-bottom: 5%; } } .padding-disclaimer { padding: 1rem 0; } .margin-r-flex { margin-right: 10%; } .margin-l-flex { margin-left: 5%; } .margin-r-4 { margin-right: 4%; } .margin-r-6 { margin-right: 6%; } .margin-l-0 { margin-left: 0; } .margin-t-0 { margin-top: 0; } .margin-t-12 { margin-top: 1.2rem; } .margin-b-0 { margin-bottom: 0; } .margin-b-06 { margin-bottom: .6rem; } .margin-b-1 { margin-bottom: 1rem; } .margin-b-12 { margin-bottom: 1.2rem; } .margin-b-14 { margin-bottom: 1.4rem; } .margin-b-16 { margin-bottom: 1.6rem; } .margin-b-20x { margin-bottom: 24rem; } .margin-b-22 { margin-bottom: 2.2rem; } .margin-b-24 { margin-bottom: 2.4rem; } .margin-b-48 { margin-bottom: 4.8rem; } .margin-b-100 { margin-bottom: 100vh; } .padding-b-12 { padding-bottom: 1.2rem; } .padding-b-16 { padding-bottom: 1.6rem; } .padding-b-22 { padding-bottom: 2.2rem; } .padding-b-24 { padding-bottom: 2.4rem; } .margin-t-48 { margin-top: 4.8rem; } .padding-t-neg { margin-top: -.3rem; } .padding-t-16 { padding-top: 1.6rem; } .padding-t-06 { padding-top: .6rem; } .padding-t-12 { padding-top: 1.2rem; } .padding-t-24 { padding-top: 2.4rem; } .padding-t-48 { padding-top: 4.8rem; } .padding-t-nav { padding-top: 1%; } .padding-5 { padding: 5%; } .padding-12 { padding: 1.2rem; } .line-height-0 { line-height: 0; } .inline { display: inline-block; } /* Sichtbarkeit Navigation ================================================== */ @media screen and (max-width: 749px) { .wide { display: none; } .high { display: block; } } @media screen and (min-width: 750px) { .wide { display: block; } .high { display: none; } } /* Breiter Wrapper ohne Padding ================================================== */ .xxxlarge { max-width: 2400px; } .xxxlarge .container { max-width: 2400px; width: 100%; } /* Breiter Wrapper mit Padding ================================================== */ .xxxlarge-content { max-width: 2400px; } .xxxlarge-content .container { max-width: 2400px; } @media (max-width: 749px) { .xxxlarge-content .container { width: 90%; } } @media (min-width: 750px) { .xxxlarge-content .container { width: 96%; } } /* Text auf Titelbild ================================================== */ .relative { position: relative; max-height: 91vh; overflow: hidden; } .absolute { left: 0; margin-left: auto; margin-right: auto; max-width: 1200px; position: absolute; right: 0; top: 0; padding-top: 5%; width: 100%; } @media (max-width: 749px) { .absolute { width: 90%; padding-top: 5%; } } @media (min-width: 750px) { .absolute { width: 96%; padding-top: 2%; } } /* Custom columns ================================================== */ @media screen and (min-width: 750px) { .col-1 { width: 6.5%; } .col-2 { width: 15%; } .col-3 { width: 23.5%; } .col-4 { width: 32%; } .col-5 { width: 40.5%; } .col-6 { width: 49%; } .col-7 { width: 57.5%; } .col-8 { width: 66%; } .col-9 { width: 74.5%; } .col-10 { width: 83%; } .col-11 { width: 91.5%; } .col-12 { width: 100%; } .offset-by-1 { margin-left: 8.5%; } .offset-by-1-5 { margin-left: 12.75%; } .offset-by-2 { margin-left: 17%; } .offset-by-3 { margin-left: 25.5%; } .offset-by-4 { margin-left: 34%; } .offset-by-5 { margin-left: 42.5%; } .offset-by-6 { margin-left: 51%; } .offset-by-7 { margin-left: 59.5%; } .offset-by-8 { margin-left: 68%; } .offset-by-9 { margin-left: 76.5%; } .offset-by-10 { margin-left: 85%; } .offset-by-11 { margin-left: 93.5%; } .offset-by-12 { margin-left: 100%; } .offset-by-index-nav { margin-left: calc(50% - 118px) } .offset-by-index-logo { margin-left: calc(51% - 100px) } .offset-2nd-by-1 { margin-left: 10.5%; } .offset-2nd-by-2 { margin-left: 19%; } .offset-2nd-by-3 { margin-left: 27.5%; } .offset-2nd-by-4 { margin-left: 36%; } .offset-2nd-by-5 { margin-left: 44.5%; } .offset-2nd-by-6 { margin-left: 53%; } .offset-2nd-by-7 { margin-left: 61.5%; } .offset-2nd-by-8 { margin-left: 70%; } .offset-2nd-by-9 { margin-left: 78.5%; } .offset-2nd-by-10 { margin-left: 87%; } .offset-by-1-top { margin-top: 8.33333333333333%; } .offset-by-2-top { margin-top: 16.66666666666666%; } .offset-by-3-top { margin-top: 25%; } .offset-by-4-top { margin-top: 33.33333333333333%; } .offset-by-4-2-top { margin-top: 34%; } .offset-by-4-3-top { margin-top: 36.02%; } .offset-by-5-top { margin-top: 41.66666666666666%; } .offset-by-6-top { margin-top: 50%; } .offset-wide-to-bottom-8-4 { margin-top: 20.55%; } .offset-high-to-bottom-6-3 { margin-top: 35.4%; } .offset-by-neg-1 { margin-right: 8.5%; } .offset-by-neg-2 { margin-right: 17%; } .offset-by-neg-3 { margin-right: 25.5%; } .offset-by-neg-4 { margin-right: 34%; } .offset-by-neg-5 { margin-right: 42.5%; } .offset-by-neg-6 { margin-right: 51%; } .offset-by-neg-7 { margin-right: 59.5%; } .offset-by-neg-8 { margin-right: 68%; } .offset-by-neg-9 { margin-right: 76.5%; } .offset-by-neg-10 { margin-right: 85%; } .offset-by-neg-11 { margin-right: 93.5%; } .offset-by-neg-12 { margin-right: 100%; } .offset-to-top-left { position: absolute; top: 0; } .offset-to-bottom-left { bottom: 0; position: absolute; } .offset-to-bottom-right { bottom: 0; position: absolute; right: 0; } .quarter { margin: 0; width: 25%; } .third { margin: 0; width: 33.33333333333333%; } .two-third { margin: 0; width: 66.66666666666667%; } .half { margin: 0; width: 50%; } .three-quarter { margin: 0; width: 75%; } .full { width: 100%; } .offset-by-quarter { margin-left: 25%; } .offset-by-quarter-top { margin-top: 25%; } .offset-by-quarter-top-plus { margin-top: calc(25.5%); } .offset-by-half { margin-left: 50%; } .offset-by-full { margin-left: 100%; } .offset-by-half-top { margin-top: 50%; } .offset-by-third { margin-left: 33.33333333333333%; } } /* Fixed Navigation ================================================== */ .fixed-nav { left: 0; position: fixed; right: 0; top: 0; z-index: 8000; } @media screen and (min-width: 200px) { .fixed-nav-spacer { height: 53px; width: 100%; } } @media screen and (min-width: 750px) { .fixed-nav-spacer { height: 52px; width: 100%; } } @media screen and (min-width: 1024px) { .fixed-nav-spacer { height: 54px; width: 100%; } } /* Fixed columns ================================================== */ @media (max-width: 749px) { .fixed-col-half { margin-left: 0; width: 50%; } .fixed-col-half-offset { margin-left: 50%; width: 50%; } .fixed-col-6 { margin-left: 4%; width: 48%; } .fixed-col-6-offset { margin-left: 52%; width: 48%; } .fixed-col-3 { margin-left: 2%; width: 23.5%; } .fixed-col-3-offset { margin-left: 28%; width: 23.5%; } .fixed-col-4 { margin-left: 2%; width: 32%; } .fixed-col-color { margin-left: 4%; width: 48%; } .fixed-col-nav { margin-left: 4%; width: 48%; } .fixed-col-nav:nth-child(2n+1) { margin-left: 0; } .fixed-col-color:nth-child(2n+1) { margin-left: 0; } } @media (min-width: 750px) { .fixed-col-half { margin-left: 0; width: 50%; } .fixed-col-half-offset { margin-left: 50%; width: 50%; } .fixed-col-6 { margin-left: 2%; width: 49%; } .fixed-col-6-offset { margin-left: 51%; width: 49%; } .fixed-col-3 { margin-left: 2%; width: 23.5%; } .fixed-col-3-offset { margin-left: 27.5%; width: 23.5%; } .fixed-col-4 { margin-left: 2%; width: 32%; } .fixed-col-color { margin-left: 2%; width: 23.5%; } .fixed-col-nav, .fixed-col-nav:nth-child(2n+1) { margin-left: 2%; width: 23.5%; } } .fixed-col-6:first-child, .fixed-col-nav:first-child, .fixed-col-3:first-child, .fixed-col-4:first-child, .fixed-col-color:first-child { margin-left: 0; } .fixed-col-nav-padding { padding: 14px 0; } @media (max-width: 749px) { .slim-lightgrey-fixed-col-nav { border-top: 1px solid #e1e1e1; } } /* Branding-half columns ================================================== */ @media (min-width: 200px) { .branding-half { margin-left: 0; margin-right: 0; width: 100%; } } @media (min-width: 750px) { .branding-half { margin-left: 0; margin-right: 2%; width: 49%; } .branding-half:nth-child(2n+2) { margin-left: 0; margin-right: 0; } } .branding-half img { margin-bottom: 1rem; } @media screen and (max-width: 749px) { .project-name { display: block; margin-bottom: 0; } .project-descr { float: left; margin-bottom: 2rem; margin-top: 0; } } @media screen and (min-width: 750px) { .project-name { display: inline-block; margin-bottom: 0; width: 52%; } .project-descr { float: left; margin-bottom: 1rem; margin-top: 0; width: 48%; } } /* Links auf Startseite branding column drittel, halbe, volle Breite –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (min-width: 200px) { .branding { width: 100%; margin-right: 0; margin-left: 0; } } @media screen and (min-width: 750px) and (max-width: 1022px) { .branding { width: 49%; margin-right: 2%; margin-left: 0; } .branding:nth-child(2n+2) { margin-right: 0; margin-left: 0; } } @media screen and (min-width: 1023px) { .branding { width: 32%; margin-right: 2%; margin-left: 0; } .branding:nth-child(3n+3) { margin-right: 0; margin-left: 0; } } /* Links auf Startseite branding column drittel, halbe, volle Breite –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (min-width: 200px) { .contact { width: 100%; margin-right: 0; margin-left: 0; } } @media screen and (min-width: 750px) and (max-width: 1022px) { .contact { width: 49%; margin-right: 2%; margin-left: 0; } .contact:nth-child(2n+2) { margin-right: 0; margin-left: 0; } } @media screen and (min-width: 1023px) { .contact { width: 23.5%; margin-right: 2%; margin-left: 0; } .contact:nth-child(4n+4) { margin-right: 0; margin-left: 0; } } /* Post-zoom ================================================== */ .post-zoom { height: 100%; position: relative; width: 100%; } .post-zoom img { -webkit-transition: transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .post-zoom:hover > img, .post-zoom:focus > img { transform: scale(1.015); } @media (max-width: 749px) { .post-title-white, .post-title-black { color: #212529; line-height: 0; margin-top: 1.2rem; padding: 0 5%; position: relative; } } @media (min-width: 750px) { .post-title-white { color: #fafafa; left: 0; line-height: 0; padding: 4%; position: absolute; top: 0; } .post-title-black { color: #212529; left: 0; line-height: 0; padding: 4%; position: absolute; top: 0; } } /* Titel ================================================== */ .title-top { height: 100%; position: relative; width: 100%; } .title-top img { margin-bottom: 0; } @media (max-width: 749px) { .title-top-title-white, .title-top-title-black { color: #212529; line-height: 0; margin-top: 1.2rem; padding: 5% 0; position: relative; } } @media (min-width: 750px) { .title-top-title-white { color: #fafafa; left: 0; margin-left: auto; margin-right: auto; max-width: 1200px; line-height: 0; padding: 4%; position: absolute; top: 0; } .title-top-title-black { color: #212529; left: 0; margin-left: auto; margin-right: auto; max-width: 1200px; line-height: 0; padding: 4%; position: absolute; top: 0; } } /* absolute position ================================================== */ .topleft { left: 0; padding: 5%; position: absolute; right:0; top: 0; } .toprelative { position: relative; } /* Shapes ================================================== */ .circle { border-radius: 50%; padding-bottom: 100%; width: 100%; } .rounded { border-radius: 50%; } .circlesmall { border-radius: 50%; padding-bottom: 2.4rem; width: 2.4rem; } .squaresimple { padding-bottom: 100%; width: 100%; position: relative; } /* Misc ================================================== */ .slim-offwhite { border-top: 1px solid #fafafa; } .slim-lightgrey { border-top: 1px solid #e1e1e1; } .slim-lightgrey-bottom { border-bottom: 1px solid #e1e1e1; } .slim-darkgrey-bottom { border-bottom: 1px solid #5a5a5a; } .slim-white-bottom { border-bottom: 1px solid #ffffff; } .slim-midgrey { border-top: 1px solid #cccccc; } .slim-grey { border-top: 1px solid #959595; } .slim-darkgrey { border-top: 1px solid #5a5a5a; } .slim-mix-black { border-top: 1px solid #212529; } .project { border-bottom: none; line-height: 0; } /* Logo Info hidden ================================================== */ .info-hidden { display: none; height: 1px; visibility: hidden; width: 1px; } /* BG-Colors Hintergründe Projekte ================================================== */ .wever02-bg { background-color: #9a5e3f; } .wever2015-bg { background-color: #f08271; } .wever2015grey-bg { background-color: #fafafa; } .wever2015blue-bg { background-color: #005ba9; } .amicis-bg { background-color: #1b1b1b; } .amicisblack-bg { background-color: #000000; } .amicisnude-bg { background-color: #eed0bc; } .ripcurlmandarin-bg { background-color: #e7642b; } .ripcurllakeblue-bg { background-color: #008a96; } .ripcurldeepnavy-bg { background-color: #303242; } .ripcurldresdenblue-bg { background-color: #0087c0; } .ripcurlbutter-bg { background-color: #ffda7b; } .ripcurlgreenfade-bg { background-color: #c6d7c4; } .ripcurlmocha-bg { background-color: #745f4f; } .ripcurltwilight-bg { background-color: #4c506d; } .amicis-txt { color: #B39C8D; } .slim-amicis-bottom { border-bottom: 1px solid #B39C8D; } .slim-amicis { border-top: 1px solid #B39C8D; } /* Colors ================================================== */ .offwhite-bg { background-color: #fafafa; } .offwhitef5-bg { background-color: #f5f5f5; } .offwhitee5-bg { background-color: #e5e5e5; } .midgreylight-bg { background-color: #c9c9c9; } .midgrey-bg { background-color: #cccccc; } .grey-bg { background-color: #959595; } .mix-black-bg { background-color: #212529; } .superblack-bg { background-color: #0a0a0a; } .black-bg { background-color: #1a1a1a; } .sunyellow-bg { background-color: #ffcc00; } .orange-bg { background-color: #ff5722; } .white-bg { background-color: #ffffff; } .white-trans-bg { background-color: rgba(255,255,255,0.9) } .white-txt { color: #ffffff; } .offwhite-txt { color: #fafafa; } .onoffwhite-txt { color: #505050; } .grey-txt { color: #B3B3B3; } .midgrey-txt { color: #757575; } .orange-txt { color: #ff5722; } .darkgrey-txt { color: #5a5a5a; } .mix-black-txt { color: #212529; } .sunyellow-txt { color: #ffcc00; } .indigo-txt { color: indigo; } .gold-txt { color: gold; } /* Typography ================================================== */ .reg { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400; } .medi { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; } .semibold { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; } .bold { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 700; } .uppercase { text-transform: uppercase; } .underline { text-decoration: underline; } .right-txt { text-align: right; } .center-txt { text-align: center; } .xxxl-txt { font-size: 8rem; letter-spacing: -.3rem; line-height: 8.2rem; } @media screen and (max-width: 1024px) { .xxxl-txt { font-size: 6.4rem; letter-spacing: -.22rem; line-height: 6.6rem; } } @media screen and (max-width: 750px) { .xxxl-txt { font-size: 4.8rem; letter-spacing: -.18rem; line-height: 5rem; } } .xxl-txt { font-size: 6.4rem; letter-spacing: -.22rem; line-height: 6.6rem; } @media screen and (max-width: 1024px) { .xxl-txt { font-size: 6rem; letter-spacing: -.2rem; line-height: 6.2rem; } } @media screen and (max-width: 750px) { .xxl-txt { font-size: 5.8rem; letter-spacing: -.18rem; line-height: 6rem; } } .xl-txt { font-size: 4.4rem; letter-spacing: -.15rem; line-height: 4.6rem; } @media screen and (max-width: 1024px) { .xl-txt { font-size: 4rem; letter-spacing: -.125rem; line-height: 4.2rem; } } @media screen and (max-width: 750px) { .xl-txt { font-size: 3.6rem; letter-spacing: -.12rem; line-height: 3.85rem; } } .l-txt { font-size: 3.8rem; letter-spacing: -.12rem; line-height: 4.1rem; } @media screen and (max-width: 1024px) { .l-txt { font-size: 3.6rem; letter-spacing: -.1rem; line-height: 3.85rem; } } @media screen and (max-width: 750px) { .l-txt { font-size: 3.2rem; letter-spacing: -.09rem; line-height: 3.5rem; } } .ml-txt { font-size: 3.2rem; letter-spacing: -.08rem; line-height: 3.6rem; } @media screen and (max-width: 1024px) { .ml-txt { font-size: 2.6rem; letter-spacing: -.07rem; line-height: 3rem; } } @media screen and (max-width: 750px) { .ml-txt { font-size: 2.4rem; letter-spacing: -.06rem; line-height: 2.8rem; } } .logo-txt { font-size: 2.4rem; letter-spacing: -.1rem; line-height: 2.6rem; } @media screen and (max-width: 1024px) { .logo-txt { font-size: 2.2rem; letter-spacing: -.09rem; line-height: 2.4rem; } } @media screen and (min-width: 200px) { .nav-txt { font-size: 1.6rem; letter-spacing: -0.01rem; line-height: 2.2rem; } } @media screen and (min-width: 750px) { .nav-txt { font-size: 2rem; letter-spacing: -.05rem; line-height: 2.4rem; } } @media screen and (min-width: 1023px) { .nav-txt { font-size: 2.2rem; letter-spacing: -.06rem; line-height: 2.6rem; } } .m-txt { font-size: 2.2rem; letter-spacing: -.06rem; line-height: 2.6rem; } @media screen and (max-width: 1024px) { .m-txt { font-size: 2rem; letter-spacing: -.05rem; line-height: 2.4rem; } } .m-txt-logo { font-size: 2.2rem; letter-spacing: -.08rem; line-height: 2.8rem; } @media screen and (max-width: 1024px) { .m-txt-logo { font-size: 2rem; letter-spacing: -.07rem; line-height: 2.4rem; } } .s-txt { font-size: 1.8rem; letter-spacing: -.035rem; line-height: 2.4rem; } .xs-txt { font-size: 1.6rem; letter-spacing: -0.01rem; line-height: 2.2rem; } .xxs-txt { font-size: 1.4rem; letter-spacing: .02rem; line-height: 1.8rem; } .xxxs-txt { font-size: 1rem; letter-spacing: .02rem; line-height: 1.2rem; } /* Characters ================================================== */ .lefthookarrow::before { content: "\21A9 \0020"; } .lefthookarrow-after::after { content: "\0020 \21A9"; } .whitesquare::before { content: "\0020 \25A1 \0020"; } .leftwhitetriangle::before { content: "\25C5 \0020"; } .rightwhitetriangle::after { content: "\0020 \25BB"; } .left-arrow-long::before { content: "\27F5 \0020"; } .arrow-long::before { content: "\27F6 \0020"; } .arrow-long-after::after { content: "\0020 \27F6"; } .emdash-after::after { content: "\0020 \2014 \0020"; } .emdash-before::before { content: "\2014 \0020"; } .numero::before { content: "\2116 \0020"; } .downTipRightArrow::before { content: "\21B3 \0020"; } .multiply::before { content: "\2715 \0020"; } .circleblack::before { content: "\25CF \0020"; } .circlewhite::before { content: "\25CB \0020"; } .downarrow::before { content: "\2193 \0020"; } .downtiprightarrow::before { content: "\21B3 \0020"; } .down-arrow-circled::before { content: "\E139 \0020"; }