@view-transition {
navigation: auto;
}
*:where(:not(iframe, canvas, img, svg, video, ::view-transition):not(svg *, symbol *)) {
all: unset;
display: revert;
}
:root{
--opacity-fade-thick: 0.72;
--opacity-fade-thin: 0.38;
--transition-500: all 0.5s ease-in-out;
--transition-400: all 0.4s cubic-bezier(.075,.82,.165,1);
--transition-300: all 0.3s cubic-bezier(.075,.82,.165,1);
--transition-100: all 0.1s cubic-bezier(.075,.82,.165,1);
--transition-belzier: cubic-bezier(.075,.82,.165,1);
--ease: var(--transition-belzier);
--xxs-space-gap: 1px;
--xs-space-gap: 2px;
--s-space-gap: 6px;
--m-space-gap: 12px;
--l-space-gap: 24px;
--xl-space-gap: 48px;
--xxl-space-gap: 96px;
--border-radius-tile: var(--xs-space-gap);
--border-radius-semi: var(--l-space-gap);
--border-radius-round: 100vw;
--link-cursor: crosshair;
}
::-webkit-scrollbar {
display: none;
-ms-overflow-style: none; scrollbar-width: none; }
::marker {
unicode-bidi: none;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: auto !important;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 100%;
-webkit-locale: "de";
-webkit-font-smoothing: subpixel-antialiased;
font-smooth: subpixel-antialiased;
background-color: var(--black);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
overscroll-behavior: none;
transition: all 0.3s var(--transition-belzier);
}
body{
height: 100%;
padding: 0;
z-index: 0;
scroll-behavior: smooth; 
background-color: var(--black);
transition: all 0.3s var(--transition-belzier);
}
body.fixed {
overflow: hidden;
}
html[data-theme='dark'] {
--white: #000000;
--black: #ffffff;
--lightgrey: #b6b6b6;
--grey: #555555;
--darkgrey: #212121;
--accent: #FF2B2C;
--accent-comp: #22004e;
}
html[data-theme='light'] {
--white: #ffffff;
--black: #000000;
--lightgrey: #d8d8d8;
--grey: #555555;
--darkgrey: #212121;
--accent: #E3A2EE;
--accent-comp: #5fdfab;
}
body[data-page="Info"], body[data-page="Privacy Policy"], body[data-page="Imprint"], body[data-page="Privacy Policy"]{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
main{
display: flex;
flex-direction: column;
background-color: var(--black);
position: relative;
transition: all 0.3s var(--transition-belzier);
min-height: 100vh;
justify-content: center;
padding: var(--s-space-gap) var(--m-space-gap);
}
.content{
margin: 0 auto;
position: relative;
overflow: hidden;
}
.content[data-page="Info"], .content[data-page="Imprint"], .content[data-page="Privacy Policy"] {
padding: var(--xxl-space-gap) var(--xl-space-gap) var(--l-space-gap) var(--xl-space-gap);
}
.content[data-page="Info"] main{
background-color: var(--lightgrey);
padding: var(--s-space-gap) var(--m-space-gap) var(--l-space-gap) var(--m-space-gap);
}
section {
padding: var(--m-space-gap);
min-height: 100vh;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
section#tease-info, section#helly-posts{
background-color: var(--black);
}
.has-section-padding{
padding: var(--xl-space-gap) var(--l-space-gap) var(--l-space-gap) var(--l-space-gap);
} .has-z-1{
z-index: 1;
}
.has-margin-left{
margin-left: auto;
}
.has-margin-right{
margin-right: auto;
}
.none {
display:none !important;
}
.is-different{
mix-blend-mode: difference;
-webkit-mix-blend-mode: difference;
}
.has-xxs-padding{
padding: var(--xxs-space-gap);
}
.has-xs-padding{
padding: var(--xs-space-gap);
}
.has-small-padding{
padding: var(--s-space-gap);
}
.has-small-padding-top{
padding-top: var(--s-space-gap);
}
.has-small-padding-bottom{
padding-bottom: var(--s-space-gap);
}
.has-xs-padding-right{
padding-right: var(--xs-space-gap);
}
.has-medium-padding{
padding: var(--m-space-gap);
}
.has-medium-padding-bottom{
padding-bottom: var(--m-space-gap);
}
.has-medium-padding-top{
padding-top: var(--m-space-gap);
}
.has-large-padding-bottom{
padding-bottom: var(--l-space-gap);
}
.has-large-padding-top{
padding-top: var(--l-space-gap);
}
.has-xlarge-padding-bottom{
padding-bottom: var(--xl-space-gap);
}
.has-xlarge-padding-top{
padding-top: var(--xl-space-gap);
}
.has-opacity-thick{
opacity: var(--opacity-fade-thick);
}
.has-opacity-thin{
opacity: var(--opacity-fade-thin);
}
.has-color-difference{
color: #ffffff;
}
.has-color-white{
color: var(--white);
}
.has-color-black{
color: var(--black);
}
.has-color-grey{
color: var(--grey);
}
.has-color-lightgrey{
color: var(--lightgrey);
}
.has-color-darkgrey{
color: var(--darkgrey);
}
.has-color-accent{
color: var(--accent);
}
.has-color-comp{
color: var(--accent-comp);
}
.has-weight-400{
font-weight: 400;
}
.has-weight-500{
font-weight: 500;
}
.has-weight-600{
font-weight: 600;
}
.has-margin-auto{
margin: 0 auto;
}
.has-flex{
display: flex;
}
.has-grid{
display: grid;
}
.column{
flex-direction: column;
}
.row{
flex-direction: row;
}
.has-width-max-width{
width: max-content;
}
.has-space-between{
justify-content: space-between;
}
.has-justify-center{
justify-content: center;
}
.has-justify-end{
justify-content: flex-end;
}
.has-align-end{
align-items: flex-end;
}
.has-align-center{
align-items: center;
}
.has-align-start{
align-items: flex-start; 
}
.has-text-right{
text-align: right;
}
.has-text-center{
text-align: center;
}
.has-border-radius-tile{
border-radius: var(--border-radius-tile);
}
.has-border-thick{
border: 2px solid;
}
.has-border-thin{
border: 1px solid;
}
.has-gap-xs{
gap: var(--xs-space-gap);
}
.has-gap-s{
gap: var(--s-space-gap);
}
.has-gap-m{
gap: var(--m-space-gap);
}
.has-gap-l{
gap: var(--l-space-gap) !important;
}
.has-background-black{
background-color: var(--black);
}
.has-background-white{
background-color: var(--white);
}
.has-background-lightgrey{
background-color: var(--lightgrey);
}
.has-background-darkgrey{
background-color: var(--darkgrey);
}
.has-text-uppercase{
text-transform: uppercase;
}
.dark-glass {
background: rgba(0,0,0,0.1);
border-radius: 25px;
backdrop-filter: blur(4px);
border: 2px solid rgba(0,0,0,0.2);
}
.glass {
background: rgba(255,255,255,0.1);
border-radius: 25px;
backdrop-filter: blur(4px);
border: 2px solid rgba(255,255,255,0.2);
}
.is-inline{
display: inline-block;
} #wpadminbar{
display: none;
}
:root :where(.is-layout-flex), :root :where(.is-layout-constrained) > *{
margin-block-start: 0px;
gap: 0px;
} .bg-home-overlay{
position: relative;
z-index: 1;
}
.bg-home-entry{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100000;
background-color: var(--black);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
cursor: var(--link-cursor);
}
.bg-home-entry.hidden {
opacity: 0;
pointer-events: none;
}
.bg-home-entry.is-visible{
opacity: 1;
pointer-events: auto;
}
.entry-text-wrapper{
padding: var(--s-space-gap) 0px;
margin: 0 auto;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
width: max-content;
}
.info-wrapper{
max-width: 65rem;
margin-left: auto;
} .clientlist-wrapper{
text-align: center;
}
ul.client-list{
display: inline-block;
text-align: left;
}
.portrait figure{
max-width: max-content;
} .privacy-wrapper{
padding: var(--m-space-gap);
text-align: center;
display: grid;
gap: var(--s-space-gap);
} .error-wrapper{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.barcode{
max-width: 33vw;
width: 100%;
}
.barcode svg{
fill: var(--white);
}
.arrow-button {
display: flex;
color: var(--black);
background-color: var(--accent);
padding: 10px 16px;
transition: all .3s ease;
font-weight: bold;
cursor: pointer;
align-items: center;
font-size: 14px;
width: max-content;
}
.arrow-button > .arrow {
width: 6px;
height: 6px;
border-right: 2px solid var(--black);
border-bottom: 2px solid var(--black);
position: relative;
transform: rotate(-45deg);
margin: 0 6px;
transition: all .3s ease;
}
.arrow-button > .arrow::before {
display: block;
background-color: currentColor;
width: 12px;
transform-origin: bottom right;
height: 2px;
position: absolute;
opacity: 0;
bottom: calc(-2px / 2);
transform: rotate(45deg);
transition: all .3s ease;
content: "";
right: 0;
}
.arrow-button:hover > .arrow {
transform: rotate(-45deg) translate(4px, 4px);
border-color: text-hover-color;
}
.arrow-button:hover > .arrow::before {
opacity: 1;
width: 12px;
}
.arrow-button:hover {
} .footer-info-wrapper{
position: fixed;
bottom: var(--m-space-gap);
left: calc(var(--m-space-gap) + var(--s-space-gap));
}
.mobile-nav-footer{
position: fixed;
bottom: calc(var(--m-space-gap) - 2px);
}
.footer-dsg{
position: fixed;
bottom: calc(var(--m-space-gap) + var(--s-space-gap));
right: calc(var(--m-space-gap) + var(--s-space-gap));
}
.dsg-wrapper{
align-items: baseline;
}
.mobile-nav-footer{
right: var(--m-space-gap);
} .marquee-outer {
width: 560px;
max-width: 100%;
margin: 0 auto;
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%,0%);
}
.marquee-wrap {
overflow: hidden;
width: 100%;
padding: var(--m-space-gap) 0;
position: relative;
transition: all 0.3s var(--transition-belzier);
}
.marquee-wrap::before,
.marquee-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: var(--l-space-gap);
z-index: 2;
pointer-events: none;
}
.marquee-wrap::before {
left: 0;
background: linear-gradient(to right, var(--black), transparent);
transition: all 0.3s var(--transition-belzier);
}
.marquee-wrap::after {
right: 0;
background: linear-gradient(to left, var(--black), transparent);
transition: all 0.3s var(--transition-belzier);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
will-change: transform;
}
.marquee-item {
display: flex;
align-items: center;
padding: var(--xxs-space-gap) var(--l-space-gap);
white-space: nowrap;
}
.marquee-item::after{
content: '✣';
color: var(--grey);
position: relative;
margin-left: var(--xl-space-gap);
}
.marquee-item a:hover { 
color: var(--white);
}
.info-text{
position: fixed;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
width: 100%;
}
.bio-text{
max-width: 35rem;
}
@media only screen and (max-width: 580px) {
.entry-text-wrapper{
justify-content: flex-end;
width: calc(100vw - (var(--s-space-gap) * 2));
overflow: hidden;
}
.marquee-outer { 
width: 100%; 
bottom: 0;
}
.footer-info-wrapper{
bottom: var(--s-space-gap);
}
.has-section-padding{
padding: var(--l-space-gap) var(--m-space-gap) var(--l-space-gap) var(--m-space-gap);
}
.mobile-none{
display: none;
visibility: hidden;
}
.privacy-wrapper{
text-align: left;
}
.content[data-page="Info"], .content[data-page="Imprint"], .content[data-page="Privacy Policy"]{
padding: var(--xxl-space-gap) var(--m-space-gap) var(--l-space-gap) var(--m-space-gap);
} 
.barcode, .bio-text{
max-width: calc(100% - (var(--m-space-gap) * 2));
}
}