#cookie-notice{position:fixed;min-width:100%;height:auto;z-index:100000;font-size:13px;letter-spacing:0;line-height:20px;left:0;text-align:center;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Arial,Roboto,"Helvetica Neue",sans-serif}#cookie-notice,#cookie-notice *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cookie-notice.cn-animated{-webkit-animation-duration:.5s!important;animation-duration:.5s!important;-webkit-animation-fill-mode:both;animation-fill-mode:both}#cookie-notice.cn-animated.cn-effect-none{-webkit-animation-duration:1ms!important;animation-duration:1ms!important}#cookie-notice .cookie-notice-container{display:block}#cookie-notice.cookie-notice-hidden .cookie-notice-container{display:none}#cookie-notice .cookie-revoke-container{display:block}#cookie-notice.cookie-revoke-hidden .cookie-revoke-container{display:none}.cn-position-top{top:0}.cn-position-bottom{bottom:0}.cookie-notice-container{padding:15px 30px;text-align:center;width:100%;z-index:2}.cookie-revoke-container{padding:15px 30px;width:100%;z-index:1}.cn-close-icon{position:absolute;right:15px;top:50%;margin:-10px 0 0 0;width:15px;height:15px;opacity:.5;padding:10px;border:none;outline:0;background:0 0;box-shadow:none;cursor:pointer}.cn-close-icon:focus,.cn-close-icon:focus-visible{outline:2px solid currentColor;outline-offset:3px}.cn-close-icon:hover{opacity:1}.cn-close-icon:after,.cn-close-icon:before{position:absolute;content:' ';height:15px;width:2px;top:3px;background-color:grey}.cn-close-icon:before{transform:rotate(45deg)}.cn-close-icon:after{transform:rotate(-45deg)}#cookie-notice .cn-revoke-cookie{margin:0}#cookie-notice .cn-button{margin:0 0 0 10px;display:inline-block}#cookie-notice .cn-button:not(.cn-button-custom){font-family:-apple-system,BlinkMacSystemFont,Arial,Roboto,"Helvetica Neue",sans-serif;font-weight:400;font-size:13px;letter-spacing:.25px;line-height:20px;margin:0 0 0 10px;text-align:center;text-transform:none;display:inline-block;cursor:pointer;touch-action:manipulation;white-space:nowrap;outline:0;box-shadow:none;text-shadow:none;border:none;-webkit-border-radius:2rem;-moz-border-radius:2rem;border-radius:2rem;text-decoration:none;padding:8.5px 10px;line-height:1;color:inherit}.cn-text-container{margin:0 0 6px 0}.cn-buttons-container,.cn-text-container{display:inline-block}.cn-compliance-warning{display:block;color:#f5a623!important;font-size:12px;line-height:18px;margin:4px 0 8px 0}.cn-compliance-warning .cn-warning-icon{color:#f5a623!important;margin-right:4px}.cn-compliance-warning strong{color:#f5a623!important}.cn-compliance-warning a{color:#f5a623!important;text-decoration:underline}.cn-compliance-warning a:hover{color:#ffb84d!important}#cookie-notice.cookie-notice-visible.cn-effect-none,#cookie-notice.cookie-revoke-visible.cn-effect-none{-webkit-animation-name:fadeIn;animation-name:fadeIn}#cookie-notice.cn-effect-none{-webkit-animation-name:fadeOut;animation-name:fadeOut}#cookie-notice.cookie-notice-visible.cn-effect-fade,#cookie-notice.cookie-revoke-visible.cn-effect-fade{-webkit-animation-name:fadeIn;animation-name:fadeIn}#cookie-notice.cn-effect-fade{-webkit-animation-name:fadeOut;animation-name:fadeOut}#cookie-notice.cookie-notice-visible.cn-effect-slide,#cookie-notice.cookie-revoke-visible.cn-effect-slide{-webkit-animation-name:slideInUp;animation-name:slideInUp}#cookie-notice.cn-effect-slide{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}#cookie-notice.cookie-notice-visible.cn-position-top.cn-effect-slide,#cookie-notice.cookie-revoke-visible.cn-position-top.cn-effect-slide{-webkit-animation-name:slideInDown;animation-name:slideInDown}#cookie-notice.cn-position-top.cn-effect-slide{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@media all and (max-width:900px){.cookie-notice-container #cn-notice-text{display:block}.cookie-notice-container #cn-notice-buttons{display:block}#cookie-notice .cn-button{margin:0 5px 5px 5px}}@media all and (max-width:480px){.cookie-notice-container,.cookie-revoke-container{padding:15px 25px}}@font-face {
font-family: "Favorit Regular";
src: url(//weavery.de/wp-content/themes/theweavery/fonts/FavoritStd-Regular.woff) format("woff"), url(//weavery.de/wp-content/themes/theweavery/fonts/FavoritStd-Regular.woff2) format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Space Grotesk Bold"
src: url(//weavery.de/wp-content/themes/theweavery/fonts/SpaceGrotesk-Bold.woff2) format("woff2"), url(//weavery.de/wp-content/themes/theweavery/fonts/SpaceGrotesk-Bold.woff) format("woff"), url(//weavery.de/wp-content/themes/theweavery/fonts/SpaceGrotesk-Bold.otf) format("opentype");
font-style: normal;
font-weight: 400;
}
:root {
--color-darkgrey: #292929;
--color-almostblack: #1f1f1f;
--gap30: 30px;
--gap60: 60px;
--gap90: 90px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 20px;
}
input,
textarea {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
} article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
h1:focus,
h2:focus,
p:focus {
outline: none;
}
html {
font-family: "Favorit Regular", sans-serif;
font-size: 16px;
line-height: 1.5;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
font-family: "Favorit Regular", sans-serif;
font-weight: 400;
line-height: 1.25;
} body {
color: black;
}
body.dark {
background-color: var(--color-darkgrey, #292929);
color: white;
}
body.dark a,
body.dark input {
color: white;
}
body.dark header nav ul li a::after,
body.dark hr {
background-color: white;
}
body.white {
background-color: white;
color: black;
}
body.white a,
body.white input {
color: black;
}
body.white header nav ul li a::after,
body.white hr {
background-color: black;
}
body.bunt,
body.bunt header nav ul {
color: black;
}
body.bunt a,
body.bunt input {
color: black;
}
body.bunt header nav ul li a::after,
body.bunt hr {
background-color: black;
}
.wrapper {
max-width: 98vw;
margin: 0 auto;
}
header.wrapper {
padding: 0 var(--gap30, 30px);
}
header {
width: 100%;
}
header nav {
margin-bottom: 160px;
position: relative;
height: 52px;
}
header nav ul { -webkit-backdrop-filter: blur(120px);
backdrop-filter: blur(120px);
padding: 15px calc(2vw + 15px);
list-style-type: none;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
width: 100vw;
}
header nav ul li {
display: inline-block;
}
header nav ul li a {
font-family: "Favorit Regular", sans-serif;
text-decoration: none;
font-size: 1.15rem;
line-height: 1;
position: relative;
}
header nav ul li a::after {
bottom: -3px;
left: 0;
height: 1px;
background-color: black;
width: 100%;
content: " ";
position: absolute;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: linear 0.1s transform;
-o-transition: linear 0.1s transform;
transition: linear 0.1s transform;
}
header nav ul li a:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: linear 0.1s transform;
-o-transition: linear 0.1s transform;
transition: linear 0.1s transform;
}
header nav ul li.current-menu-item a::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
header nav ul li+li {
margin-left: var(--gap30, 30px);
}
header.is_front .logo {
margin-bottom: 160px;
}
@media screen and (max-width: 768px) {
header.is_front .logo {
margin-bottom: 0;
}
} a.link_transition {
position: relative;
}
a.link_transition::after {
bottom: 4%;
left: -5%;
height: 90%;
background-color: rgba(255,255,255,.5);
width: 110%;
content: " ";
position: absolute;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: linear 0.1s transform;
-o-transition: linear 0.1s transform;
transition: linear 0.1s transform;
z-index: -1;
border-radius: 30px;
}
a.link_transition:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: linear 0.1s transform;
-o-transition: linear 0.1s transform;
transition: linear 0.1s transform;
}  .logo h1 {
font-size: 4.5rem;
line-height: 1;
}
@media screen and (min-width: 1580px) {
.logo h1 {
font-size: 6rem;
}
}
.logo h1 .super_hero {
font-family: "Space Grotesk Bold", sans-serif;
text-decoration: none;
font-size: 0.75rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.09em;
display: block;
margin-bottom: 1em;
}
.logo h1 span {
display: inline-block;
-webkit-transform-origin: 40% 40%;
-ms-transform-origin: 40% 40%;
transform-origin: 40% 40%;
will-change: transform;
-webkit-transition: linear 0s transform;
-o-transition: linear 0s transform;
transition: linear 0s transform;
position: relative;
top: 10px;
}
.logo h1 span.rotate--projects {
display: inline-block;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
will-change: transform;
-webkit-transition: linear 0s transform;
-o-transition: linear 0s transform;
transition: linear 0s transform;
position: relative;
top: 0;
}
.logo img { margin-left: 5%;
margin-right: auto;
margin-top: 0;
} @keyframes homecolors {
0% {background-color: rgb(236,104,65);}
25% {background-color: rgb(248,223,234);}
50% {background-color: rgb(185,212,243);}
75% {background-color: rgb(148,179,107);}
}
.homecolors {
animation-name: homecolors;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
} header.nohome {
position: relative;
}
header.nohome.is_front {
min-height: calc(100vh - 30rem);
}
@media screen and (max-width: 768px) {
header.nohome.is_front {
min-height: inherit;
}
}
header.nohome .logo img {
margin-right: 0;
margin-top: 0;
}
header.nohome .logo h1 {
margin-right: auto;
}
header.nohome .logo a.logolink {
position: fixed;
top: 15px;
right: 30px;
z-index: 1002;
}
@media(max-width:767px) {
hr {
max-width: calc(98vw - 30px);
}
footer {
max-width: calc(98vw - 30px);
}
header.nohome .logo a.logolink {
position: absolute;
top: 65px;
left:15px;
right: inherit;
z-index: 1002;
}
header.nohome .logo a.logolink img {
width:60px;
height:60px;
}
} header+main.wrapper {
margin-top: 90px;
}
body.home header+main.wrapper {
margin-top: 160px;
}
header h2,
span.section,
div.taglist {
font-family: "Space Grotesk Bold", sans-serif;
text-decoration: none;
font-size: 0.75rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.09em;
}
div.taglist a {
text-decoration: none;
line-height:1;
} header.flexheader {
padding: 0 var(--gap30, 30px);
}
div.projects,
section.pagecontent {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
article {
border: var(--gap30, 30px) solid transparent;
border-bottom: var(--gap60, 60px) solid transparent;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
opacity: 0;
transition: linear 0.5s opacity;
}
article.reveal:not(.lazyloading) {
opacity: 1;
}
article.reveal:hover {
opacity: 1;
} article div.desc p {
font-size: 0.9rem;
-ms-hyphens: auto;
hyphens: auto;
-webkit-hyphens: auto;
} article div.desc,
article span.section,
article div.taglist {
width: 50%;
}
article.col90 div.desc,
article.col90 span.section,
article.col90 div.taglist {
width: 40%;
}
article.col75 div.desc,
article.col75 span.section,
article.col75 div.taglist {
width: 45%;
}
article.col60 div.desc,
article.col60 span.section,
article.col60 div.taglist {
width: 50%;
}
article.col50 div.desc,
article.col50 span.section,
article.col50 div.taglist {
width: 55%;
}
article.col25 div.desc,
article.col25 span.section,
article.col25 div.taglist {
width: 100%;
}
article.col25,
div.col25,
.col25 {
width: 25%;
}
article.col30,
div.col30,
.col30 {
width: 30%;
}
article.col33,
div.col33,
.col33 {
width: 33%;
}
article.col40,
div.col40,
.col40 {
width: 40%;
}
article.col50,
div.col50,
.col50 {
width: 50%;
}
article.col60,
div.col60,
.col60 {
width: 60%;
}
article.col70,
div.col70,
.col70 {
width: 70%;
}
article.col75,
div.col75,
.col75 {
width: 75%;
}
article.col90,
div.col90,
.col90 {
width: 90%;
}
article.col100,
div.col100,
.col100 {
width: 100%;
} .pagecontent p+p,
.desc p+p {
margin-top: 1.4rem;
} article figure {
width: 100%;
display: block;
background-color: var(--color-almostblack, #1f1f1f);
background-color: rgb(242, 235, 233);
margin-bottom: -webkit-calc(var(--gap30, 30px) - 0.25rem);
margin-bottom: calc(var(--gap30, 30px) - 0.25rem);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
article.phone figure a,
article.photo figure a {
width: 100%;
height: auto;
position: relative;
z-index: 2;
overflow: hidden;
}
article.phone figure a img {
display: block;
width: 100%;
height: auto;
margin: auto;
}
article.phone figure a video {
width: 57%;
position: absolute;
top: 8%;
z-index: -1;
left: 21.5%;
display: block;
pointer-events: none;
border-radius: 6%;
}
article.phone.css_mockup figure a img+img {
width: 57%;
position: absolute;
top: 8%;
z-index: -1;
left: 21.5%;
display: block;
pointer-events: none;
border-radius: 6%;
} article.phone.mockup figure a img {
display: block;
width: 100%;
height: auto;
max-width: 444px;
}
article.photo figure a img {
display: block;
width: 100%;
height: auto;
}
figure a.browser,
figure div.browser {
display: block;
width: 90%;
height: auto;
position: relative;
margin: -webkit-calc(5% + 18px) auto 5%;
margin: calc(5% + 18px) auto 5%;
}
figure a.browser img,
figure div.browser img {
display: block;
width: 100%;
height: auto;
border-left: 1px solid var(--color-darkgrey, #292929);
border-right: 1px solid var(--color-darkgrey, #292929);
border-bottom: 1px solid var(--color-darkgrey, #292929);
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-box-shadow: 0px 4px 7px -3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px 7px -3px rgba(0, 0, 0, 0.3);
}
figure a.browser::before,
figure div.browser::before {
content: " ";
width: 100%;
top: -16px;
left: 0;
display: block;
position: absolute;
background-color: var(--color-darkgrey, #292929);
height: 16px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
background-image: url(//weavery.de/wp-content/themes/theweavery/assets/browser-buttons.svg);
background-size: var(--gap30, 30px) 6px;
background-position: 12px center;
background-repeat: no-repeat;
}
figure a.browser video,
figure div.browser video {
display: block;
width: 100%;
height: auto;
border-left: 1px solid var(--color-darkgrey, #292929);
border-right: 1px solid var(--color-darkgrey, #292929);
border-bottom: 1px solid var(--color-darkgrey, #292929);
-webkit-box-shadow: 0px 4px 7px -3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px 7px -3px rgba(0, 0, 0, 0.3);
} @-webkit-keyframes diashow_1 {
0% {
visibility: visible;
}
33.33% {
visibility: hidden;
}
66.66% {
visibility: hidden;
}
100% {
visibility: hidden;
}
}
@keyframes diashow_1 {
0% {
visibility: visible;
}
33.33% {
visibility: hidden;
}
66.66% {
visibility: hidden;
}
100% {
visibility: hidden;
}
}
@-webkit-keyframes diashow_2 {
0% {
visibility: hidden;
}
33.33% {
visibility: hidden;
}
66.66% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes diashow_2 {
0% {
visibility: hidden;
}
33.33% {
visibility: hidden;
}
66.66% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
@-webkit-keyframes diashow_3 {
0% {
visibility: hidden;
}
33.33% {
visibility: hidden;
}
66.66% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes diashow_3 {
0% {
visibility: hidden;
}
33.33% {
visibility: hidden;
}
66.66% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
article.diashow figure a.browser {
position: relative;
}
article.diashow figure a.browser img {
position: absolute;
top: 0;
visibility: hidden;
}
article.diashow figure a.browser img:nth-child(1),
article.diashow figure div.browser img:nth-child(1) {
top: 0;
position: static;
-webkit-animation-name: diashow_1;
animation-name: diashow_1;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
article.diashow figure a.browser img:nth-child(2),
article.diashow figure div.browser img:nth-child(2) {
-webkit-animation-name: diashow_2;
animation-name: diashow_2;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
article.diashow figure a.browser img:nth-child(3),
article.diashow figure div.browser img:nth-child(3) {
-webkit-animation-name: diashow_3;
animation-name: diashow_3;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
article.diashow:hover figure a.browser img:nth-child(3),
article.diashow:hover figure a.browser img:nth-child(2),
article.diashow:hover figure a.browser img:nth-child(1) {
animation-play-state: paused;
} article h3 {
font-size: 2rem;
margin-top: -webkit-calc(15px - 0.25rem);
margin-top: calc(15px - 0.25rem);
margin-bottom: -webkit-calc(15px - 0.25rem);
margin-bottom: calc(15px - 0.25rem);
}
article h3 a {
text-decoration: none;
}
article .desc h3 a {
border-bottom: none;
position: relative;
display: inline-block;
}
article .desc p a {
text-decoration: none;
display: inline-block;
position: relative;
border-bottom: 1px solid black;
}
article .desc h3 a {
position: relative;
}  .loadmore {
display: block;
margin: var(--gap90, 90px) auto;
text-align: center;
font-size: 1.5rem;
text-decoration: none;
font-family: "Favorit Regular", sans-serif;
} .tn {
text-decoration: none;
}
body.home section {
max-width: 98vw;
margin: 0 auto;
}
section+section {
margin-top: -1px;
}
div.inner {
width: -webkit-calc(100% - var(--gap60, 60px));
width: calc(100% - var(--gap60, 60px));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
margin: 0 auto;
padding: 0 0;
}
div.col {
border: var(--gap30, 30px) solid transparent;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.inner .col {
border: none;
}
p.large {
font-family: "Favorit Regular", sans-serif;
font-size: 2.5rem;
line-height: 1.2;
max-width: 720px;
}
p.medium {
font-family: "Favorit Regular", sans-serif;
font-size: 1.25rem;
line-height: 1.5;
}
p.medium a {
text-decoration: none;
}
section.services div.col:last-of-type p {
text-align: right;
}
section.contact div.col:nth-child(1n+2) p {
text-align: right;
} hr {
max-width: calc(98vw - 60px);
width: -webkit-calc(100% - var(--gap60, 60px));
width: calc(100% - var(--gap60, 60px));
margin: -webkit-calc(var(--gap60, 60px) - 1rem) auto;
margin: calc(var(--gap60, 60px) - 1rem) auto;
border: none;
height: 1px;
background-color: black;
}
.col h2 {
font-size: 2rem;
}
.col h3 {
font-size: 2rem;
}
.col ul {
margin-top: 0.75rem;
list-style-type: none;
list-style-type: circle;
margin-left: 20px;
}
.col ul li {
margin-top: 0.375rem;
margin-bottom: 0.375rem;
}
.col ul li ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
.col ul li ul li {
margin-top: 0;
margin-bottom: 0;
display: inline-block;
font-style: italic;
}
.col img,
.col video {
display: block;
width: 100%;
height: auto;
}
.col.first {
margin-left: 25%;
}
.col.last {
margin-right: 25%;
}
.col {
position: relative;
}
.tooltip {
background-color: var(--color-darkgrey, #292929);
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 20px;
color: white;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate3d(80%, -50%, 0) rotate(-3deg) scale(0.9);
transform: translate3d(80%, -50%, 0) rotate(-3deg) scale(0.9);
opacity: 0;
-webkit-transition: ease-out 0.1s transform, ease-out 0.1s opacity;
-o-transition: ease-out 0.1s transform, ease-out 0.1s opacity;
transition: ease-out 0.1s transform, ease-out 0.1s opacity;
font-size: 1rem;
} .pagecontent .col ul:hover {
cursor: help;
}
.col ul:hover+.tooltip {
-webkit-transform: translate3d(80%, -50%, 0) rotate(0) scale(1);
transform: translate3d(80%, -50%, 0) rotate(0) scale(1);
opacity: 1;
}
.case_link {
margin-top: 2.8rem;
}
.tooltip.cookie_info {
-webkit-transform: none;
-ms-transform: none;
transform: none;
position: static;
opacity: 1;
width: -webkit-calc(100% - 60px);
width: calc(100% - 60px);
margin: 60px auto;
}
.tooltip.cookie_info::before {
display: none !important;
}
.tooltip.cookie_info p.medium a {
text-decoration: underline;
color: white;
} .innercols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
border: 0;
}
fieldset.col50 {
width: 50%;
padding-right: var(--gap30, 30px);
float: left;
}
fieldset.col50+.col50 {
padding-left: var(--gap30, 30px);
padding-right: 0;
}
fieldset.col100 {
width: 100%;
clear: left;
}
form input,
form label {
width: 100%;
}
form label {
line-height: 1rem;
margin-bottom: 1rem;
display: block;
}
form input {
border: 1px solid black;
-webkit-appearance: none;
-moz-appearance: none;
line-height: 1.5rem;
font-size: 15px;
font-family: "Space Grotesk Regular", sans-serif;
padding: 5px;
}
form input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
width: 15px;
height: 15px;
border: 1px solid black;
padding: 0;
float: left;
}
form textarea {
width: 100%;
height: 15rem;
padding: 5px;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid black;
line-height: 1.5rem;
font-size: 15px;
font-family: "Space Grotesk Regular", sans-serif;
}
div.privacy_text {
width: 80%;
float: left;
margin-left: 10px;
}
div.col100.nopaddingtop {
padding-top: 0;
border-top: 0;
margin-bottom: -webkit-calc(var(--gap30, 30px) - 1rem);
margin-bottom: calc(var(--gap30, 30px) - 1rem);
}
.submit {
display: inline-block;
float: right;
text-decoration: none;
font-family: "Favorit Regular", sans-serif;
font-size: 1.5rem;
margin-right: -15px;
} body.contact section div.inner {
padding-top: 0;
border-top: none;
}
#maps {
width: -webkit-calc(100% - var(--gap60, 60px));
width: calc(100% - var(--gap60, 60px));
margin: var(--gap90, 90px) auto;
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
} body.single figure {
background-color: rgb(248, 248, 248);
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
position: relative;
}
body.single div.phone.video {
display: block;
width: 30%;
height: auto;
margin: auto;
position: relative;
z-index: 2;
}
body.single div.phone.video img {
display: block;
width: 100%;
height: auto;
margin: auto;
}
body.single div.phone.video video {
width: 57%;
position: absolute;
top: 8%;
z-index: -1;
left: 22%;
display: block;
pointer-events: none;
}
body.single div.phone.css_mockup.video img+img {
width: 57%;
position: absolute;
top: 8%;
z-index: -1;
left: 21.5%;
display: block;
pointer-events: none;
border-radius: 6%;
}
body.single .tooltip.casetip {
top: 50%;
right: -30%;
left: inherit;
width: 25%;
}
body.single div.phone+.tooltip.casetip {
right: 5.5%;
z-index: 3;
}
body.single .tooltip.casetip::before {
background-image: none;
background-color: var(--color-darkgrey, #292929);
width: 40%;
left: -40%;
height: 1px;
top: 50%;
}
body.single figure .tooltip_parent:hover+.tooltip.casetip {
-webkit-transform: translate3d(0, -50%, 0) rotate(0) scale(1);
transform: translate3d(0, -50%, 0) rotate(0) scale(1);
opacity: 1;
} body.single figure.has_tooltip .tooltip_parent:hover::after {
display: none;
}
body.single .foto+.tooltip.casetip::before {
width: 20%;
left: -20%;
}
body.single main {
overflow-x: hidden;
}
body.single figure+figure {
margin-top: var(--gap30, 30px);
} footer {
max-width: calc(98vw - 60px);
width: -webkit-calc(100% - var(--gap60, 60px));
width: calc(100% - var(--gap60, 60px));
margin: 0 auto 0 auto;
height: 1rem;
padding-bottom: var(--gap60, 60px);
position: relative;
}
footer p {
font-size: 0.9rem;
line-height: 1rem;
width: 50%;
float: left;
}
footer nav {
font-size: 0.9rem;
float: right;
margin-right: 40px;
}
footer nav ul {
list-style-type: none;
}
footer nav ul li {
line-height: 1rem;
}
footer nav ul li a {}
footer a#scrollup {
display: block;
width: 20px;
text-align: right;
font-family: "Favorit Regular", sans-serif;
font-size: 1.5rem;
line-height: 1.5;
text-decoration: none;
position: absolute;
right: 0;
top: -0.75rem;
} body.textpage .col ul {
list-style-type: circle;
margin-left: 0;
width: 70%;
margin: 1.4rem 0;
}
body.textpage h2+*,
body.textpage h3+* {
margin-top: 1.4rem;
}
body.textpage *+h2,
body.textpage *+h3 {
margin-top: 2.8rem;
} #cookie-notice {
width: 30%;
min-width: inherit;
left: 35%;
}
.cookie-notice-container {
position: relative;
padding: 1.4rem;
}
#cn-notice-text {
display: block;
font-size: 1rem;
width: 70%;
margin: 0 auto 1.4rem;
}
#cn-notice-text::before {
content: "Möchtest du einen Cookie?";
font-size: 1.4rem;
display: block;
margin-bottom: 1.4rem;
}
#cookie-notice .cn-button {
display: inline-block;
border: none;
color: white;
text-decoration: none;
} #cookie-notice .cn-button {
font-size: 1rem;
border-bottom: 1px solid white;
border-radius: 0;
}
#cn-accept-cookie {
float: right;
margin-left: 20px !important;
display: inline-block;
}
#cn-refuse-cookie {
position: absolute;
top: 1.4rem;
right: 1.4rem;
width: 30px;
height: 30px;
}
#cookie-notice .cn-button#cn-refuse-cookie {
border-bottom: none;
}
#cookie-notice #cn-close-notice {
display: none;
}
@media (max-width:1680px) {
article {
border: 15px solid transparent;
border-top-width: 30px;
border-bottom-width: 30px;
}
.projects {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width:1440px) {
.logo h1 {
width: 65%;
}
}
@media (max-width:1100px) {
.logo h1 {
width: -webkit-calc(100% - 155px);
width: calc(100% - 155px);
}
.logo img {
width: 100px;
height: 100px;
}
.col.last {
margin-right: 0;
}
.col.first {
margin-left: 33.33%;
}
.projects {
padding-left: 15px;
padding-right: 15px;
}
article.col25, div.col25, .col25 {
width: 35%;
}
article.col50 div.desc, article.col50 span.section,
article.col50 div.taglist {
width: 90%;
}
article.col60, div.col60, .col60 {
width: 65%;
}
article.col60 div.desc, article.col60 span.section, article.col60 div.taglist {
width: 90%;
}
article.col75, div.col75, .col75 {
width: 90%;
}
article.col75 div.desc, article.col75 span.section, article.col75 div.taglist {
width: 75%;
}
.col25.col {
width: 33.33%;
}
.col50.col {
width: 33.33%;
}
section.form .innercols .col50.col {
width: 50%;
}
section.pagecontent .col:nth-of-type(2n+2) {
margin-top: 0;
}
.col75.col {
width: 100%;
}
.col50.col.innercols {
width: 100%;
}
#cookie-notice {
width: 70%;
left: 15%;
}
body.page.about section.pagecontent .col25.col:first-child {
width: 100%;
}
body.page.about section.pagecontent .col25.col:nth-child(1n+2) {
width: 50%;
}
.pagecontent .col ul:hover+.tooltip {
-webkit-transform: translate3d(0, 0%, 0) rotate(0) scale(1);
transform: translate3d(0, 0%, 0) rotate(0) scale(1);
}
.pagecontent .tooltip {
position: static;
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin-top: 30px;
width: 90%;
}
.pagecontent .tooltip::before {
display: none;
}
body.single .tooltip.casetip {
top: 50%;
right: 2.5%;
left: inherit;
width: calc(100% - 30px);
margin: 15px auto;
}
body.single .tooltip.casetip::before {
background-image: none;
background-color: var(--color-darkgrey, #292929);
width: 100%;
right: -100%;
left: inherit;
height: 1px;
top: 50%;
}
body.single figure .tooltip_parent:hover+.tooltip.casetip {
-webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);
transform: translate3d(0, 0, 0) rotate(0) scale(1);
opacity: 1;
}
section.services div.inner div.col60 {
width: 60%;
}
}
@media (max-width:1024px) {}
@media screen and (max-width: 768px) {
hr {
max-width: calc(98vw - 30px);
}
footer {
max-width: calc(98vw - 30px);
}
}
@media (max-width:768px) {
body.home header+main.wrapper {
margin-top: 90px;
}
article.col30 {
width: 50%;
}
article.col70,
article.col60,
article.col50,
article.col90 {
width: 100%;
}
article.col25 {
width: 75%;
}
.col25.col {
width: 100%;
}
figure a.browser, figure div.browser {
width: 95%;
margin: -webkit-calc(2.5% + 18px) auto 2.5%;
margin: calc(2.5% + 18px) auto 2.5%;
}
html {
font-size: 14px;
}
.logo h1 {
font-size: 3rem;
}
.logo img {
width: 75px;
height: 75px;
margin-top: 5px;
}
p.large {
font-size: 2rem;
}
section.contact .col25.col {
width: 50%;
margin-left: auto;
}
section.contact .col50.col {
width: 50%;
}
section.contact .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.pagecontent:nth-of-type(1) .col:last-of-type {
margin-top: -webkit-calc(-60px + 1.4rem);
margin-top: calc(-60px + 1.4rem);
}
.col.first {
margin-left: 0;
}
.pagecontent .col img,
.pagecontent .tooltip {
width: 75%;
height: auto;
}
.pagecontent .col:nth-of-type(2n+2) {
margin-top: 30px;
}
body.page.about section.pagecontent .col25.col:nth-child(1n+2) {
width: 100%;
}
}
@media (max-width:650px) {
.projects {
padding-left: 0;
padding-right: 0;
}
div.col.col60,
div.col.col40 {
width: 100%;
}
section.contact .col25.col {
width: 100%;
margin-left: 0;
}
section.contact .col50.col {
width: 100%;
}
section.contact div.col:nth-child(1n+2) p,
section.contact p,
section.services div.col:last-of-type p {
text-align: left;
}
section.contact .col+.col,
section.services .col+.col {
margin-top: 1.4rem;
}
article.col30 {
width: 100%;
}
div.inner {
padding: 0;
}
.loadmore {
margin-top: var(--gap30, 30px);
margin-bottom: var(--gap30, 30px);
font-size: 1.25rem;
}
article p {
max-width: inherit !important;
}
header.wrapper,
header.flexheader {
padding: 0 15px;
}
header nav {
margin-bottom: 15vh;
}
header nav ul li+li {
margin-left: 15px;
}
header+main.wrapper {
margin-top: 0;
}
.logo h1 {
width: 100%;
font-size: 2rem;
}
.logo img {
width: 70px;
height: 70px;
margin-left: auto;
margin-right: 0;
}
p.medium {
font-size: 1.25rem;
}
.col h2 {
font-size: 1.25rem;
}
p.large {
font-size: 1.25rem;
margin-top: 1rem;
}
.case_link {
margin-top: 1rem;
}
article h3 {
font-size: 2rem;
}
body.home article {
border-top: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid transparent;
}
hr,
#maps,
div.inner,
footer {
width: -webkit-calc(100% - var(--gap30, 30px));
width: calc(100% - var(--gap30, 30px));
}
div.col {
border: 15px solid transparent;
}
.pagecontent:nth-of-type(1) .col:last-of-type {
margin-top: -webkit-calc(-30px + 1.4rem);
margin-top: calc(-30px + 1.4rem);
}
#maps {
margin-top: 0;
margin-bottom: 0;
}
section.form .innercols .col50.col {
width: 100%;
}
.submit {
margin: 30px 15px 0 0;
}
.pagecontent .col img, .pagecontent .tooltip {
width: 100%;
}
footer p {
width: 100%;
float: none;
}
footer nav {
width: 100%;
float: none;
margin-top: 5px;
}
body.page.contact section.contact div.inner .col25.col:nth-child(2) p {
height: 1.5em;
overflow-y: hidden;
}
}