:root{ --color-light: #ffffff;
--color-dark: #000000; --main-fontsize: 20px;
--main-padding: 3rem; --main-trans: all .3s ease-in-out; --main-font: "GT-Cinetype-Regular", sans-serif;
--bold-font: "GT-Cinetype-Bold", sans-serif;
}
*{
box-sizing: border-box;
scroll-behavior: smooth;
}
@font-face{
font-family:"GT-Cinetype-Bold";
src:url(//www.felixschwager.de/wp-content/themes/felixschwager/assets/webfonts/GT-Cinetype-Bold.woff2) format("woff2"),url(//www.felixschwager.de/wp-content/themes/felixschwager/assets/webfonts/GT-Cinetype-Bold.woff) format("woff");
}
@font-face{
font-family:"GT-Cinetype-Regular";
src:url(//www.felixschwager.de/wp-content/themes/felixschwager/assets/webfonts/GT-Cinetype-Regular.woff2) format("woff2"),url(//www.felixschwager.de/wp-content/themes/felixschwager/assets/webfonts/GT-Cinetype-Regular.woff) format("woff");
}
html{
margin: 0;
padding: 0;
}
body{
font-family: var(--main-font);
font-size: var(--main-fontsize);
text-transform: lowercase;
margin: 0;
&.asideshow{
overflow: hidden;
}
&.contrast{
filter: invert(1);
& img{
filter: invert(1);
}
}
} main{
padding: var(--main-padding);
min-height: 100vh;
}
p{
margin: 0;
}
a{
font-family: var(--bold-font);
color: var(--color-dark);
&:hover{
text-decoration: none;
}
&.topbtn{
font-family: var(--main-font);
text-decoration: none;
}
}
h1,
h2,
h3,
h4{
font-size: 1em;
font-weight: normal;
text-transform: lowercase;
margin-top: 0;
}
b, strong{
font-family: var(--bold-font);
}
button{
padding: 0;
border: none;
background: transparent;
text-transform: lowercase;
font-size: 1em;
text-align: left;
&:hover{
cursor: pointer;
}
&.contrast{
& .bi-circle-half{
}
}
}
.d-none{
display: none;
}
#ff{
fill: transparent;
height: 5em;
width: auto;
margin: 1em 0;
}
.st0{
stroke: var(--color-dark);
stroke-width: 3;
stroke-miterlimit: 10;
fill: transparent;
}
ul{
list-style: none;
margin: 0;
padding: 1em 0;
border-top:  1.5px solid var(--color-dark);
max-width: 250px;
&.vita{
border-bottom:  1.5px solid var(--color-dark);
margin-bottom: 1em;
}
&.works{
margin-top: 1em;
&::before{
content: 'works';
}
& button{
font-family: var(--bold-font);
}
}
}
.law,
.sign{
font-size: .9em;
}
.page {
& p{
margin-bottom: 1em;
}
} .workwrap{
padding: var(--main-padding);
position: fixed;
top: 0;
right: -100vw;
width: 90vw;
max-width: 1500px;
height: 100vh;
border-left:  1.5px solid var(--color-dark);
background: var(--color-light);
transition: var(--main-trans);
overflow: auto;
img{
border: 1.5px solid var(--color-dark);
}
&.show{
right: 0;
}
& ul{
border: none;
max-width: unset;
}
& .close:nth-of-type(2){
display:none;
}
&.multiple-content{
& .close:nth-of-type(2){
display:block;
}
}
&:has(.infos){
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
& .content{
width: calc(60% - (var(--main-padding) / 2));
min-height: 100vh;
}
&:has(.content){
&:has(.content){
& .content{
min-height: unset;
}
}
}
& .infos{
width: calc(40% - (var(--main-padding) / 2));
& ul{
padding: 0;
margin-bottom: 1em;
}
}
}
button{
width: 100%;
display: block;
margin-bottom: 1em;
scroll-margin-top: 100px;
&.slick-next{
width: auto;
}
}
.textbox{
padding: 1em 0;
border-top:  1.5px solid var(--color-dark);
display: block;
}
} .slick-dots li button:before, .slick-next:before, .slick-prev:before{
font-family: inherit;
}
.slick-dots li button:before{
width: var(--main-fontsize);
height: var(--main-fontsize);
font-size: calc(2 * var(--main-fontsize));
}
.wp-block-cb-carousel .wp-block-image>img {
max-width: 100%;
margin: 0 auto;
} .reset{
margin-top: 1em;
font-family: var(--main-font);
}
canvas{
position: absolute;
top: 0;
left: 0;
z-index: -1;
} @media (hover: none) {
.reset{
display: none;
}
}
@media screen and (max-width: 768px){
:root{
--main-fontsize: 18px;
--main-padding: 1rem;
}
.reset{
display: none;
}
.workwrap{
width: 100vw;
border-left: 0px;
&:has(.infos) {
display: block;
& .content{
width: 100%;
}
& .infos{
width: 100%;
}
}
} 
.slick-next, .slick-prev{
display: none !important;
}
}
#wpadminbar .ab-sub-wrapper, #wpadminbar ul, #wpadminbar ul li {
max-width: unset !important;
border-top: none !important;
} .hidden {
display: none;
}
#cookie-banner {
padding: 1vmax;
width: 50%;
text-align: left;
font-size: 16px;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background-color: var(--color-dark);
color: var(--color-light);
}
#cookie-banner .closeme {
color: var(--color-ci);
}
@media screen and (max-width:768px) {
#cookie-banner {
width: 100%;
}
}