@font-face {
font-family: "Scarletty";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Scarletty.woff) format("woff"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Scarletty.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff) format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff) format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff) format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff) format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Light.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-LightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-LightItalic.woff) format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Regular.woff) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Regular.woff) format("woff");
font-weight: normal;
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Italic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Italic.woff) format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Medium.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-MediumItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-MediumItalic.woff) format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBoldItalic.woff) format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Bold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Bold.woff) format("woff");
font-weight: bold;
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BoldItalic.woff) format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBold.woff) format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBoldItalic.woff) format("woff");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Black.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Black.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BlackItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BlackItalic.woff) format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Plex";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Plex-Regular.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Plex-Regular.woff) format("woff");
font-style: normal;
font-display: swap;
}
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
display: block;
width: 100%;
font-family: "Grift";
font-weight: 300;
font-size: 1em;
background-color: #ffffff;
color: #010D06;
font-size: 1em;
overflow-x: clip;
}
html.noscroll,
body.noscroll {
overflow: hidden;
}
@media (min-width: 768px) {
html,
body {
font-size: 1.1em;
}
}
.has-small-font-size {
font-size: 85% !important;
}
.has-medium-font-size {
font-size: 120% !important;
}
.has-large-font-size {
font-size: 150% !important;
}
.has-x-large-font-size {
font-size: 180% !important;
}
div {
color: #010D06;
}
img {
max-width: 100%;
height: auto;
}
p {
padding: 0;
margin: 0;
}
p + figure {
margin-top: 1em;
}
figure img {
width: 100%;
height: auto;
}
strong {
font-weight: 700;
}
@media (min-width: 1281px) {
.alignwide {
margin: 0 -7.5vw;
}
}
.alignfull {
margin: 0 calc(0px - 1em);
}
@media (min-width: 1281px) {
.alignfull {
margin: 0 calc(-15vw + 1em);
}
}
main {
transition: opacity 0.2s;
}
main.noscroll {
opacity: 0;
}
main article {
padding: 2em 2em 0 2em;
}
@media (min-width: 1281px) {
main article {
font-size: 1.2em;
max-width: 70vw;
margin: 0 auto;
}
}
main article.no-hero {
padding-top: 6em;
}
@media (min-width: 768px) {
main article.no-hero {
padding-top: 8em;
}
}
@media (min-width: 1366px) {
main article.no-hero {
padding-top: 7.2em;
}
}
main article h1, main article h2, main article h3, main article h4, main article h5, main article h6, main article p, main article ul, main article ol {
padding: 0 0 0.5em 0;
margin: 0;
}
main article h1 br, main article h2 br, main article h3 br, main article h4 br, main article h5 br, main article h6 br, main article p br, main article ul br, main article ol br {
display: block;
}
main article h1.is-style-hyphens, main article h2.is-style-hyphens, main article h3.is-style-hyphens, main article h4.is-style-hyphens, main article h5.is-style-hyphens, main article h6.is-style-hyphens, main article p.is-style-hyphens, main article ul.is-style-hyphens, main article ol.is-style-hyphens {
hyphens: auto;
}
main article h1 sup, main article h2 sup, main article h3 sup, main article h4 sup, main article h5 sup, main article h6 sup, main article p sup, main article ul sup, main article ol sup {
display: block; font-size: 50%;
font-weight: 500;
line-height: 1.2;
margin-bottom: 0.5em; }
main article h1.is-style-script, main article h1.is-style-scriptRotate, main article h2.is-style-script, main article h2.is-style-scriptRotate, main article h3.is-style-script, main article h3.is-style-scriptRotate, main article h4.is-style-script, main article h4.is-style-scriptRotate, main article h5.is-style-script, main article h5.is-style-scriptRotate, main article h6.is-style-script, main article h6.is-style-scriptRotate, main article p.is-style-script, main article p.is-style-scriptRotate, main article ul.is-style-script, main article ul.is-style-scriptRotate, main article ol.is-style-script, main article ol.is-style-scriptRotate {
font-family: "Scarletty";
font-weight: 400;
font-style: normal;
line-height: 1;
position: relative;
margin: 0 0 20px 0;
}
main article h1.is-style-scriptRotate, main article h2.is-style-scriptRotate, main article h3.is-style-scriptRotate, main article h4.is-style-scriptRotate, main article h5.is-style-scriptRotate, main article h6.is-style-scriptRotate, main article p.is-style-scriptRotate, main article ul.is-style-scriptRotate, main article ol.is-style-scriptRotate {
transform-origin: center center;
transform: rotate(-5deg);
padding: 1em 0;
margin: -0.5em 0 0 0;
}
main article h1.is-style-scriptHashtag, main article h2.is-style-scriptHashtag, main article h3.is-style-scriptHashtag, main article h4.is-style-scriptHashtag, main article h5.is-style-scriptHashtag, main article h6.is-style-scriptHashtag, main article p.is-style-scriptHashtag, main article ul.is-style-scriptHashtag, main article ol.is-style-scriptHashtag {
font-family: "Scarletty";
text-transform: lowercase;
font-weight: normal;
padding: 0 0 0.25em 0;
margin: 0;
line-height: 1;
}
main article h1.is-style-scriptHashtag:before, main article h2.is-style-scriptHashtag:before, main article h3.is-style-scriptHashtag:before, main article h4.is-style-scriptHashtag:before, main article h5.is-style-scriptHashtag:before, main article h6.is-style-scriptHashtag:before, main article p.is-style-scriptHashtag:before, main article ul.is-style-scriptHashtag:before, main article ol.is-style-scriptHashtag:before {
content: "#";
color: #55C544;
}
@media (min-width: 768px) {
main article h1.is-style-scriptHashtag:before, main article h2.is-style-scriptHashtag:before, main article h3.is-style-scriptHashtag:before, main article h4.is-style-scriptHashtag:before, main article h5.is-style-scriptHashtag:before, main article h6.is-style-scriptHashtag:before, main article p.is-style-scriptHashtag:before, main article ul.is-style-scriptHashtag:before, main article ol.is-style-scriptHashtag:before {
font-size: 1.5em;
}
}
main article h1.has-fit-text, main article h2.has-fit-text, main article h3.has-fit-text, main article h4.has-fit-text, main article h5.has-fit-text, main article h6.has-fit-text, main article p.has-fit-text, main article ul.has-fit-text, main article ol.has-fit-text {
padding: 0;
margin: 0 0 30px 0; }
main article h1, main article .h1, main article .is-style-h1 {
font-weight: 800;
font-size: 4em;
line-height: 1.1;
}
main article h1 i, main article .h1 i, main article .is-style-h1 i {
font-weight: 400;
font-style: normal;
font-family: "Scarletty";
transform: rotate(-10deg);
position: relative;
display: inline-block;
-webkit-text-stroke: 10px #ffffff;
paint-order: stroke fill;
top: -10px;
font-size: 150%;
}
main article h1.smaller, main article .h1.smaller, main article .is-style-h1.smaller {
font-size: 2.5em;
padding-top: 1em !important;
color: rgba(1, 13, 6, 0.7);
}
main article h1.smaller i, main article .h1.smaller i, main article .is-style-h1.smaller i {
color: #010D06;
}
@media (min-width: 768px) {
main article h1, main article .h1, main article .is-style-h1 {
font-size: 4.5em;
}
}
@media (min-width: 1281px) {
main article h1, main article .h1, main article .is-style-h1 {
font-size: 5em;
}
main article h1.smaller, main article .h1.smaller, main article .is-style-h1.smaller {
font-size: 3em;
}
main article h1.smaller i, main article .h1.smaller i, main article .is-style-h1.smaller i {
top: -20px;
}
}
@media (min-width: 1366px) {
main article h1, main article .h1, main article .is-style-h1 {
font-size: 4.5em;
}
main article h1.smaller, main article .h1.smaller, main article .is-style-h1.smaller {
font-size: 3em;
}
}
@media (min-width: 1600px) {
main article h1, main article .h1, main article .is-style-h1 {
font-size: 5em;
}
main article h1.smaller, main article .h1.smaller, main article .is-style-h1.smaller {
font-size: 4em;
}
main article h1.smaller i, main article .h1.smaller i, main article .is-style-h1.smaller i {
top: -40px;
}
}
@media (min-width: 1921px) {
main article h1, main article .h1, main article .is-style-h1 {
font-size: 6em;
}
main article h1.smaller, main article .h1.smaller, main article .is-style-h1.smaller {
font-size: 5em;
}
}
main article h1 sup + br {
display: none;
}
main article h2, main article .h2, main article .is-style-h2 {
font-weight: 800;
margin: 0;
font-size: 2em;
line-height: 1.1;
}
@media (min-width: 768px) {
main article h2, main article .h2, main article .is-style-h2 {
font-size: 2.3em;
}
}
@media (min-width: 768px) {
main article h2, main article .h2, main article .is-style-h2 {
font-size: 2.7em;
}
}
@media (min-width: 1366px) {
main article h2, main article .h2, main article .is-style-h2 {
font-size: 2.3em;
}
}
@media (min-width: 1600px) {
main article h2, main article .h2, main article .is-style-h2 {
font-size: 2.7em;
}
}
@media (min-width: 1921px) {
main article h2, main article .h2, main article .is-style-h2 {
font-size: 3.5em;
}
}
main article h2.is-style-scriptRotate, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-scriptRotate {
margin-top: -1em !important;
}
main article h2.is-style-script, main article h2.is-style-scriptRotate, main article .h2.is-style-script, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-script, main article .is-style-h2.is-style-scriptRotate {
font-size: 2.8em;
}
@media (min-width: 768px) {
main article h2.is-style-script, main article h2.is-style-scriptRotate, main article .h2.is-style-script, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-script, main article .is-style-h2.is-style-scriptRotate {
font-size: 3.3em;
}
}
@media (min-width: 768px) {
main article h2.is-style-script, main article h2.is-style-scriptRotate, main article .h2.is-style-script, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-script, main article .is-style-h2.is-style-scriptRotate {
font-size: 3.8em;
}
}
@media (min-width: 1366px) {
main article h2.is-style-script, main article h2.is-style-scriptRotate, main article .h2.is-style-script, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-script, main article .is-style-h2.is-style-scriptRotate {
font-size: 3.3em;
}
}
@media (min-width: 1600px) {
main article h2.is-style-script, main article h2.is-style-scriptRotate, main article .h2.is-style-script, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-script, main article .is-style-h2.is-style-scriptRotate {
font-size: 3.8em;
}
}
@media (min-width: 1921px) {
main article h2.is-style-script, main article h2.is-style-scriptRotate, main article .h2.is-style-script, main article .h2.is-style-scriptRotate, main article .is-style-h2.is-style-script, main article .is-style-h2.is-style-scriptRotate {
font-size: 4.5em;
}
}
main article h2.is-style-scriptHashtag, main article .h2.is-style-scriptHashtag, main article .is-style-h2.is-style-scriptHashtag {
font-size: 2em;
}
main article h2.is-style-scriptHashtag:before, main article .h2.is-style-scriptHashtag:before, main article .is-style-h2.is-style-scriptHashtag:before {
content: "#";
color: #55C544;
}
@media (min-width: 768px) {
main article h2.is-style-scriptHashtag, main article .h2.is-style-scriptHashtag, main article .is-style-h2.is-style-scriptHashtag {
font-size: 3em;
}
main article h2.is-style-scriptHashtag:before, main article .h2.is-style-scriptHashtag:before, main article .is-style-h2.is-style-scriptHashtag:before {
font-size: 1.5em;
}
}
main article .h2 {
font-weight: 700 !important;
}
@media (min-width: 768px) {
main article .h2 {
font-size: 3em;
}
}
@media (min-width: 1281px) {
main article .h2 {
font-size: 4em;
}
}
main article h3, main article .is-style-h3 {
font-weight: 700;
margin: 0;
font-size: 1.5em;
line-height: 1;
}
main article h3.is-style-scriptHashtag, main article .is-style-h3.is-style-scriptHashtag {
font-size: 2.5em;
}
@media (min-width: 768px) {
main article h3.is-style-scriptHashtag, main article .is-style-h3.is-style-scriptHashtag {
font-size: 3em;
}
}
main article h4 {
font-size: 1.2em;
margin: 0;
line-height: 1;
}
main article h5 {
font-size: 1em;
margin: 0;
line-height: 1;
}
main article h6 {
font-size: 0.9em;
margin: 0;
line-height: 1;
}
main article p + h1, main article p + h2, main article p + h3, main article p + h4, main article p + h5, main article p + h6, main article ol + h1, main article ol + h2, main article ol + h3, main article ol + h4, main article ol + h5, main article ol + h6, main article ul + h1, main article ul + h2, main article ul + h3, main article ul + h4, main article ul + h5, main article ul + h6, main article blockquote + h1, main article blockquote + h2, main article blockquote + h3, main article blockquote + h4, main article blockquote + h5, main article blockquote + h6, main article div + h1, main article div + h2, main article div + h3, main article div + h4, main article div + h5, main article div + h6 {
padding-top: 0.75em;
}
main article ul, main article ol {
margin-left: 2em !important;
}
main article ul li, main article ol li {
padding-bottom: 0.75em;
}
main article ul li:last-child, main article ol li:last-child {
padding-bottom: 0;
}
main article ul.is-style-list1, main article ol.is-style-list1 {
margin: 0 0 2em 0 !important;
padding: 0;
list-style: decimal-leading-zero;
list-style-position: inside;
}
main article ul.is-style-list1 li, main article ol.is-style-list1 li {
position: relative;
padding: 1em 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
main article ul.is-style-list1 li:before, main article ol.is-style-list1 li:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: #010D06;
}
main article ul.is-style-list1 li:last-child:after, main article ol.is-style-list1 li:last-child:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: #010D06;
}
main article ul.is-style-list1 li a, main article ol.is-style-list1 li a {
display: inline-block;
text-decoration: none;
width: 90%;
position: relative;
}
main article ul.is-style-list1 li a:after, main article ol.is-style-list1 li a:after {
content: "";
height: 1em;
width: 1em;
background-color: #010D06;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: absolute;
top: calc(50% - 0.5em);
right: 0;
}
main article ul.is-style-list1 li a:hover, main article ol.is-style-list1 li a:hover {
color: #55C544;
}
main article ul.is-style-list1 li a:hover:after, main article ol.is-style-list1 li a:hover:after {
background-color: #55C544;
transform: rotate(-45deg);
}
main article ol.is-style-list1 li {
counter-increment: step;
}
main article ol.is-style-list1 li::marker {
font-weight: 300;
}
main article p {
line-height: 150%; }
main article p + ul, main article p + ol {
margin-top: 1em !important;
margin-bottom: 1em !important;
}
main article a {
color: #010D06;
}
main article a:hover {
color: #55C544;
text-decoration: none;
}
main article blockquote {
padding: 0em 0 0 2em;
margin: 2em 0;
position: relative;
}
@media (min-width: 768px) {
main article blockquote {
font-size: 80%;
}
}
main article blockquote:before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 2px;
width: 10px;
background-color: #55C544;
}
main article blockquote p {
font-weight: 400;
font-style: italic;
}
main article blockquote p:last-child {
padding: 0;
}
@media (min-width: 768px) {
main article blockquote p {
font-size: 150%;
}
}
@media (min-width: 1600px) {
main article blockquote p {
font-size: 180%;
}
}
@media (min-width: 1024px) {
.sticky {
position: sticky;
top: 1em;
align-self: flex-start;
}
}
.wp-block-details {
border-bottom: 1px solid #010D06;
overflow: hidden;
padding: 0 0 1em 0;
margin: 0 0 1em 0;
}
.wp-block-details summary {
padding: 0;
background-color: #ffffff;
color: #010D06;
list-style: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
position: relative;
font-size: 1.2em;
font-weight: 500;
text-underline-offset: 0;
transition: text-underline-offset 0.2s;
cursor: pointer;
}
.wp-block-details summary h2, .wp-block-details summary h3 {
display: inline-block;
padding: 0;
margin: 0;
font-size: 1em;
}
.wp-block-details summary:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
border: 2px solid #55C544;
border-radius: 99999px;
transition: all 0.2s;
}
.wp-block-details summary:after {
content: "";
height: 1em;
width: 1em;
background-color: #010D06;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
}
.wp-block-details summary:hover {
text-decoration: underline;
text-decoration-color: #55C544;
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}
.wp-block-details summary:hover:after {
transform: rotate(90deg);
}
.wp-block-details .content {
overflow: hidden;
padding: 1em 0;
}
.wp-block-details[open] summary:after {
transform: rotate(90deg);
}
.wp-block-details[open] summary:hover:after {
transform: rotate(-90deg);
}
.wp-block-details:last-child {
border-bottom: none;
} @font-face {
font-family: "Scarletty";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Scarletty.woff) format("woff"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Scarletty.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff) format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff) format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff) format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff) format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Light.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-LightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-LightItalic.woff) format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Regular.woff) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Regular.woff) format("woff");
font-weight: normal;
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Italic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Italic.woff) format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Medium.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-MediumItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-MediumItalic.woff) format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBoldItalic.woff) format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Bold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Bold.woff) format("woff");
font-weight: bold;
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BoldItalic.woff) format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBold.woff) format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBoldItalic.woff) format("woff");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Black.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Black.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BlackItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BlackItalic.woff) format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Plex";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Plex-Regular.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Plex-Regular.woff) format("woff");
font-style: normal;
font-display: swap;
}
header {
position: absolute;
z-index: 5;
display: flex;
flex-direction: row;
justify-content: space-around;
width: calc(100vw - 4em);
align-items: center;
padding: 2em;
}
@media (min-width: 768px) {
header {
padding: 2em;
width: calc(100vw - 4.4em);
}
}
@media (min-width: 1366px) {
header {
padding: 2em;
font-size: 1.2em;
}
}
header .logo_bar {
display: flex;
flex-direction: row;
font-family: "Grift";
gap: 0.5em;
flex: 1;
}
header .logo_bar #logo a {
display: inline-block;
position: relative;
z-index: 2;
}
header .logo_bar #logo a:after {
content: "";
position: absolute;
left: -0.4em;
top: -0.2em;
right: -0.4em;
bottom: -0.2em;
background: transparent;
z-index: -1;
transition: transform 0.2s;
}
header .logo_bar #logo a svg {
width: auto;
height: 1em;
transition: transform 0.2s;
position: relative;
z-index: 1;
}
header .logo_bar #logo a svg .st1 {
fill: #55C544 !important;
}
@media (min-width: 768px) {
header .logo_bar #logo a svg {
height: 1.1em;
}
}
@media (min-width: 1366px) {
header .logo_bar #logo a svg {
height: 1.2em;
}
}
header .logo_bar #logo a:hover:after {
background: #010D06;
transform: scale(1.5) rotate(-5deg);
}
header .logo_bar #logo a:hover svg {
position: relative;
z-index: 1;
transform: scale(1.5) rotate(-5deg);
}
header .logo_bar #logo a:hover svg .st0 {
fill: #ffffff;
}
header .logo_bar .date {
text-transform: uppercase;
font-weight: 300;
opacity: 0.7;
}
@media (min-width: 1366px) {
header .logo_bar .date {
font-size: 0.84em;
margin-top: 0.3em;
}
}
header .logo_bar.active #logo a svg .st0 {
fill: #10312b !important;
}
header .logo_bar.active #logo a svg .st1 {
fill: #55C544 !important;
}
header .logo_bar.active #logo a:hover:after {
background-color: #010D06 !important;
}
header .logo_bar.active #logo a:hover svg .st0 {
fill: #ffffff !important;
}
header .logo_bar.active #logo a:hover svg .st1 {
fill: #ffffff !important;
}
header .logo_bar.active .date {
color: #010D06 !important;
}
@media (min-width: 1366px) {
header #menubutton_bar {
display: none;
}
}
header #menubutton_bar button {
outline: none;
border: none;
border: none;
background: transparent;
cursor: pointer;
font-size: 1em;
font-family: "Grift";
font-weight: 300;
color: #010D06;
position: relative;
padding: 0 2em 0 0;
text-transform: uppercase;
transition: all 0.2s;
}
@media (min-width: 768px) {
header #menubutton_bar button {
font-size: 1em;
padding: 0 2em 0 0;
}
}
header #menubutton_bar button span.title {
position: relative;
padding-right: 0.5em;
}
@media (min-width: 768px) {
header #menubutton_bar button span.title {
padding-right: 0.55em;
}
}
header #menubutton_bar button span.title:after {
content: "";
position: absolute;
width: 1px;
top: 0;
bottom: 0;
right: 0;
background-color: #010D06;
}
@media (min-width: 768px) {
header #menubutton_bar button span.title:after {
width: 1px;
}
}
header #menubutton_bar button span.line {
width: 1em;
display: inline-block;
position: absolute;
right: 0;
top: 5%;
bottom: 0;
width: 1.5em;
height: 1em;
}
@media (min-width: 768px) {
header #menubutton_bar button span.line {
width: 1.65em;
height: 1.1em;
}
}
header #menubutton_bar button span.line::before, header #menubutton_bar button span.line::after {
content: "";
display: block;
width: 1.5em;
height: 1px;
background-color: #010D06;
position: absolute;
left: 0;
top: 50%;
margin-top: 0;
transition: all 0.2s;
}
@media (min-width: 768px) {
header #menubutton_bar button span.line::before, header #menubutton_bar button span.line::after {
width: 1.65em;
height: 1px;
}
}
header #menubutton_bar button span.line::before {
margin-top: -8%;
}
header #menubutton_bar button span.line::after {
width: 1em;
margin-top: 8%;
}
header #menubutton_bar button.active {
color: #010D06 !important;
}
header #menubutton_bar button.active span.title:after {
background-color: #010D06 !important;
}
header #menubutton_bar button.active span.line:before, header #menubutton_bar button.active span.line:after {
right: 0;
margin-top: 0;
background-color: #010D06 !important;
}
header #menubutton_bar button.active span.line:before {
width: 30px;
transform-origin: center center;
transform: rotate(45deg);
}
header #menubutton_bar button.active span.line:after {
width: 30px;
transform-origin: center center;
transform: rotate(-45deg);
}
header #menu-wrapper {
display: none;
}
header #menu-wrapper {
display: block;
position: fixed;
z-index: -1;
top: 0;
right: -101vw;
bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background-color: #ffffff;
transition: all 0.2s;
overflow-y: auto;
}
header #menu-wrapper.active {
right: 0;
}
@media (min-width: 1366px) {
header #menu-wrapper {
right: 0;
position: relative;
width: auto;
height: auto;
background-color: transparent;
}
}
header #menu-wrapper nav {
padding-top: 12em;
padding-bottom: 2em;
}
@media (min-width: 768px) {
header #menu-wrapper nav {
padding-top: 0;
}
}
@media (min-width: 1366px) {
header #menu-wrapper nav {
padding: 0;
overflow: hidden;
}
}
header #menu-wrapper nav ul {
display: flex;
flex-direction: column;
text-align: center;
gap: 1em;
padding: 0;
margin: 0;
list-style-type: none;
}
@media (min-width: 768px) {
header #menu-wrapper nav ul {
padding-top: 10em;
}
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul {
flex-direction: row;
gap: 0.5em;
align-items: center;
padding: 0 0 0 0;
}
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul li {
padding: 0 0.5em;
}
}
header #menu-wrapper nav ul li a {
color: #010D06;
font-weight: 900;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.05em;
font-size: 2em;
position: relative;
font-family: "Grift";
cursor: pointer;
}
@media (min-width: 768px) {
header #menu-wrapper nav ul li a {
font-size: 2em;
}
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul li a {
color: #010D06;
font-weight: 400;
font-size: 0.77em;
letter-spacing: 0.15em;
font-family: "Plex";
padding: 0;
}
header #menu-wrapper nav ul li a:hover {
color: #010D06;
}
}
header #menu-wrapper nav ul li:not(.projektstart) a:after {
content: "";
right: -0.5em;
bottom: calc(50% - 3px);
height: 6px;
width: 0;
background-color: #55C544;
position: absolute;
transition: all 0.2s;
opacity: 0.5;
}
header #menu-wrapper nav ul li:not(.projektstart) a:hover:after {
left: -0.5em;
width: calc(100% + 1em);
}
header #menu-wrapper nav ul li.current-menu-item > a, header #menu-wrapper nav ul li.current_page_parent > a, header #menu-wrapper nav ul li.current-page-ancestor > a {
position: relative;
}
header #menu-wrapper nav ul li.current-menu-item > a:before, header #menu-wrapper nav ul li.current_page_parent > a:before, header #menu-wrapper nav ul li.current-page-ancestor > a:before {
content: "";
position: absolute;
height: 6px;
background-color: #55C544;
top: calc(50% - 3px);
left: -0.5em;
right: -0.5em;
opacity: 0.8;
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul li.current-menu-item > a:after, header #menu-wrapper nav ul li.current_page_parent > a:after, header #menu-wrapper nav ul li.current-page-ancestor > a:after {
display: none;
}
}
header #menu-wrapper nav ul li.projektstart a {
font-family: "Scarletty";
text-transform: none;
font-size: 2.5em;
font-weight: 400;
letter-spacing: 0;
position: relative;
padding-right: 1.5em;
transition: all 0.2s;
}
header #menu-wrapper nav ul li.projektstart a:after {
content: "+";
position: absolute;
display: block;
width: 0.75em;
height: 0.75em;
background-color: #55C544;
border-radius: 50%;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
top: calc(50% - 0.4em);
right: 0;
font-size: 1.5em;
transition: all 0.2s;
opacity: 1;
}
header #menu-wrapper nav ul li.projektstart a:before {
content: "";
position: absolute;
display: block;
width: 0.75em;
height: 0.75em;
background-color: #55C544;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
top: calc(50% - 0.4em);
right: 0;
left: auto;
font-size: 1.5em;
transition: all 0.2s;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/heart-mask.svg);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/heart-mask.svg);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
transition: all 0.2s;
opacity: 0;
}
header #menu-wrapper nav ul li.projektstart a:hover:after {
content: "";
border-radius: 0;
opacity: 0;
}
header #menu-wrapper nav ul li.projektstart a:hover:before {
opacity: 1;
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul li.projektstart a {
font-size: 1.2em;
padding: 0 1.5em 0 0;
}
}
header #menu-wrapper nav ul ul.sub-menu {
position: fixed;
background-color: #ffffff;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
right: -101vw;
transition: right 0.2s;
z-index: 1;
padding: 0;
margin: 0;
}
header #menu-wrapper nav ul ul.sub-menu.active {
right: 0;
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul ul.sub-menu {
z-index: -1;
flex-direction: row;
gap: 1.5em;
}
}
@media (min-width: 1850px) {
header #menu-wrapper nav ul ul.sub-menu {
gap: 2em;
}
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul ul.sub-menu li.submenu-close {
position: absolute;
margin-top: -8em;
}
}
header #menu-wrapper nav ul ul.sub-menu li.submenu-close button {
background: transparent;
padding: 0;
margin: 0;
border: none;
outline: none;
cursor: pointer;
font-size: 1em;
font-weight: 500;
color: #010D06;
background-color: transparent;
border-radius: 0;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
letter-spacing: 0.1em;
transition: all 0.2s;
text-transform: uppercase;
border-radius: 99999px;
border: 2px solid rgba(1, 13, 6, 0.4);
}
header #menu-wrapper nav ul ul.sub-menu li.submenu-close button:before {
content: "";
height: 1em;
width: 1em;
background-color: #010D06;
display: inline-block;
margin-right: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
transform: rotate(180deg);
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul ul.sub-menu li.submenu-close button:before {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/close.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/close.svg);
transform: rotate(0deg);
}
}
header #menu-wrapper nav ul ul.sub-menu li.submenu-close button:hover {
background-color: #010D06;
color: #55C544;
border-color: #010D06;
}
header #menu-wrapper nav ul ul.sub-menu li.submenu-close button:hover:before {
transform: rotate(225deg);
color: #55C544;
background-color: #55C544;
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul ul.sub-menu li.submenu-close button:hover:before {
transform: rotate(360deg);
}
}
@media (min-width: 1366px) {
header #menu-wrapper nav ul ul.sub-menu li a {
font-family: "Grift";
font-size: 1.7em;
font-weight: 900;
}
header #menu-wrapper nav ul ul.sub-menu li a:before, header #menu-wrapper nav ul ul.sub-menu li a:after {
height: 10px;
top: calc(50% - 5px);
left: -0.25em;
right: -0.25em;
}
header #menu-wrapper nav ul ul.sub-menu li a:hover:after {
width: calc(100% + 1em);
}
}
@media (min-width: 1600px) {
header #menu-wrapper nav ul ul.sub-menu li a {
font-size: 2em;
}
}
@media (min-width: 1850px) {
header #menu-wrapper nav ul ul.sub-menu li a {
font-size: 2.6em;
}
}
header.dark .logo_bar #logo a svg .st0 {
fill: #ffffff;
}
header.dark .logo_bar #logo a svg .st1 {
fill: #ffffff;
}
header.dark .logo_bar #logo a:hover:after {
background-color: #ffffff;
}
header.dark .logo_bar #logo a:hover svg .st0 {
fill: #10312b;
}
header.dark .logo_bar #logo a:hover svg .st1 {
fill: #61cc95;
}
header.dark .logo_bar .date {
color: #ffffff;
}
header.dark #menubutton_bar button {
color: #ffffff;
}
header.dark #menubutton_bar button span.title:after {
background-color: #ffffff;
}
header.dark #menubutton_bar button span.line:before, header.dark #menubutton_bar button span.line:after {
background-color: #ffffff;
}
@media (min-width: 1366px) {
header.dark #menu-wrapper nav ul li a {
color: #ffffff;
}
header.dark #menu-wrapper nav ul li a:after {
background-color: #55C544;
}
header.dark #menu-wrapper nav ul li a:hover {
color: #ffffff;
}
}
header.dark #menu-wrapper nav ul li.projektstart a {
font-weight: 400;
}
header.dark #menu-wrapper nav ul li.projektstart a:after {
color: #010D06;
background-color: #55C544;
}
@media (min-width: 1366px) {
header.dark #menu-wrapper nav ul li.current-menu-item a, header.dark #menu-wrapper nav ul li.current_page_parent a, header.dark #menu-wrapper nav ul li.current-page-ancestor a {
color: #ffffff;
}
}
@media (min-width: 1366px) {
header.dark #menu-wrapper ul.main-nav li.menu-item-has-children ul.sub-menu {
background-color: #010D06;
background: linear-gradient(135deg, rgb(4, 37, 18) 0%, rgb(2, 18, 0) 97%);
}
}
@media (min-width: 1366px) {
header.dark #menu-wrapper ul.main-nav li.menu-item-has-children ul.sub-menu li.submenu-close button {
color: #ffffff;
border-color: #ffffff;
}
header.dark #menu-wrapper ul.main-nav li.menu-item-has-children ul.sub-menu li.submenu-close button:before {
background-color: #ffffff;
}
header.dark #menu-wrapper ul.main-nav li.menu-item-has-children ul.sub-menu li.submenu-close button:hover {
border-color: #55C544;
color: #55C544;
}
header.dark #menu-wrapper ul.main-nav li.menu-item-has-children ul.sub-menu li.submenu-close button:hover:before {
background-color: #55C544;
}
}
@media (max-width: 1023px) and (orientation: portrait) {
#callblock {
position: sticky;
bottom: 1em;
z-index: 1;
background-color: #ffffff;
border-radius: 99999px;
box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.3);
padding: 0.666667em 1.333333em;
display: flex;
margin: 0 auto 1em auto;
width: fit-content;
}
#callblock ul {
display: flex;
width: fit-content;
flex-direction: row;
list-style: none;
padding: 0;
margin: 0;
gap: 1.333333em;
}
#callblock ul li a, #callblock ul li button {
padding: 0;
margin: 0;
cursor: pointer;
border: none;
background-color: transparent;
}
#callblock ul li a svg, #callblock ul li button svg {
height: 24px;
width: auto;
}
}
@media (min-width: 1024px) {
#callblock {
display: none !important;
}
}
footer {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
transition: opacity 0.2s;
}
@media (min-width: 1281px) {
footer {
font-size: 0.9em;
}
}
@media (min-width: 1281px) {
footer {
font-size: 1em;
}
}
footer.noscroll {
opacity: 0;
}
footer #footer-wrapper {
background-color: rgba(222, 242, 206, 0.4);
font-family: "Plex";
text-transform: uppercase;
width: calc(100vw - 4em);
padding: 2em;
}
@media (min-width: 768px) {
footer #footer-wrapper {
padding: 4.4em 2.2em;
width: calc(100vw - 4.4em);
}
}
@media (min-width: 1281px) {
footer #footer-wrapper {
padding: 4.4em 2.2em;
}
}
@media (min-width: 1366px) {
footer #footer-wrapper {
padding: 4.4em 0;
width: 100vw;
}
}
footer #footer-wrapper ul {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style-type: none;
gap: 4px;
}
@media (min-width: 1600px) {
footer #footer-wrapper ul li {
margin-bottom: 0.25em;
}
}
footer #footer-wrapper a {
color: #010D06;
display: inline-block;
position: relative;
padding-bottom: 5px;
text-decoration: none;
}
footer #footer-wrapper a:after {
content: "";
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(1, 13, 6, 0.4);
left: 0;
bottom: 0;
transition: all 0.2s;
}
footer #footer-wrapper a:hover:after {
bottom: -5px;
background-color: #55C544;
height: 6px;
}
footer #footer-wrapper .inner {
display: flex;
flex-direction: column;
gap: 2em;
}
@media (min-width: 768px) {
footer #footer-wrapper .inner {
flex-direction: row;
gap: 4em;
}
}
@media (min-width: 1281px) {
footer #footer-wrapper .inner {
width: 70vw;
margin: 0 auto;
}
}
@media (min-width: 1281px) {
footer #footer-wrapper .inner .footer-contact {
width: 50%;
}
}
footer #footer-wrapper .inner .footer-contact address {
font-style: normal;
display: flex;
flex-direction: column;
gap: 2em;
}
@media (min-width: 768px) {
footer #footer-wrapper .inner .footer-contact address {
flex-direction: row;
gap: 4em;
}
}
@media (min-width: 1281px) {
footer #footer-wrapper .inner .footer-contact address {
gap: 4em;
}
}
@media (min-width: 1600px) {
footer #footer-wrapper .inner .footer-contact address {
gap: 8em;
}
}
@media (min-width: 768px) {
footer #footer-wrapper .inner .footer-social {
width: calc(50% - 2em);
}
footer #footer-wrapper .inner .footer-social ul {
flex-direction: row;
gap: 1em;
flex-wrap: wrap;
}
}
@media (min-width: 1281px) {
footer #footer-wrapper .inner .footer-social {
width: 50%;
}
footer #footer-wrapper .inner .footer-social ul {
gap: 1.2em;
justify-content: right;
}
}
@media (min-width: 1600px) {
footer #footer-wrapper .inner .footer-social ul {
gap: 2em;
}
}
footer #footer-wrapper .inner .footer-social .claim {
padding: 0 0 1em 0;
}
@media (min-width: 768px) {
footer #footer-wrapper .inner .footer-social .claim {
text-align: right;
}
}
footer #footer-wrapper .inner .footer-social .claim img {
transform-origin: center left;
transform: rotate(-5deg);
max-width: 400px;
width: 100%;
height: auto;
}
footer #disclaimer {
background-color: #010D06;
color: #ffffff;
font-family: "Plex";
text-transform: uppercase;
align-items: center;
padding: 2em;
}
footer #disclaimer div {
color: #ffffff;
}
@media (min-width: 768px) {
footer #disclaimer {
padding: 4.4em 2.2em;
}
}
@media (min-width: 1281px) {
footer #disclaimer {
padding: 3.3em 2.2em;
}
}
@media (min-width: 1366px) {
footer #disclaimer {
font-size: 0.85em;
}
}
@media (min-width: 1281px) {
footer #disclaimer .inner {
width: 70vw;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
@media (min-width: 1281px) {
footer #disclaimer .inner .copyright p {
padding: 0;
margin: 0;
}
}
footer #disclaimer .inner #footer-menu {
padding-top: 1em;
}
@media (min-width: 1281px) {
footer #disclaimer .inner #footer-menu {
padding-top: 0;
}
}
footer #disclaimer .inner #footer-menu ul {
display: flex;
flex-direction: row;
gap: 1em;
padding: 0;
margin: 0;
list-style-type: none;
}
@media (min-width: 1366px) {
footer #disclaimer .inner #footer-menu ul {
flex-direction: row;
gap: 2em;
align-items: center;
}
}
footer #disclaimer .inner #footer-menu ul li a {
color: #ffffff;
transition: all 0.2s;
}
footer #disclaimer .inner #footer-menu ul li a:hover {
text-decoration: none;
color: #55C544;
}
.home-container {
display: flex;
flex-direction: column;
gap: 3em;
}
@media (min-width: 768px) {
.home-container {
gap: 1em;
}
}
@media (min-width: 1024px) {
.home-container {
flex-direction: row;
gap: 3em;
}
}
@media (min-width: 1281px) {
.home-container {
padding-top: 3em;
gap: 8em;
}
}
.home-container .home-pagination {
display: block;
text-align: center;
margin-bottom: 1.5em;
}
@media (min-width: 768px) {
.home-container .home-pagination {
margin-bottom: 2.5em;
}
}
@media (min-width: 1024px) {
.home-container .home-pagination.invisible {
display: none;
}
}
.home-container .home-pagination .items {
margin-top: 1em;
}
.home-container .home-pagination .items a {
color: #ffffff;
background-color: #010D06;
border-radius: 99999px;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
font-weight: 700;
letter-spacing: 0.1em;
transition: all 0.2s;
text-transform: uppercase;
position: relative;
transition: all 0.2s;
border: 2px solid #010D06;
display: inline-block;
margin: 0 0.5em;
}
.home-container .home-pagination .items a:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
border: 2px solid #55C544;
border-radius: 99999px;
transition: all 0.2s;
}
.home-container .home-pagination .items a:after {
content: "";
height: 1em;
width: 1em;
background-color: #ffffff;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
}
.home-container .home-pagination .items a:hover {
background-color: #010D06;
color: #55C544;
}
.home-container .home-pagination .items a:hover:before {
left: -0.5em;
top: -0.5em;
right: -0.5em;
bottom: -0.5em;
opacity: 1;
}
.home-container .home-pagination .items a:hover:after {
transform: rotate(-45deg);
color: #55C544;
}
.home-container .home-pagination .items a:nth-child(1) {
text-indent: -99999px;
position: relative;
border: 2px solid rgba(1, 13, 6, 0.4);
background-color: transparent;
}
.home-container .home-pagination .items a:nth-child(1):after {
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 1em);
transform: rotate(180deg);
background-color: #010D06;
}
.home-container .home-pagination .items a:nth-child(1):hover {
background-color: #010D06;
border: 2px solid #010D06;
}
.home-container .home-pagination .items a:nth-child(1):hover:after {
transform: rotate(215deg);
background-color: #55C544;
}
.home-container .home-pagination .items a:nth-child(2):after {
display: none;
}
.home-container .home-pagination .items a:nth-child(3) {
text-indent: -99999px;
position: relative;
border: 2px solid rgba(1, 13, 6, 0.4);
background-color: transparent;
}
.home-container .home-pagination .items a:nth-child(3):after {
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 1em);
background-color: #010D06;
}
.home-container .home-pagination .items a:nth-child(3):hover {
background-color: #010D06;
border: 2px solid #010D06;
}
.home-container .home-pagination .items a:nth-child(3):hover:after {
background-color: #55C544;
}
.home-container .home-pagination .items.last a:nth-child(3) {
border-color: #ddd;
background-color: #ddd;
cursor: default;
pointer-events: none;
}
.home-container .home-pagination .items.last a:nth-child(3):after {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/close.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/close.svg);
opacity: 0.7;
}
.home-container .home-pagination .items.last a:nth-child(3):before {
display: none;
}
.home-container .home-pagination .items.last a:nth-child(3):hover:after {
transform: rotate(0deg);
background-color: #010D06;
}
.home-container .home-pagination .items.first a {
color: #ffffff;
background-color: #010D06;
border-radius: 99999px;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
font-weight: 700;
letter-spacing: 0.1em;
transition: all 0.2s;
text-transform: uppercase;
position: relative;
transition: all 0.2s;
border: 2px solid #010D06;
display: inline-block;
margin: 0 0.5em;
text-indent: 0;
}
.home-container .home-pagination .items.first a:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
border: 2px solid #55C544;
border-radius: 99999px;
transition: all 0.2s;
}
.home-container .home-pagination .items.first a:after {
content: "";
height: 1em;
width: 1em;
background-color: #ffffff;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
position: relative;
top: auto;
left: auto;
transform: rotate(0deg);
}
.home-container .home-pagination .items.first a:hover {
background-color: #010D06;
color: #55C544;
}
.home-container .home-pagination .items.first a:hover:before {
left: -0.5em;
top: -0.5em;
right: -0.5em;
bottom: -0.5em;
opacity: 1;
}
.home-container .home-pagination .items.first a:hover:after {
transform: rotate(-45deg);
color: #55C544;
}
.home-container .home {
display: block;
padding: 0 0 0 0;
}
@media (min-width: 1024px) {
.home-container .home {
flex: 3;
}
}
.home-container .home .home-item {
display: block;
padding: 3em 0 1.5em 0;
border-top: 2px solid #ccc;
margin: 1.5em 0;
}
.home-container .home .home-item:first-child {
border-top: none;
padding: 0 0 1.5em 0;
}
@media (min-width: 768px) {
.home-container .home .home-item:first-child {
border-top: 2px solid #ccc;
}
}
@media (min-width: 1024px) {
.home-container .home .home-item:first-child {
padding: 0 0 1.5em 0;
border-top: none;
}
}
.home-container .home .home-item .date {
display: block;
font-size: 90%;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
padding-bottom: 0.4em;
}
.home-container .home .home-item .title a {
position: relative;
color: #010D06;
text-decoration: none;
font-weight: 800;
font-size: 1.8em;
display: block;
padding-right: 35px;
transition: all 0.2s;
}
@media (min-width: 768px) {
.home-container .home .home-item .title a {
font-size: 1.87em;
padding-right: 50px;
}
}
@media (min-width: 1024px) {
.home-container .home .home-item .title a {
font-size: 2.04em;
}
}
@media (min-width: 1281px) {
.home-container .home .home-item .title a {
font-size: 2.04em;
}
}
.home-container .home .home-item .title a i {
font-style: normal;
border-bottom: 4px solid transparent;
padding-bottom: 0;
display: inline;
transition: all 0.2s;
position: relative;
}
.home-container .home .home-item .title a svg {
width: 24px;
height: 24px;
position: absolute;
right: 0;
top: 0.1em;
transition: all 0.2s;
}
@media (min-width: 768px) {
.home-container .home .home-item .title a svg {
top: 0.1em;
width: 40px;
height: 40px;
}
}
@media (min-width: 1366px) {
.home-container .home .home-item .title a svg {
top: 0.15em;
}
}
.home-container .home .home-item .title a:hover {
color: #010D06;
}
.home-container .home .home-item .title a:hover svg {
fill: #55C544;
transform: rotate(-45deg);
}
.home-container .home .home-item .title a:hover i {
border-bottom: 4px solid #55C544;
}
.home-container .home .home-item .excerpt {
padding-top: 0.5em;
font-weight: 600;
}
.home-container .home .home-item .excerpt p {
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
.home-container .home .home-item .excerpt {
font-weight: 600;
padding-top: 0.25em;
}
}
.home-container .home-content {
position: relative;
}
@media (min-width: 1024px) {
.home-container .home-content {
flex: 4;
padding-top: 3em;
}
}
@media (min-width: 1281px) {
.home-container .home-content {
padding-top: 3em;
}
}
.home-container .home-content h1 {
padding: 0 0 0.5em 0;
margin: 0;
position: relative;
z-index: 1;
}
.home-container .home-content p {
font-weight: 600;
position: relative;
z-index: 1;
}
.home-container .home-content .gossip {
display: block;
padding: 1em 0 0 0;
transform: rotate(-5deg);
text-align: center;
}
.home-container .home-content .gossip img {
max-width: 300px;
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.home-container .home-content .gossip {
position: absolute;
top: 0;
right: 0;
transform: rotate(8deg);
z-index: 0;
}
}
@media (min-width: 1024px) {
.home-container .home-content .gossip {
top: -3em;
}
}
@media (min-width: 1281px) {
.home-container .home-content .gossip {
right: -4em;
transform: rotate(10deg);
}
.home-container .home-content .gossip img {
max-width: 400px;
}
}
.single-blog {
display: flex;
flex-direction: column;
width: 100%;
gap: 3em;
}
@media (min-width: 1024px) {
.single-blog {
flex-direction: row;
gap: 4em;
align-items: flex-start;
}
}
.single-blog .blog-elements {
position: relative;
}
@media (min-width: 1024px) {
.single-blog .blog-elements {
flex: 0 0 auto; position: sticky;
top: 0;
align-self: flex-start;
}
}
.single-blog .blog-elements .back2news a, .single-blog .blog-elements .post-navigation a {  }
.single-blog .blog-elements .back2news a:hover, .single-blog .blog-elements .post-navigation a:hover { }
.single-blog .blog-elements .back2news .next-post a, .single-blog .blog-elements .post-navigation .next-post a {
padding-right: 2.5em;
position: relative;
}
.single-blog .blog-elements .back2news .next-post a:before, .single-blog .blog-elements .post-navigation .next-post a:before {
content: "";
position: absolute;
width: 1em;
height: 1em;
right: 1em;
top: calc(50% - 0.5em);
background-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
background-repeat: no-repeat;
background-size: 1em;
background-position: center;
opacity: 0.6;
transition: all 0.2s;
}
.single-blog .blog-elements .back2news .next-post a:hover:before, .single-blog .blog-elements .post-navigation .next-post a:hover:before {
right: 0.75em;
opacity: 1;
}
.single-blog .blog-elements .back2news .prev-post a, .single-blog .blog-elements .post-navigation .prev-post a {
padding-left: 2.5em;
}
.single-blog .blog-elements .back2news .prev-post a:before, .single-blog .blog-elements .post-navigation .prev-post a:before {
content: "";
position: absolute;
width: 1em;
height: 1em;
left: 1em;
top: calc(50% - 0.5em);
background-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow-back.svg);
background-repeat: no-repeat;
background-size: 1em;
background-position: center;
opacity: 0.6;
transition: all 0.2s;
}
.single-blog .blog-elements .back2news .prev-post a:hover:before, .single-blog .blog-elements .post-navigation .prev-post a:hover:before {
left: 0.75em;
opacity: 1;
}
@media (min-width: 1024px) {
.single-blog .blog-elements .gossip {
padding-bottom: 2em;
margin-top: 1em;
}
}
.single-blog .blog-elements .gossip img {
width: 40%;
position: absolute;
top: 0;
right: 0;
transform: rotate(20deg);
z-index: 1;
}
@media (min-width: 1024px) {
.single-blog .blog-elements .gossip img {
width: 100%;
max-width: 200px;
position: relative;
top: auto;
right: auto;
transform: rotate(-10deg);
z-index: 1;
}
}
.single-blog .blog-content {
padding-bottom: 2em;
}
@media (min-width: 1024px) {
.single-blog .blog-content {
flex: 3;
}
}
.single-blog .blog-content .date {
display: block;
font-size: 0.9em;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
padding-bottom: 0.4em;
}
.single-blog .blog-content h1 {
margin: 0;
padding-bottom: 0.5em;
}
.page-contact .the_content p {
font-weight: 700;
}
#nf-form-2-cont form .nf-before-form-content,
#nf-form-3-cont form .nf-before-form-content,
#nf-form-4-cont form .nf-before-form-content,
#nf-form-6-cont form .nf-before-form-content,
#nf-form-7-cont form .nf-before-form-content {
padding-bottom: 2em;
font-weight: 300;
}
#nf-form-2-cont form .nf-form-content nf-fields-wrap,
#nf-form-3-cont form .nf-form-content nf-fields-wrap,
#nf-form-4-cont form .nf-form-content nf-fields-wrap,
#nf-form-6-cont form .nf-form-content nf-fields-wrap,
#nf-form-7-cont form .nf-form-content nf-fields-wrap {
display: flex;
flex-direction: column;
gap: 1em 2em;
}
@media (min-width: 768px) {
#nf-form-2-cont form .nf-form-content nf-fields-wrap,
#nf-form-3-cont form .nf-form-content nf-fields-wrap,
#nf-form-4-cont form .nf-form-content nf-fields-wrap,
#nf-form-6-cont form .nf-form-content nf-fields-wrap,
#nf-form-7-cont form .nf-form-content nf-fields-wrap {
flex-direction: row;
flex-wrap: wrap;
gap: 1em 2em;
}
}
#nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field,
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field,
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field,
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field,
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field {
width: 100%;
}
@media (min-width: 768px) {
#nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1), #nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2), #nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3), #nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4), #nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5), #nf-form-2-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5),
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5),
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6) {
width: calc(50% - 1em);
}
}
#nf-form-2-cont form .nf-form-content .nf-field-label label,
#nf-form-3-cont form .nf-form-content .nf-field-label label,
#nf-form-4-cont form .nf-form-content .nf-field-label label,
#nf-form-6-cont form .nf-form-content .nf-field-label label,
#nf-form-7-cont form .nf-form-content .nf-field-label label {
font-weight: 600;
}
#nf-form-2-cont form .nf-form-content input, #nf-form-2-cont form .nf-form-content textarea, #nf-form-2-cont form .nf-form-content select,
#nf-form-3-cont form .nf-form-content input,
#nf-form-3-cont form .nf-form-content textarea,
#nf-form-3-cont form .nf-form-content select,
#nf-form-4-cont form .nf-form-content input,
#nf-form-4-cont form .nf-form-content textarea,
#nf-form-4-cont form .nf-form-content select,
#nf-form-6-cont form .nf-form-content input,
#nf-form-6-cont form .nf-form-content textarea,
#nf-form-6-cont form .nf-form-content select,
#nf-form-7-cont form .nf-form-content input,
#nf-form-7-cont form .nf-form-content textarea,
#nf-form-7-cont form .nf-form-content select {
font-size: 1em;
font-family: "Grift";
font-weight: 300;
padding: 0;
border: none;
color: #010D06;
background-color: #ffffff;
border-radius: none;
}
#nf-form-2-cont form .nf-form-content input::placeholder, #nf-form-2-cont form .nf-form-content textarea::placeholder, #nf-form-2-cont form .nf-form-content select::placeholder,
#nf-form-3-cont form .nf-form-content input::placeholder,
#nf-form-3-cont form .nf-form-content textarea::placeholder,
#nf-form-3-cont form .nf-form-content select::placeholder,
#nf-form-4-cont form .nf-form-content input::placeholder,
#nf-form-4-cont form .nf-form-content textarea::placeholder,
#nf-form-4-cont form .nf-form-content select::placeholder,
#nf-form-6-cont form .nf-form-content input::placeholder,
#nf-form-6-cont form .nf-form-content textarea::placeholder,
#nf-form-6-cont form .nf-form-content select::placeholder,
#nf-form-7-cont form .nf-form-content input::placeholder,
#nf-form-7-cont form .nf-form-content textarea::placeholder,
#nf-form-7-cont form .nf-form-content select::placeholder {
font-size: 60%;
}
#nf-form-2-cont form .nf-form-content input,
#nf-form-3-cont form .nf-form-content input,
#nf-form-4-cont form .nf-form-content input,
#nf-form-6-cont form .nf-form-content input,
#nf-form-7-cont form .nf-form-content input {
border-bottom: 2px solid #010D06;
padding: 0 0 4px 0;
}
#nf-form-2-cont form .nf-form-content select,
#nf-form-3-cont form .nf-form-content select,
#nf-form-4-cont form .nf-form-content select,
#nf-form-6-cont form .nf-form-content select,
#nf-form-7-cont form .nf-form-content select {
border: 2px solid #010D06;
padding: 8px 12px;
}
#nf-form-2-cont form .nf-form-content textarea,
#nf-form-3-cont form .nf-form-content textarea,
#nf-form-4-cont form .nf-form-content textarea,
#nf-form-6-cont form .nf-form-content textarea,
#nf-form-7-cont form .nf-form-content textarea {
border: 2px solid #010D06;
padding: 8px 12px;
font-size: 100%;
}
#nf-form-2-cont form .nf-form-content .list-checkbox-wrap ul,
#nf-form-3-cont form .nf-form-content .list-checkbox-wrap ul,
#nf-form-4-cont form .nf-form-content .list-checkbox-wrap ul,
#nf-form-6-cont form .nf-form-content .list-checkbox-wrap ul,
#nf-form-7-cont form .nf-form-content .list-checkbox-wrap ul {
display: flex;
flex-direction: row;
gap: 0.5em 1em;
flex-wrap: wrap;
padding-top: 1em !important;
}
#nf-form-2-cont form .nf-form-content .list-checkbox-wrap ul li input,
#nf-form-3-cont form .nf-form-content .list-checkbox-wrap ul li input,
#nf-form-4-cont form .nf-form-content .list-checkbox-wrap ul li input,
#nf-form-6-cont form .nf-form-content .list-checkbox-wrap ul li input,
#nf-form-7-cont form .nf-form-content .list-checkbox-wrap ul li input {
display: none !important;
}
#nf-form-2-cont form .nf-form-content .list-checkbox-wrap ul li label,
#nf-form-3-cont form .nf-form-content .list-checkbox-wrap ul li label,
#nf-form-4-cont form .nf-form-content .list-checkbox-wrap ul li label,
#nf-form-6-cont form .nf-form-content .list-checkbox-wrap ul li label,
#nf-form-7-cont form .nf-form-content .list-checkbox-wrap ul li label {
margin: 0;
cursor: pointer;
color: #010D06;
background-color: transparent;
border-radius: 99999px;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
letter-spacing: 0.1em;
transition: border-color 0.2s;
text-transform: uppercase;
position: relative;
border: 2px solid #55C544;
display: inline-block;
font-size: 1em;
-webkit-user-select: none; user-select: none;
}
#nf-form-2-cont form .nf-form-content .list-checkbox-wrap ul li label:hover,
#nf-form-3-cont form .nf-form-content .list-checkbox-wrap ul li label:hover,
#nf-form-4-cont form .nf-form-content .list-checkbox-wrap ul li label:hover,
#nf-form-6-cont form .nf-form-content .list-checkbox-wrap ul li label:hover,
#nf-form-7-cont form .nf-form-content .list-checkbox-wrap ul li label:hover {
border-color: #010D06;
}
#nf-form-2-cont form .nf-form-content .list-checkbox-wrap ul li label.nf-checked-label,
#nf-form-3-cont form .nf-form-content .list-checkbox-wrap ul li label.nf-checked-label,
#nf-form-4-cont form .nf-form-content .list-checkbox-wrap ul li label.nf-checked-label,
#nf-form-6-cont form .nf-form-content .list-checkbox-wrap ul li label.nf-checked-label,
#nf-form-7-cont form .nf-form-content .list-checkbox-wrap ul li label.nf-checked-label {
background-color: #010D06;
color: #ffffff;
border-color: #010D06;
}
#nf-form-2-cont form #nf-field-10-container .nf-field-element p,
#nf-form-3-cont form #nf-field-10-container .nf-field-element p,
#nf-form-4-cont form #nf-field-10-container .nf-field-element p,
#nf-form-6-cont form #nf-field-10-container .nf-field-element p,
#nf-form-7-cont form #nf-field-10-container .nf-field-element p {
padding: 0;
margin: 0;
}
#nf-form-2-cont form .submit-container input,
#nf-form-3-cont form .submit-container input,
#nf-form-4-cont form .submit-container input,
#nf-form-6-cont form .submit-container input,
#nf-form-7-cont form .submit-container input {
color: #010D06;
background-color: transparent;
border-radius: 99999px;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
font-weight: 700;
letter-spacing: 0.1em;
transition: all 0.2s;
text-transform: uppercase;
position: relative;
transition: all 0.2s;
border: 2px solid #010D06;
display: inline-block;
cursor: pointer;
border: 2px solid rgba(1, 13, 6, 0.4);
}
#nf-form-2-cont form .submit-container input:hover,
#nf-form-3-cont form .submit-container input:hover,
#nf-form-4-cont form .submit-container input:hover,
#nf-form-6-cont form .submit-container input:hover,
#nf-form-7-cont form .submit-container input:hover {
color: #ffffff;
background-color: #010D06;
color: #55C544;
border: 2px solid #010D06;
}
#nf-form-2-cont form .list-checkbox-wrap li label,
#nf-form-3-cont form .list-checkbox-wrap li label,
#nf-form-4-cont form .list-checkbox-wrap li label,
#nf-form-6-cont form .list-checkbox-wrap li label,
#nf-form-7-cont form .list-checkbox-wrap li label {
font-weight: 400;
font-size: 1em;
font-family: "Grift"; }
#nf-form-2-cont form .nf-error input,
#nf-form-3-cont form .nf-error input,
#nf-form-4-cont form .nf-error input,
#nf-form-6-cont form .nf-error input,
#nf-form-7-cont form .nf-error input {
border: 2px solid #ff0000;
}
#nf-form-2-cont form .nf-error-msg,
#nf-form-3-cont form .nf-error-msg,
#nf-form-4-cont form .nf-error-msg,
#nf-form-6-cont form .nf-error-msg,
#nf-form-7-cont form .nf-error-msg {
font-size: 80%;
}
@media (min-width: 768px) {
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field,
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field {
width: 100%;
}
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1), #nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2), #nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3), #nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4) {
width: calc(50% - 1em);
}
#nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5), #nf-form-3-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5),
#nf-form-7-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6) {
width: 100%;
}
}
@media (min-width: 768px) {
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field,
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field {
width: 100%;
}
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1), #nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2), #nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4), #nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5), #nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6), #nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(7),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(5),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(7) {
width: calc(50% - 1em);
}
#nf-form-4-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
#nf-form-6-cont form .nf-form-content nf-fields-wrap nf-field:nth-child(3) {
width: 100%;
}
}
.job-list .job-item {
display: flex;
flex-direction: column;
border-top: 1px solid rgba(1, 13, 6, 0.4);
padding: 40px 0;
}
@media (min-width: 768px) {
.job-list .job-item {
flex-direction: column;
gap: 0;
padding: 2em 0;
}
}
@media (min-width: 782px) {
.job-list .job-item {
border-top: none;
border-bottom: 1px solid rgba(1, 13, 6, 0.4);
}
.job-list .job-item:first-of-type {
padding-top: 0;
}
}
.job-list .job-item .title {
flex: 1;
padding-bottom: 0.25em;
}
.job-list .job-item .title a {
font-weight: 800;
font-size: 1.4em;
text-decoration: none;
}
.job-list .job-item .desc {
flex: 1;
padding-bottom: 0.25em;
}
.job-list .job-item .desc p:last-of-type {
padding: 0;
}  html.swipebox-html.swipebox-touch {
overflow: hidden !important;
}
#swipebox-overlay img {
border: none !important;
}
#swipebox-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999 !important;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#swipebox-container {
position: relative;
width: 100%;
height: 100%;
}
#swipebox-slider {
-webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
height: 100%;
left: 0;
top: 0;
width: 100%;
white-space: nowrap;
position: absolute;
display: none;
cursor: pointer;
}
#swipebox-slider .slide {
height: 100%;
width: 100%;
line-height: 1px;
text-align: center;
display: inline-block;
}
#swipebox-slider .slide:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}
#swipebox-slider .slide img,
#swipebox-slider .slide .swipebox-video-container,
#swipebox-slider .slide .swipebox-inline-container {
display: inline-block;
max-height: 80%;
max-width: 80%;
margin: 0;
padding: 0;
width: auto;
height: auto;
vertical-align: middle;
}
#swipebox-slider .slide .swipebox-video-container {
background: none;
max-width: 1140px;
max-height: 100%;
width: 100%;
padding: 5%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
#swipebox-slider .slide-loading {
background: url(//www.tokati.de/wp-content/themes/tokati/assets/images/loader.gif) no-repeat center center;
}
#swipebox-bottom-bar,
#swipebox-top-bar {
-webkit-transition: 0.5s;
transition: 0.5s;
position: absolute;
left: 0;
z-index: 999;
height: 50px;
width: 100%;
}
#swipebox-bottom-bar {
bottom: 1em;
left: 1em;
width: calc(100% - 2em);
}
@media (min-width: 768px) {
#swipebox-bottom-bar {
bottom: 2em;
left: 2em;
width: calc(100% - 4em);
}
}
#swipebox-title {
display: block;
width: 100%;
text-align: center;
}
#swipebox-prev,
#swipebox-next,
#swipebox-close {
border-radius: 99999px;
text-decoration: none !important;
cursor: pointer;
width: 48px;
height: 48px;
top: 0;
position: relative;
transition: all 0.2s;
border: 2px solid rgba(1, 13, 6, 0.4);
background: transparent; }
#swipebox-prev:before,
#swipebox-next:before,
#swipebox-close:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
border: 2px solid #55C544;
border-radius: 99999px;
transition: all 0.2s;
}
#swipebox-prev:after,
#swipebox-next:after,
#swipebox-close:after {
content: "";
height: 1em;
width: 1em;
background-color: #010D06;
display: inline-block;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
}
#swipebox-prev:hover,
#swipebox-next:hover,
#swipebox-close:hover {
border-color: #010D06;
background: #010D06;
width: 96px;
}
#swipebox-prev:hover:before,
#swipebox-next:hover:before,
#swipebox-close:hover:before {
left: -0.5em;
top: -0.5em;
right: -0.5em;
bottom: -0.5em;
opacity: 1;
}
#swipebox-prev:hover:after,
#swipebox-next:hover:after,
#swipebox-close:hover:after {
background-color: #55C544;
}
#swipebox-arrows {
display: block;
margin: 0 auto;
width: 100%;
height: 50px;
}
#swipebox-prev {
float: left;
transform: rotate(180deg);
}
#swipebox-next {
float: right;
}
#swipebox-close {
top: 1em;
right: 1em;
position: absolute;
z-index: 9999;
}
#swipebox-close:after {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/close.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/close.svg);
}
.swipebox-no-close-button #swipebox-close {
display: none;
}
#swipebox-prev.disabled,
#swipebox-next.disabled {
opacity: 0.3;
} #swipebox-overlay {
background: #ffffff;
} #rmOrganism .rmSubscription .rmBase__content {
font-family: "Grift";
}
#rmOrganism .rmSubscription .rmBase__content .rmBase__comp--text {
font-weight: 500;
line-height: 1.1;
color: #010D06;
font-size: 150%;
}
@media (min-width: 1600px) {
#rmOrganism .rmSubscription .rmBase__content .rmBase__comp--text {
font-size: 200%;
}
} @font-face {
font-family: "Scarletty";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Scarletty.woff) format("woff"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Scarletty.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff) format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff) format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLight.woff) format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraLightItalic.woff) format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Light.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-LightItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-LightItalic.woff) format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Regular.woff) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Regular.woff) format("woff");
font-weight: normal;
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Italic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Italic.woff) format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Medium.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-MediumItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-MediumItalic.woff) format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-SemiBoldItalic.woff) format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Bold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Bold.woff) format("woff");
font-weight: bold;
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BoldItalic.woff) format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBold.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBold.woff) format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBoldItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-ExtraBoldItalic.woff) format("woff");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Black.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-Black.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BlackItalic.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Grift-BlackItalic.woff) format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Plex";
src: url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Plex-Regular.woff2) format("woff2"), url(//www.tokati.de/wp-content/themes/tokati/assets/fonts/Plex-Regular.woff) format("woff");
font-style: normal;
font-display: swap;
}
.has-tokati-schwarz-color {
color: #010D06;
}
.has-tokati-schwarz-background-color {
background-color: #010D06;
}
.has-tokati-weiss-color {
color: #ffffff;
}
.has-tokati-weiss-background-color {
background-color: #ffffff;
}
.has-tokati-light-color {
color: #DEF2CE;
}
.has-tokati-light-background-color {
background-color: #DEF2CE;
}
.has-tokati-hellgruen-color {
color: #55C544;
}
.has-tokati-hellgruen-background-color {
background-color: #55C544;
}
.has-tokati-dunkelgruen-color {
color: #032512;
}
.has-tokati-dunkelgruen-background-color {
background-color: #032512;
}
.tokati-button {
display: block;
text-align: center;
padding: 1em 0;
}
.tokati-button a {
display: inline-flex;
width: auto;
flex-direction: row;
padding: 0.75em 4em 0.75em 1.5em;
transition: all 0.2s;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
}
.tokati-button a:after {
display: none;
}
.tokati-button a svg {
display: block;
width: auto;
height: 1em;
position: absolute;
top: 50%;
margin-top: -0.5em;
right: 1.5em;
transition: all 0.2s;
}
.tokati-button a:hover svg {
right: 1em;
}
.has-tokati-schwarz-button a {
color: #ffffff;
border: 2px solid #55C544;
}
.has-tokati-schwarz-button a svg {
fill: #55C544;
}
.has-tokati-schwarz-button a:hover {
background-color: #ffffff;
color: #010D06;
border-color: #ffffff;
}
.has-tokati-schwarz-button a:hover svg {
fill: #ffffff;
}
.has-tokati-weiss-button a,
.has-tokati-light-button a {
color: #010D06;
border: 2px solid #55C544;
}
.has-tokati-weiss-button a svg,
.has-tokati-light-button a svg {
fill: #55C544;
}
.has-tokati-weiss-button a:hover,
.has-tokati-light-button a:hover {
background-color: #010D06;
color: #ffffff;
border-color: #010D06;
}
.has-tokati-weiss-button a:hover svg,
.has-tokati-light-button a:hover svg {
fill: #ffffff;
}
.has-tokati-hellgruen-button a {
color: #010D06;
border: 2px solid #ffffff;
}
.has-tokati-hellgruen-button a svg {
fill: #010D06;
}
.has-tokati-hellgruen-button a:hover {
background-color: #ffffff;
color: #010D06;
border-color: #ffffff;
}
.has-tokati-hellgruen-button a:hover svg {
fill: #010D06;
}
.has-tokati-dunkelgruen-button a {
color: #ffffff;
border: 2px solid #ffffff;
}
.has-tokati-dunkelgruen-button a svg {
fill: #ffffff;
}
.has-tokati-dunkelgruen-button a:hover {
background-color: #ffffff;
color: #032512;
border-color: #ffffff;
}
.has-tokati-dunkelgruen-button a:hover svg {
fill: #032512;
}
.wp-block-columns.is-layout-flex {
gap: 3em !important;
}
@media (min-width: 782px) {
.wp-block-columns.is-layout-flex {
gap: 4em !important;
}
}
.wp-block-buttons {
width: auto !important;
}
.wp-block-buttons.is-vertical {
flex-direction: column;
gap: 1em;
align-items: flex-start;
}
.wp-block-buttons .wp-block-button {
width: auto !important;
}
.wp-block-buttons .wp-block-button a {
color: #ffffff;
background-color: #010D06;
border-radius: 99999px;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
font-weight: 600;
letter-spacing: 0.1em;
transition: all 0.2s;
text-transform: uppercase;
position: relative;
transition: all 0.2s;
border: 2px solid #010D06;
display: inline-block;
font-size: 1em;
}
.wp-block-buttons .wp-block-button a:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
border: 2px solid #55C544;
border-radius: 99999px;
transition: all 0.2s;
}
.wp-block-buttons .wp-block-button a:after {
content: "";
height: 1em;
width: 1em;
background-color: #ffffff;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
}
.wp-block-buttons .wp-block-button a:hover {
background-color: #010D06;
color: #55C544;
}
.wp-block-buttons .wp-block-button a:hover:before {
left: -0.5em;
top: -0.5em;
right: -0.5em;
bottom: -0.5em;
opacity: 1;
}
.wp-block-buttons .wp-block-button a:hover:after {
transform: rotate(-45deg);
color: #55C544;
}
.wp-block-buttons .wp-block-button.is-style-outline a {
color: #010D06;
background-color: transparent;
border-radius: 0;
box-shadow: none;
text-decoration: none;
padding: 0.667em 1.333em;
letter-spacing: 0.1em;
transition: all 0.2s;
text-transform: uppercase;
border-radius: 99999px;
border: 2px solid rgba(1, 13, 6, 0.4);
}
.wp-block-buttons .wp-block-button.is-style-outline a:after {
content: "";
height: 1em;
width: 1em;
background-color: #010D06;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
}
.wp-block-buttons .wp-block-button.is-style-outline a:hover {
background-color: #010D06;
color: #55C544;
border-color: #010D06;
}
.wp-block-buttons .wp-block-button.is-style-outline a:hover:after {
transform: rotate(-45deg);
color: #55C544;
background-color: #55C544;
}
.wp-block-buttons .wp-block-button.is-style-textbutton a {
color: #010D06;
background-color: transparent;
border-radius: 0;
box-shadow: none;
text-decoration: none;
letter-spacing: 0;
transition: all 0.2s;
text-transform: none;
position: relative;
padding: 0 0 0 0;
margin: 0 0 1em 0;
border: none;
}
.wp-block-buttons .wp-block-button.is-style-textbutton a:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 3px;
background-color: rgba(1, 13, 6, 0.4);
transition: all 0.2s;
top: auto;
border: none;
opacity: 1;
}
.wp-block-buttons .wp-block-button.is-style-textbutton a:after {
content: "";
height: 1em;
width: 1em;
background-color: #010D06;
display: inline-block;
margin-left: 0.5em;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
position: relative;
bottom: -0.15em;
}
.wp-block-buttons .wp-block-button.is-style-textbutton a:hover:before {
bottom: -8px;
background-color: #55C544;
height: 6px;
}
.wp-block-buttons .wp-block-button.is-style-textbutton a:hover:after {
transform: rotate(-45deg);
}
.wp-block-buttons .wp-block-button.is-style-textbutton a:hover {
background-color: transparent;
}
.wp-block-buttons .wp-block-button.button-back a {
position: relative;
padding-left: 3.333em;
}
.wp-block-buttons .wp-block-button.button-back a:after {
position: absolute;
left: 1.333em;
top: calc(50% - 1.5em);
margin: auto;
transform: rotate(180deg); }
.wp-block-buttons .wp-block-button.button-back a:hover:after {
transform: rotate(215deg);
}
.acf-ticker {
width: auto !important;
padding-bottom: 2em;
}
.acf-ticker .h2 {
font-weight: 900;
margin: 0;
}
.acf-ticker .h2 span.line {
display: block;
}
@media (min-width: 1024px) {
.acf-ticker .h2 span.line:first-child:after {
content: "";
display: block;
width: 100%;
}
}
.acf-ticker .h2 span.line:last-of-type::after {
content: "\a";
white-space: pre;
}
.acf-ticker .h2 span.ticker-line {
display: block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.25em;
}
.acf-ticker .h2 span.ticker-line::after {
content: ".";
display: inline;
margin-left: 2px;
}
@media (min-width: 1024px) {
.acf-ticker .h2 span.ticker-line {
display: inline;
}
} .block-ticker-image {
flex: 1;
position: relative;
z-index: 0;
margin-bottom: 2em;
}
@keyframes wackeln {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
@keyframes wackeln2 {
0% {
transform: rotate(-8deg);
}
50% {
transform: rotate(8deg);
}
100% {
transform: rotate(-8deg);
}
}
@keyframes drehen {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.block-ticker-image:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/25-back.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
animation: wackeln2 10s ease-in-out infinite;
transform-origin: center;
}
.block-ticker-image img {
animation: wackeln 10s ease-in-out infinite;
transform-origin: center;
}
.claimtext .bigtext {
padding: 1em 0;
}
.claimtext .bigtext p {
font-weight: 600;
font-size: 150%;
}
.clients {
margin: 0 -20px;
padding: 2em 0;
}
@media (min-width: 768px) {
.clients {
margin: 0 -40px;
}
}
@media (min-width: 1281px) {
.clients {
margin: 0 -100vw;
}
}
.clients .inner {
padding: 40px 20px;
}
@media (min-width: 768px) {
.clients .inner {
margin: 40px 20px;
}
}
@media (min-width: 1281px) {
.clients .inner {
margin: 0 auto;
max-width: 80vw;
}
}
.clients .block-clients_hashtag {
display: block;
padding-bottom: 1em;
opacity: 0.6;
text-align: right;
}
.clients .block-clients_hashtag img {
width: 60%;
height: auto;
transform-origin: center center;
transform: rotate(10deg);
}
@media (min-width: 768px) {
.clients .block-clients_hashtag img {
width: 30%;
}
}
@media (min-width: 1281px) {
.clients .block-clients_hashtag img {
width: 400px;
}
}
.clients .clientlist ul {
display: block;
padding: 0 0 0 0;
margin: 0 !important;
list-style-type: none;
}
.clients .clientlist ul li {
display: inline-block;
color: #ffffff;
font-weight: bold;
position: relative;
padding: 0.5em 2em 0.5em 0;
margin: 0;
font-size: 150%;
}
@media (min-width: 768px) {
.clients .clientlist ul li {
font-size: 200%;
}
}
@media (min-width: 1281px) {
.clients .clientlist ul li {
padding: 0.25em 2em 0.25em 0;
}
}
.clients .clientlist ul li:after {
content: "";
width: 2px;
position: absolute;
top: 0.25em;
bottom: 0.25em;
right: 1em;
background-color: #ffffff;
transform-origin: center center;
transform: rotate(30deg);
opacity: 0.5;
}
.clients .clientlist ul li:last-child:after {
display: none;
}
.contact {
background-color: rgba(85, 197, 68, 0.3607843137) !important;
}
.contact.alignfull {
padding: 3em 0 3em 0;
margin: 0 calc(0px - 2em) 0 calc(0px - 2em);
}
@media (min-width: 768px) {
.contact.alignfull {
padding: 4em 0 4em 0;
}
}
@media (min-width: 1281px) {
.contact.alignfull {
margin: 0 -15vw 0 -15vw;
}
}
.contact .inner {
padding: 0 2.2em;
}
@media (min-width: 1281px) {
.contact .inner {
width: 70vw;
margin: 0 auto;
padding: 0;
}
}
.contact .contact_column {
display: flex;
flex-direction: column;
gap: 2em;
}
@media (min-width: 768px) {
.contact .contact_column {
flex-direction: row;
align-items: center;
}
.contact .contact_column div {
flex: 1;
}
}
.contact .contact_column h2 {
font-size: 3em;
padding: 0 0 0.5em 0;
}
@media (min-width: 1281px) {
.contact .contact_column h2 {
font-size: 3.5em;
}
}
@media (min-width: 1850px) {
.contact .contact_column h2 {
font-size: 4em;
}
}
.contact .contact_column ul.contact_data {
display: block;
padding: 0;
margin: 0 !important;
list-style-type: none;
}
.contact .contact_column ul.contact_data li {
display: block;
padding: 0 0 0.5em 0;
margin: 0;
}
.contact .contact_column ul.contact_data li a {
display: inline-block;
color: #010D06;
font-weight: 600;
text-decoration: none;
font-size: 150%;
position: relative;
padding-bottom: 3px;
transition: all 0.2s;
}
.contact .contact_column ul.contact_data li a:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 3px;
background-color: rgba(1, 13, 6, 0.4);
bottom: 0;
transition: all 0.2s;
}
.contact .contact_column ul.contact_data li a:hover:after {
background-color: #55C544;
bottom: -5px;
height: 6px;
}
.contact .contact_column .hashtag {
text-align: center;
}
.contact .contact_column .hashtag img {
width: 100%;
max-width: 50vw;
height: auto;
}
@media (min-width: 768px) {
.contact .contact_column .hashtag img {
max-width: 30vw;
}
}
.leistungen {
padding: 0 0 6em 0 !important;
}
@media (min-width: 1281px) {
.leistungen.align {
max-width: 900px;
margin: 0 auto;
}
}
@media (min-width: 1281px) {
.leistungen.wide {
max-width: 1200px;
margin: 0 auto;
}
}
.leistungen h2 {
font-family: "Scarletty";
color: #032512;
font-weight: normal;
font-style: normal;
line-height: 1;
transform-origin: center center;
transform: rotate(-8deg);
position: relative;
margin-top: -0.75em;
padding: 1em 0 0.5em 0;
}
@media (min-width: 1281px) {
.leistungen h2 {
margin-top: -1em;
padding: 1em 0 0.5em 0;
}
}
.leistungen .leistungen_item {
display: flex;
flex-direction: column;
gap: 3em;
}
@media (min-width: 1024px) {
.leistungen .leistungen_item {
padding: 0 100px;
}
}
.leistungen .leistungen_item .item .headline h3 {
font-family: "Scarletty";
text-transform: lowercase;
font-size: 3em;
font-weight: normal;
padding: 0;
margin: 0;
}
.leistungen .leistungen_item .item .headline h3:before {
content: "#";
color: #55C544;
font-size: 1.5em;
}
.leistungen .leistungen_item .item .text .textfield {
font-weight: 500;
padding-bottom: 0.5em;
}
.leistungen .leistungen_item .item .text .textfield p {
padding: 0;
margin: 0;
}
.leistungen .leistungen_item .item .text .link {
padding-top: 1em;
}
.leistungen .leistungen_item .item .text .link a {
color: #010D06;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
position: relative;
display: inline-block;
padding-right: 2.5em;
}
.leistungen .leistungen_item .item .text .link a svg {
display: block;
width: auto;
height: 1em;
position: absolute;
top: 50%;
margin-top: -0.5em;
right: 0.5em;
transition: all 0.2s;
}
.leistungen .leistungen_item .item .text .link a:after {
content: "";
position: absolute;
height: 3px;
left: 0;
right: 2.5em;
bottom: -3px;
background-color: #55C544;
transition: all 0.2s;
}
.leistungen .leistungen_item .item .text .link a:hover {
color: #032512;
}
.leistungen .leistungen_item .item .text .link a:hover svg {
fill: #032512;
right: 0.25em;
}
.leistungen .leistungen_item .item .text .link a:hover:after {
bottom: -5px;
}
.projects .projects_items {
display: flex;
flex-direction: column;
gap: 2em;
}
@media (min-width: 768px) {
.projects .projects_items {
flex-direction: row;
flex-wrap: wrap;
}
}
@media (min-width: 1366px) {
.projects .projects_items {
gap: 3em;
}
}
@media (min-width: 1600px) {
.projects .projects_items {
gap: 4em;
}
}
@media (min-width: 768px) {
.projects .projects_items .item {
width: calc(33.33333333% - 1.333333em);
}
}
@media (min-width: 1366px) {
.projects .projects_items .item {
width: calc(33.33333333% - 4em);
}
}
.projects .projects_items .item a {
text-decoration: none;
color: #010D06;
}
.projects .projects_items .item a .media {
display: block;
border-radius: 8px;
overflow: hidden;
margin: 0 0 0.5em 0;
aspect-ratio: 1/1;
}
@media (min-width: 768px) {
.projects .projects_items .item a .media {
border-radius: 1em;
}
}
.projects .projects_items .item a .media video {
width: 100%;
height: auto;
}
.projects .projects_items .item a .media img {
transition: all 0.2s;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.projects .projects_items .item a .headline {
font-weight: 700;
font-size: 1.2em;
display: block;
padding-right: 6em;
position: relative;
}
.projects .projects_items .item a .headline .arrow {
position: absolute;
right: 0;
width: 2em;
height: 2em;
border-radius: 99999px;
top: 0;
background-color: #010D06;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
}
.projects .projects_items .item a .headline .arrow:after {
content: "";
width: 1em;
height: 1em;
background-color: white;
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1em 1em;
mask-size: 1em 1em;
transition: all 0.2s;
}
.projects .projects_items .item a .bereich {
display: block;
padding-right: 6em;
font-family: "Plex";
text-transform: uppercase;
font-size: 85%;
padding-top: 5px;
letter-spacing: 0.05em;
}
.projects .projects_items .item a:hover .media img {
transform: scale(1.1);
}
.projects .projects_items .item a:hover .arrow {
width: 3.5em;
background-color: #55C544;
}
.projects .projects_items .item a:hover .arrow:after {
background-color: #010D06;
}
.projects.related-works {
margin-top: 1em;
}
.projects.related-works .projects_items {
display: flex;
flex-direction: column;
gap: 2em;
}
@media (min-width: 768px) {
.projects.related-works .projects_items {
flex-direction: row;
}
}
@media (min-width: 1366px) {
.projects.related-works .projects_items {
gap: 3em;
}
}
@media (min-width: 1600px) {
.projects.related-works .projects_items {
gap: 5em;
}
}
.projects.related-works .projects_items .item {
margin-bottom: 1em;
flex: 1;
}
@media (min-width: 1024px) {
.projects.related-works .projects_items .item {
flex: 1;
margin: 0;
}
}
.projects.related-works .projects_items .item a .media {
aspect-ratio: 1/1;
}
.projects.related-works .projects_items .item a .media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.projects.related-works .projects_items .item a .headline {
padding-right: 0;
}
@media (min-width: 1366px) {
.projects.related-works .projects_items .item a .headline {
padding-right: 6em;
}
}
.projects.related-works .projects_items .item a .bereich {
padding-right: 0;
}
@media (min-width: 1366px) {
.projects.related-works .projects_items .item a .bereich {
padding-right: 6em;
}
}
.projects.related-works .projects_items .item a .arrow {
display: flex;
}
#related-works {
display: block;
padding: 5em 0 2em 0;
}
@media (min-width: 768px) {
#related-works {
padding: 6em 0 2em 0;
}
}
@media (min-width: 1366px) {
#related-works {
padding: 10em 0 2em 0;
}
}
#related-works .info {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
#related-works .info {
flex-direction: row;
justify-content: space-between;
}
}
.blockheader h1, .blockheader h2 {
font-family: "Scarletty";
color: #032512;
font-weight: normal;
font-style: normal;
line-height: 1;
transform-origin: center center;
transform: rotate(-8deg);
position: relative;
margin-top: -0.75em;
padding: 1em 0 0 0;
margin-bottom: 0;
text-transform: none;
letter-spacing: 0;
}
@media (min-width: 1281px) {
.blockheader h1, .blockheader h2 {
margin-top: -1em;
padding: 1em 0 0.5em 0;
}
}
.blockheader .hashtag {
transform: rotate(-5deg);
position: relative;
right: 0;
top: 1em;
display: flex;
justify-content: right;
}
.blockheader .hashtag img {
max-width: 300px;
width: 50%;
}
@media (min-width: 1281px) {
.blockheader .hashtag img {
max-width: 400px;
}
}
.fullpage_stoerer {
position: relative;
margin: 0 calc(0px - 1em);
}
@media (min-width: 1281px) {
.fullpage_stoerer {
margin: 0 -20vw;
}
}
.fullpage_stoerer .media {
position: relative;
z-index: 0;
}
@media (min-width: 768px) {
.fullpage_stoerer .media {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.fullpage_stoerer .media video {
object-fit: cover;
width: 100%;
height: 100%;
}
.fullpage_stoerer .stoerer_text {
position: relative;
color: #ffffff;
padding: 1.5em 20px 6em 20px;
margin: 0 20px -4em 20px;
z-index: 1;
}
.fullpage_stoerer .stoerer_text:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #032512;
opacity: 0.85;
}
@media (min-width: 768px) {
.fullpage_stoerer .stoerer_text {
margin: 0 0 0 40px;
width: 40vw;
bottom: -3em;
padding: 2em 40px 4em 40px;
}
}
@media (min-width: 1281px) {
.fullpage_stoerer .stoerer_text {
width: 500px;
padding: 2em 3em 4em 3em;
}
}
@media (min-width: 1600px) {
.fullpage_stoerer .stoerer_text {
width: 600px;
}
}
.fullpage_stoerer .stoerer_text .button {
display: block;
text-align: center;
margin: 1.5em 0 1.5em 0;
}
.fullpage_stoerer .stoerer_text .button a {
color: #ffffff;
position: relative;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
border: 2px solid #ffffff;
padding: 0.8em 3.5em 0.8em 1.5em;
display: inline-block;
transition: all 0.2s;
font-size: 4.5vw;
}
@media (min-width: 768px) {
.fullpage_stoerer .stoerer_text .button a {
font-size: 2.3vw;
}
}
.fullpage_stoerer .stoerer_text .button a svg {
width: 20px;
height: 20px;
fill: #ffffff;
position: absolute;
top: 50%;
margin-top: -10px;
right: 1.5em;
transition: all 0.2s;
}
.fullpage_stoerer .stoerer_text .button a:hover {
background-color: #ffffff;
color: #010D06;
}
.fullpage_stoerer .stoerer_text .button a:hover svg {
right: 1em;
fill: #55C544;
}
.fullpage_stoerer .stoerer_text .link {
display: block;
text-align: center;
}
.fullpage_stoerer .stoerer_text .link a {
color: #ffffff;
position: relative;
font-weight: 600;
text-decoration: none;
padding-bottom: 6px;
transition: all 0.2s;
font-size: 4.5vw;
}
@media (min-width: 768px) {
.fullpage_stoerer .stoerer_text .link a {
font-size: 2.3vw;
}
}
.fullpage_stoerer .stoerer_text .link a:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
background-color: #ffffff;
width: 100%;
transition: all 0.2s;
}
.fullpage_stoerer .stoerer_text .link a:hover {
opacity: 0.7;
}
.fullpage_stoerer .stoerer_text .link a:hover:after {
bottom: -2px;
}
.team {
display: flex;
flex-direction: column;
gap: 1em;
margin-top: 2em;
}
@media (min-width: 768px) {
.team {
flex-direction: row;
gap: 40px;
flex-wrap: wrap;
}
}
.team .item {
margin-bottom: 3em;
position: relative;
}
.team .item .image {
position: relative;
border-radius: 1em;
overflow: hidden;
}
.team .item .image img {
display: block;
}
.team .item .caption {
position: absolute;
left: 20px;
bottom: -30px;
display: flex;
flex-direction: column;
}
@media (min-width: 1366px) {
.team .item .caption {
bottom: -60px;
}
}
.team .item .caption h3 {
line-height: 140%;
}
.team .item .caption h3 span.textline {
background-color: #010D06;
color: white;
padding: 3px 10px;
display: inline;
box-decoration-break: slice; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin-bottom: 5px;
position: relative;
line-height: 1.7;
}
@media (min-width: 1024px) {
.team .item .caption h3 {
font-size: 1.1em;
line-height: 0;
}
}
@media (min-width: 1366px) {
.team .item .caption h3 {
font-size: 1.3em;
}
}
@media (min-width: 1850px) {
.team .item .caption h3 {
font-size: 1.5em;
}
}
.team .item .caption h3 span.spacer {
display: block;
}
@media (min-width: 768px) {
.team .item {
width: calc(50% - 20px);
}
}
@media (min-width: 1024px) {
.team .item {
width: calc(33.33333% - 30px);
}
.team .item:nth-child(3n+1) {
margin-top: 2em;
}
.team .item:nth-child(3n+1) .caption {
bottom: -30px;
}
.team .item:nth-child(3n+2) .caption {
bottom: 10px;
}
.team .item:nth-child(3n+3) {
margin-top: 1em;
}
.team .item:nth-child(3n+3) .caption {
bottom: -10px;
}
}
.team .item.plus {
position: relative;
}
.team .item.plus .more {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.team .item.plus .more a {
text-decoration: none;
font-size: 300%;
text-align: center;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.team .item.plus .more a:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
opacity: 0;
transition: all 0.2s;
}
.team .item.plus .more a .more_inner {
animation: wackeln 10s ease-in-out infinite;
}
@keyframes wackeln {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.team .item.plus .more a .more_inner .textline {
background-color: #032512;
color: #ffffff;
padding: 3px 10px;
display: inline;
box-decoration-break: clone;
margin-bottom: 5px;
position: relative;
line-height: 1.6;
transform: rotate(10deg);
transition: all 0.2s;
}
.team .item.plus .more a:hover:before {
opacity: 0.5;
}
.team .item.plus .more a:hover .more_inner {
animation-play-state: paused;
}
.team .item.plus .more a:hover .more_inner .textline {
background-color: #55C544;
color: #010D06;
}
.wp-block-cover {
padding: 0;
}
.wp-block-cover.alignfull {
margin: 0 calc(0px - 2em);
}
@media (min-width: 1281px) {
.wp-block-cover.alignfull {
margin: 0 -15vw;
}
}
.wp-block-cover .has-fit-text {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
}
.wp-block-cover .wp-block-cover__inner-container {
padding: 2em 2em;
}
@media (min-width: 768px) {
.wp-block-cover .wp-block-cover__inner-container {
padding: 2em 2.2em;
}
}
@media (min-width: 1281px) {
.wp-block-cover .wp-block-cover__inner-container div:not(.alignwide, .alignfull, .wp-block-button, .wp-block-buttons) {
width: 70vw;
margin: 0 auto;
}
}
@media (min-width: 1281px) {
.wp-block-cover .wp-block-cover__inner-container .alignwide div {
width: 80vw;
margin: 0 auto;
}
}
@media (min-width: 1281px) {
.wp-block-cover .wp-block-cover__inner-container .alignfull div {
width: calc(100vw - 4.4em);
margin: 0 auto;
}
}
.wp-block-cover.is-style-triangle {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}
.wp-block-cover.is-style-brush01 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-1.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-1.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush02 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-2.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-2.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush03 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-3.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-3.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush04 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-4.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-4.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush05 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-5.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-5.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush06 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-6.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-6.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush07 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-7.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-7.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.wp-block-cover.is-style-brush08 {
-webkit-mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-8.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/brush-mask-8.png);
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.editor-styles-wrapper .wp-block-cover {
padding: 0;
}
.editor-styles-wrapper .wp-block-cover.alignfull {
margin: 0;
}
@media (min-width: 1281px) {
.editor-styles-wrapper .wp-block-cover.alignfull {
margin: 0;
}
}
@media (min-width: 1281px) {
.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container div:not(.alignwide, .alignfull, .wp-block-button, .wp-block-buttons) {
width: unset;
}
}
@media (min-width: 1281px) {
.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container .alignwide div {
width: unset;
}
}
@media (min-width: 1281px) {
.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container .alignfull div {
width: unset;
margin: 0 auto;
}
}
article > .wp-block-cover:first-child {
margin-top: calc(0px - 2em);
}
@media (min-width: 1281px) {
article > .wp-block-cover:first-child {
margin-top: calc(0px - 2em);
}
}
article > .wp-block-cover:first-child .wp-block-cover__inner-container {
padding-top: 8em;
padding-bottom: 4em;
}
@media (min-width: 768px) {
article > .wp-block-cover:first-child .wp-block-cover__inner-container {
padding-top: 10em;
padding-bottom: 4em;
}
}
@media (min-width: 1281px) {
article > .wp-block-cover:first-child .wp-block-cover__inner-container {
padding-top: 12em;
padding-bottom: 4em;
padding-left: 10vw;
padding-right: 10vw;
}
}
.wp-block-list.is-style-clientlist {
display: block;
padding: 1em 0 0 0;
margin: 0 !important;
list-style-type: none;
}
.wp-block-list.is-style-clientlist li {
display: inline-block;
font-weight: 500;
font-size: 130%;
position: relative;
padding: 0.5em 2em 0.5em 0;
margin: 0;
}
@media (min-width: 768px) {
.wp-block-list.is-style-clientlist li {
font-size: 200%;
}
}
@media (min-width: 1281px) {
.wp-block-list.is-style-clientlist li {
font-size: 250%;
padding: 0.25em 2em 0.25em 0;
}
}
.wp-block-list.is-style-clientlist li:after {
content: "";
width: 2px;
position: absolute;
top: 0.25em;
bottom: 0.25em;
right: 1em;
background-color: currentColor;
transform-origin: center center;
transform: rotate(30deg);
opacity: 0.3;
}
.wp-block-list.is-style-clientlist li:last-child:after {
display: none;
}
.getback {
text-align: left;
padding: 0 0 2em 0;
}
@media (min-width: 1366px) {
.getback {
padding: 0 0 3em 0;
}
}
.getback a {
color: #010D06;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
position: relative;
display: inline-block;
padding-left: 2em;
background-color: #ffffff;
}
.getback a svg {
display: block;
width: auto;
height: 1em;
position: absolute;
top: 50%;
margin-top: -0.5em;
left: 0;
transition: all 0.2s;
transform: rotate(180deg);
}
.getback a:after {
content: "";
position: absolute;
height: 3px;
left: 2em;
right: 0;
bottom: -3px;
background-color: #55C544;
transition: all 0.2s;
}
.getback a:hover {
color: #032512;
}
.getback a:hover svg {
fill: #032512;
left: -0.25em;
}
.getback a:hover:after {
bottom: -5px;
} .is-style-subheadline, .is-style-subheadline2 {
display: block;
padding: 0 0 0.5em 0;
margin: 0 0 1em 0;
font-weight: 400;
letter-spacing: 0.1em;
opacity: 0.8;
font-family: "Plex";
text-transform: uppercase;
border-bottom: 1px solid #010D06;
}
.is-style-subheadline2 {
border-bottom: none;
}
.wp-block-gallery {
display: flex !important;
flex-direction: row;
gap: 1em;
flex-wrap: wrap;
}
.wp-block-gallery .wp-block-image {
width: calc(50% - 0.5em);
}
.wp-block-gallery .wp-block-image img {
width: 100% !important;
}
.wp-block-gallery .wp-block-image figcaption {
position: relative !important;
background: transparent !important;
color: #010D06 !important;
font-size: 0.8em !important;
text-shadow: none !important;
padding: 0.5em 0 0 0 !important;
}
@media (min-width: 768px) {
.wp-block-gallery .wp-block-image figcaption {
font-size: 1em !important;
column-gap: 1rem !important;
}
}
.wp-block-embed__wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; }
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
figure.wp-lightbox-container {
overflow: hidden;
position: relative;
z-index: 0;
}
figure.wp-lightbox-container:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #010D06;
z-index: -1;
}
figure.wp-lightbox-container img {
transition: all 0.2s;
}
figure.wp-lightbox-container img:hover {
filter: grayscale(70%);
transform: scale(1.1);
opacity: 0.3;
}
figure.wp-lightbox-container button.lightbox-trigger {
top: 50% !important;
right: 50% !important;
margin-top: -25px;
margin-right: -25px;
width: 50px !important;
height: 50px !important;
}
figure.wp-lightbox-container button.lightbox-trigger svg {
width: 50px !important;
height: 50px !important;
}
.acf_gallery ul {
display: flex;
padding: 0;
margin: 0 !important;
flex-wrap: wrap;
list-style-type: none;
gap: 0.25em 1em;
}
.acf_gallery ul li a {
overflow: hidden;
border-radius: 8px;
display: block;
position: relative;
z-index: 0;
}
@media (min-width: 768px) {
.acf_gallery ul li a {
border-radius: 1em;
}
}
.acf_gallery ul li a:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #010D06;
}
.acf_gallery ul li a:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(//www.tokati.de/wp-content/themes/tokati/assets/images/lupe.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 10%;
z-index: 2;
opacity: 0;
transition: all 0.2s;
}
.acf_gallery ul li a img {
position: relative;
z-index: 1;
width: 100%;
transition: all 0.2s;
display: block;
}
.acf_gallery ul li a:hover:before {
background-size: 20%;
opacity: 1;
}
.acf_gallery ul li a:hover img {
transform: scale(1.1);
opacity: 0.3;
}
.acf_gallery.has-columns-1 ul li {
flex: 0 0 100%;
box-sizing: border-box;
}
.acf_gallery.has-columns-2 ul li {
flex: 0 0 calc(50% - 0.5em);
box-sizing: border-box;
}
.acf_gallery.has-columns-3 ul li {
flex: 0 0 calc(50% - 0.5em);
box-sizing: border-box;
}
@media (min-width: 768px) {
.acf_gallery.has-columns-3 ul li {
flex: 0 0 calc(33.33333333% - 0.6666666667em);
}
}
.acf_gallery.has-columns-4 ul li {
flex: 0 0 calc(50% - 0.5em);
box-sizing: border-box;
}
@media (min-width: 768px) {
.acf_gallery.has-columns-4 ul li {
flex: 0 0 calc(25% - 0.75em);
}
}
.acf_gallery.is-style-square ul li a img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
aspect-ratio: 1/1;
}
.acf_gallery.is-style-landscape ul li a img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
aspect-ratio: 4/3;
}
.acf_gallery.is-style-masonry ul {
column-count: 4;
display: block;
}
.acf_gallery.is-style-masonry ul li {
display: flex;
break-inside: avoid;
}
.acf_gallery.is-style-masonry ul li a img {
width: 100%;
height: auto;
}
.acf_gallery.is-style-masonry.has-columns-1 ul {
column-count: 1;
}
@media (min-width: 768px) {
.acf_gallery.is-style-masonry.has-columns-1 ul li {
padding-bottom: 3em;
}
}
.acf_gallery.is-style-masonry.has-columns-2 ul {
column-count: 2;
}
@media (min-width: 768px) {
.acf_gallery.is-style-masonry.has-columns-2 ul li {
padding-bottom: 3em;
}
}
.acf_gallery.is-style-masonry.has-columns-3 ul {
column-count: 3;
}
@media (min-width: 768px) {
.acf_gallery.is-style-masonry.has-columns-3 ul li {
padding-bottom: 3em;
}
}
.acf_gallery.is-style-masonry.has-columns-4 ul {
column-count: 4;
}
@media (min-width: 768px) {
.acf_gallery.is-style-masonry.has-columns-4 ul li {
padding-bottom: 3em;
}
}
.friends {
display: flex;
gap: 2em;
align-items: center;
padding: 2em 0;
}
@media (min-width: 768px) {
.friends {
gap: 5em;
}
}
@media (min-width: 1600px) {
.friends {
gap: 8em;
}
}
.friends .item a {
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.friends .item a img {
width: 100%;
height: auto;
}
.friends .item a:hover {
transform: scale(1.5) rotate(-8deg);
}
.friends .item:nth-child(3n+1) a:hover {
transform: scale(1.3) rotate(-8deg);
}
.friends .item:nth-child(3n+2) a:hover {
transform: scale(1.4) rotate(8deg);
}
.friends .item:nth-child(3n+3) a:hover {
transform: scale(1.5) rotate(-6deg);
}
.moreService {
padding: 0 0 2em 0;
}
@media (min-width: 768px) {
.moreService {
display: flex;
flex-direction: column;
margin: 0 auto;
}
}
.moreService .wp-block-buttons {
flex-direction: column;
gap: 1em;
margin-top: 1em;
}
@media (min-width: 768px) {
.moreService .wp-block-buttons {
flex: 2;
flex-direction: row;
}
}
.moreService .wp-block-buttons .wp-block-button.current a {
pointer-events: none;
opacity: 0.6;
}
.moreService .wp-block-buttons .wp-block-button.current a:after {
display: none;
}
.moreService .wp-block-buttons .wp-block-button.current a:before {
content: "";
position: absolute;
left: 1em;
right: 1em;
bottom: calc(50% - 0.15em);
height: 7px;
background-color: #55C544;
transition: all 0.2s;
top: auto;
border: none;
opacity: 0.7;
border-radius: 0;
}
@media (min-width: 768px) {
.moreService.is-style-vertical .wp-block-buttons {
flex: 1;
flex-direction: column;
align-items: flex-start;
}
}