.cool-underline {
border-bottom: 3px solid var(--yellow);
padding-bottom: 2px; }
.border_logo{
border: 1px solid rgba(255, 255, 255, 0.25);
}
.section_center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
padding: 0 30px;
box-sizing: border-box;
text-align: center;
max-width: 720px;
}
.position_bottom {
position: absolute;
bottom: 10%;
}
body.page-glitch {
filter: grayscale(100%) contrast(200%) blur(4.0px);
mix-blend-mode: luminosity;
animation: pageGlitch 0.35s linear;
will-change: transform, filter;
} @keyframes pageGlitch {
0% {
transform: translate(0, 0) rotate(0deg);
}
5% {
transform: translate(-1px, 2px) rotate(-0.1deg);
}
10% {
transform: translate(2px, -1px) rotate(0.05deg);
}
15% {
transform: translate(-1px, 1px);
}
20% {
transform: translate(1px, -1px) rotate(-0.1deg);
}
25% {
transform: translate(-1px, 0px);
}
30% {
transform: translate(0px, -1px) rotate(0.1deg);
}
35% {
transform: translate(-1px, 1px);
}
40% {
transform: translate(1px, -2px);
}
45% {
transform: translate(-1px, 0px) rotate(-0.05deg);
}
50% {
transform: translate(0px, -2px);
}
55% {
transform: translate(-1px, 2px);
}
60% {
transform: translate(1px, -1px) rotate(0.1deg);
}
65% {
transform: translate(-1px, 1px);
}
70% {
transform: translate(2px, -1px);
}
75% {
transform: translate(-1px, 0px);
}
80% {
transform: translate(1px, -1px);
}
85% {
transform: translate(0px, 0px);
}
90% {
transform: translate(1px, -0px);
}
95% {
transform: translate(-1px, 1px);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
} .scroll-glitch.page-glitch {
animation: 0.55s linear infinite;
filter: grayscale(100%) contrast(140%) blur(2.0px);
transition: filter 0.25s ease, transform 0.55s ease;
} body {
-webkit-overflow-scrolling: touch;
background: #000000;
}
.glasseffect {
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header-container {
position: relative;
z-index: 999999999;
}
:root {
--yellow: #D9FD21;
--black: #0D0D0D;
--white: #F7F7FF; }  .inline-image {
width: 58px;
height: 58px;
vertical-align: middle;
margin: 0px 14px 10px 14px;
border-radius: 50%;
object-fit: cover;
}
.gif-link {
display: block;
text-decoration: none;
cursor: pointer;
}
.gif-overlay {
position: fixed;
inset: 0;
z-index: 9999000000;
opacity: 0;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
background: black;
cursor: pointer;
}
.inline-image-projekt_de {
width: 58px;
height: 58px;
vertical-align: middle;
margin: 0px 14px 10px 14px;
border-radius: 50%;
object-fit: cover;
}
.inline-image-projekt_en {
width: 58px;
height: 58px;
vertical-align: middle;
margin: 0px 14px 10px 14px;
border-radius: 50%;
object-fit: cover;
} .gif-overlay::before {
content: "";
position: absolute;
inset: 0;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/02/noise_black_200x200_mono.jpg);
background-repeat: repeat;
background-size: 200px 200px;
opacity: 1;
pointer-events: none;
animation: noise 0.2s infinite;
z-index: 0;
}
.gif-overlay.active {
opacity: 1;
pointer-events: none;
}
.gif-overlay img:not(.rotating-svg) {
width: 100%;
height: 100%;
object-fit: cover;
}
.rotating-svg {
position: absolute;
top: 50%;
left: 50%;
width: 60vw;
transform: translate(-50%, -50%);
animation: rotateSvg 10s linear infinite;
pointer-events: none;
z-index: 5;
}
@keyframes rotateSvg {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
} .gif-overlay video {
width: 30vw;
height: 30vw;
object-fit: cover;
display: block;
border-radius: 50%;
position: relative;
z-index: 1;
} .image-overlay-gif {
position: fixed;
inset: 0; width: 100vw;
height: 100dvh;
overflow: hidden;
z-index: 1;
} .image-overlay-gif .bg-image {
width: 100%;
height: 100%;
object-fit: cover; display: block;
}
.svg-overlay_gif {
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/02/overlay_pattern_bullet_2.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 1.0;
pointer-events: none;
z-index: 1;
} @media (hover: none),
(max-width: 768px) {
.gif-link1 {
display: none;
}
.inline-image {
width: 42px;
height: 42px;
}
.gif-overlay video {
width: 94vw;
height: 94vw;
}
.inline-image-projekt_de {
width: 42px;
height: 42px;
}
.inline-image-projekt_en {
width: 42px;
height: 42px;
}
.rotating-svg {
position: absolute;
top: 50%;
left: 50%;
width: 100vw; height: auto; transform: translate(-50%, -50%);
animation: rotateSvg 10s linear infinite;
pointer-events: none;
}
@keyframes rotateSvg {
from {
transform: translate(-50%, -50%) scale(1.7) rotate(0deg);
}
to {
transform: translate(-50%, -50%) scale(1.7) rotate(360deg);
}
}
} .reveal {
width: 100%;
overflow: hidden;
position: relative;
background: var(--black);
position: relative;
will-change: transform;
} .reveal img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
clip-path: inset(100% 0 0 0);
transform: scale(2.0) skewX(-30deg);
will-change: transform;
}  .hero-line {
position: relative;
display: inline-block; display: block; overflow: hidden;
} .hero-line span {
display: inline-block; transform: translateY(110%);
transition: transform 0.8s cubic-bezier(.77, 0, .18, 1);
transition-delay: 0.0s; } .hero-line::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%; height: 100%;
background: var(--yellow);
transform: translateX(-100%);
transition: transform 0.8s cubic-bezier(.77, 0, .18, 1);
} .hero-reveal.hero-active .hero-line span {
transform: translateY(0);
}
.hero-reveal.hero-active .hero-line::after {
transform: translateX(100%);
} .hero-line:nth-child(1) span,
.hero-line:nth-child(1)::after {
transition-delay: 0.3s;
}
.hero-line:nth-child(2) span,
.hero-line:nth-child(2)::after {
transition-delay: 0.45s;
}
.hero-line:nth-child(3) span,
.hero-line:nth-child(3)::after {
transition-delay: 0.6s;
}
.hero-line:nth-child(4) span,
.hero-line:nth-child(4)::after {
transition-delay: 0.75s;
}  .line {
position: relative;
display: inline-block; overflow: hidden;
} .line span {
display: inline-block; transform: translateY(110%);
transition: transform 0.8s cubic-bezier(.77, 0, .18, 1);
transition-delay: 0.0s; } .line::after {
content: "";
position: absolute;
inset: 0;
background: var(--bar-color, black); transform: translateX(-100%);
transition: transform 0.8s cubic-bezier(.77, 0, .18, 1);
} .reveal-active .line span {
transform: translateY(0);
}
.reveal-active .line::after {
transform: translateX(100%);
} .line:nth-child(2) span,
.line:nth-child(2)::after {
transition-delay: .15s;
}
.line:nth-child(3) span,
.line:nth-child(3)::after {
transition-delay: .3s;
}
.line:nth-child(4) span,
.line:nth-child(4)::after {
transition-delay: .45s;
} @keyframes textReveal {
to {
transform: translateY(0);
}
} .reveal.in img {
clip-path: inset(0 0 0 0);
transform: scale(1);
transition: clip-path 2.0s cubic-bezier(0.77, 0, 0.175, 1) 0.0s, transform 2.0s cubic-bezier(0.77, 0, 0.175, 1) 0.0s;
} .marquee-wrapper {
position: relative;
overflow: hidden;
height: auto;
}
.marquee-line {
white-space: nowrap;
will-change: transform;
}
.line1 {
font-size: calc(120px + 80*(100vw - 320px)/1600) !important;
}
.line2 {} .shrink-div {
width: 100%;
height: 90vh;
background-color: var(--yellow);
transform-origin: bottom center;
transform: scaleY(1);
transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
position: absolute; left: 0;
bottom: 0;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
z-index: 1000;
}
.shrink-div.shrink {
transform: scaleY(0);
} #soundToggle {
border: 0px solid #000000;
cursor: pointer;
z-index: 10000;
font-size: 14px;
font-weight: 500 !important;
font-family: 'Halisa', sans-serif;
background-color: #202020;
opacity: 0.8;
border-radius: 3px 3px 3px 3px;
padding: 12px 14px 14px 14px;
width: auto;
margin-left: 1px;
margin-right: 1px;
height: auto;
display: flex;
align-items: center;
color: #FFE24C;
} .noise_black {
position: relative;
inset: 0;
opacity: 1; }
.noise_black::before {
content: "";
position: absolute;
inset: 0;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/02/noise_black_200x200_color.jpg);
background-repeat: repeat;
opacity: 1.0;
background-size: 200px 200px;
pointer-events: none; animation: noise 0.2s infinite;
}
.noise_white {
position: relative;
inset: 0;
opacity: 1; }
.noise_white::before {
content: "";
position: absolute;
inset: 0;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/02/noise_white_200x200_color.jpg);
background-repeat: repeat;
opacity: 0.6;
background-size: 200px 200px;
pointer-events: none; animation: noise 0.2s infinite;
}
.noise_yellow {
position: relative;
inset: 0;
opacity: 1; }
.noise_yellow::before {
content: "";
position: absolute;
inset: 0;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/02/noise_yellow_200x200_color.jpg);
background-repeat: repeat;
opacity: 0.7;
background-size: 200px 200px;
pointer-events: none; animation: noise 0.2s infinite;
}
@keyframes noise {
0% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0% 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
100% {
background-position: 0 0;
}
}
.svg-overlay {
position: absolute;
top: -6%;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/01/overlay_pattern_hero_2.svg);
background-repeat: no-repeat;
background-size: cover; background-position: center center;
opacity: 1.0; pointer-events: none; z-index: 0; }
.svg-overlay_bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/01/overlay_pattern_bottom_4.svg);
background-repeat: no-repeat;
background-size: cover; background-position: center center;
opacity: 1.0; pointer-events: none; z-index: 0; }
.videoblog {
background: #ffffff;
height: auto;
}
.videoblog_video {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.heart-wrapper {
margin-left: 2px;
margin-bottom: 15px;
margin-top: 4px;
}
.heart-btn {
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
position: relative;
outline: none;
}
.heart-icon {
display: inline-block;
transition: transform 0.3s ease;
font-size: 20px;
padding-top: 3px;
color: #000000; -webkit-text-fill-color: #000000; }
.heart-count {
padding-top: 0px;
font-size: 16px;
font-weight: 500 !important;
font-family: 'Halisa', sans-serif;
color: #606060;
} .heart-btn.pop .heart-icon {
animation: pop 0.4s forwards;
}
@keyframes pop {
0% {
transform: scale(1);
}
30% {
transform: scale(1.0);
}
50% {
transform: scale(1.0);
}
100% {
transform: scale(1);
}
} .heart-particles {
position: relative;
top: -60px;
left: -20px;
pointer-events: none;
}
.heart-particles span {
position: absolute;
font-size: 40px;
opacity: 1;
animation: fly 0.6s forwards;
}
@keyframes fly {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--x), var(--y)) scale(0);
opacity: 0;
}
} .overlay_pagetransition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999999;
display: flex;
pointer-events: none;
} .bar {
flex: 1;
height: 100%;
transform-origin: top; animation: shrinkDown 1.0s cubic-bezier(0.77, 0, 0.175, 1) forwards;
} .bar1 {
animation-delay: 1.5s;
background: #000;
background-color: var(--yellow);
}
.bar2 {
position: relative;
animation-delay: 1.6s;
background-color: var(--yellow);
}
.bar3 {
animation-delay: 1.7s;
background: #000;
background-color: var(--yellow);
}
.bar2::before {
content: "";
position: absolute;
inset: 0;
background-image: url(//katjawolfinger.com/wp-content/uploads/2025/11/bulletjournal_profil_v1.gif);
background-size: 80px;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
animation: fadeImage 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
animation-delay: 1.2s;
} @keyframes fadeImage {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes shrinkDown {
0% {
height: 100%;
}
100% {
height: 0%;
}
}  @font-face {
font-family: 'Halisa Extended';
src: url(//katjawolfinger.com/wp-content/themes/mattspanky/css/costum_fonts/Halisa/Halisa-ExtendedBlack.woff2) format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Halisa';
src: url(//katjawolfinger.com/wp-content/themes/mattspanky/css/costum_fonts/Halisa/Halisa-Regular.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
h_slider,
p,
p_slider {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
} .font_weight_regular {
font-weight: 500 !important;
font-family: 'Halisa', sans-serif;
}
.font_weight_medium {
font-weight: 500 !important;
font-family: 'Halisa', sans-serif;
}
.font_weight_bold {
font-weight: 500 !important;
font-family: 'Halisa Extended', sans-serif;
} .justify {
text-align: justify;
}
.textalign_end {
text-align: end;
}
.textalign_center {
text-align: center;
}
.prozent40 {
width: 40%
} .fontsize_xxlarge {
font-size: calc(70px + 40*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 10px;
}
.fontsize_xxlarge_crowdfunding {
font-size: calc(60px + 30*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 0px;
padding-bottom: 10px;
}
.fontsize_xlarge {
font-size: calc(32px + 120*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 10px;
}
.fontsize_larger {
font-size: calc(24px + 70*(100vw - 320px)/1600);
letter-spacing: -0.5px;
line-height: 1.1;
}
.fontsize_large {
font-size: calc(24px + 30*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.3;
}
.fontsize_regular {
font-size: calc(12px + 14*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.1;
padding-top: 10px;
}
.fontsize_regular1 {
font-size: calc(18px + 20*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.1;
padding-top: 00px;
}
.fontsize_small {
font-size: calc(10px + 12*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.5;
padding-top: 0px;
}
.fontsize_small_fact {
font-size: calc(20px + 14*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.5;
padding-top: 0px;
}
.fontsize_regular_fact {
font-size: calc(26px + 16*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.1;
padding-top: 10px;
}
.fontsize_smaller {
font-size: calc(8px + 12*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.6;
padding-top: 10px;
}
.fontsize_xsmall {
font-size: calc(8px + 8*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 10px;
opacity: 0.6;
}
.fontsize_xxsmall {
font-size: calc(4px + 8*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 0px;
}
.fontsize_bullet {
font-size: 17px;
letter-spacing: 0.0px;
line-height: 1.3;
padding-top: 10px;
padding-left: 5px;
padding-right: 25px;
padding-bottom: 10px;
}
.fontsize_bullet_small {
font-size: 12px;
letter-spacing: 0.0px;
line-height: 1.5;
padding-top: 10px;
padding-left: 5px;
padding-right: 25px;
padding-bottom: 10px;
} .p_large {
font-size: calc(28px + 38*(100vw - 320px)/1600);
line-height: 1.2;
padding: 10px 0px 10px 0px;
letter-spacing: -0.3px;
}
.p_regular {
font-size: calc(20px + 16*(100vw - 320px)/1600);
line-height: 1.5;
padding: 10px 0px 10px 0px;
letter-spacing: 0.3px;
}
.p_small {
font-size: calc(12px + 10*(100vw - 320px)/1600);
line-height: 1.5;
padding: 10px 0px 10px 0px;
letter-spacing: 0.5px;
}
.p_xsmall {
font-size: calc(10px + 9*(100vw - 320px)/1600);
line-height: 1.2;
padding: 10px 0px 10px 0px;
letter-spacing: 0.0px;
} .uppercase {
text-transform: uppercase !important;
}
.text_centered {
text-align: center;
}
a {
outline-width: 0;
text-decoration: none !important;
color: unset;
}
a:hover {
outline-width: 0;
text-decoration: none!important;
color: unset;
}
.link {
text-decoration: underline!important;
font-size: calc(24px + 36*(100vw - 320px)/1600);
}
.div_center {
display: flex;
flex-direction: column;
align-items: center;
}
.div_right {
display: flex;
flex-direction: column;
align-items: end;
} .primary_black {
color: var(--black);
}
.primary_white {
color: var(--white);
}
.primary_yellow {
color: var(--yellow);
}
.gradient_yellow {
background: -webkit-linear-gradient(90deg, rgba(239, 229, 99, 1) 0%, rgba(157, 216, 29, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} .bg_white {
background: var(--white);
}
.bg_black {
background: var(--black);
}
.bg_yellow {
background: var(--yellow);
}
.bg_gradient_yellow {
background: -webkit-linear-gradient(90deg, rgba(239, 229, 99, 1) 0%, rgba(157, 216, 29, 1) 100%);
} .max_width_80prozent {
max-width: 80%;
position: relative;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.max_width_90prozent {
max-width: 90%;
position: relative;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
img {
max-width: 100%;
}
.blog_post {
margin-bottom: 40px;
background: #FFFFFF;
width: 560px;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
}
.padding_zero {
padding-left: 0px;
padding-right: 0px;
} .owl-carousel {
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
padding-left: calc(3vw - 15px);
padding-right: calc(3vw - 15px);
}
.owl-item {
padding-left: 20px;
padding-right: 20px;
}
.kc_button {
background-color: var(--yellow);
} .owl-controls .owl-page,
.owl-controls .owl-buttons div {
cursor: pointer;
}
.owl-theme .owl-controls .owl-page span {
width: 60px !important;
height: 4px !important;
background: #FFFFFF !important;
margin: 0px 5px 0px 5px!important;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
filter: Alpha(Opacity=15);
opacity: 0.15;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
filter: Alpha(Opacity=100);
opacity: 1;
background: #FFFFFF !important;
background: var(--yellow) !important;
}
.bt_navi {
width: auto;
margin-left: 1px;
margin-right: 1px;
height: auto;
display: flex;
align-items: center;
}
.bt_icon_language {
width: auto;
margin-left: 8vw;
margin-right: 0px;
border-left: solid 1px rgba(255, 255, 255, 0.2);
}
.bt_icon_contact {
width: auto;
margin-left: 0vw;
margin-right: 0px;
border-left: solid 1px rgba(255, 255, 255, 0.2);
}
.bt_icon2 {
width: auto;
margin-left: 10px;
margin-right: 20px;
}
.bt_text {
font-size: 14px;
font-weight: 500 !important;
font-family: 'Halisa', sans-serif;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.kc_button {
padding: 0px
}
.kc_button {
transition: background-color .0s ease 0s, color .1s ease 0s, border-radius .0s ease 0s !important;
white-space: nowrap;
}
.cta-button {
display: flex;
height: 60px;
border: none;
padding: 0;
cursor: pointer;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
border-radius: 4px;
}
.cta-text {
background-color: var(--yellow);
color: #000000;
display: flex;
align-items: center;
padding: 0px 30px 6px 30px;
font-size: 14px;
font-weight: 500 !important;
font-family: 'Halisa';
flex-grow: 1;
text-transform: uppercase;
height: 60px;
}
.cta-image {
width: 60px;
height: 60px;
padding: 0px;
background-color: #0D0D0D;
object-fit: cover;
}
button {
padding: 0px;
}
.kc-raw-code {
width: auto;
}
.button_right {
flex-direction: row-reverse;
}
.img_full {
height: 100%;
width: 100%;
object-fit: cover !important;
-webkit-object-fit: cover !important;
*/
}
.social_icon {
position: absolute;
bottom: 30px;
right: 30px;
width: auto;
} ::selection {
background: #FFFFFF;
color: var(--yellow);
;
}
::-moz-selection {
background: #FFFFFF;
color: var(--yellow);
;
} .hidden-mobilenavi {
opacity: 0;
transform: translateY(0px);
transition: opacity 0.1s ease, transform 0.3s ease;
z-index: 100000;
position: fixed;
} .hidden-bulletbar {
opacity: 0;
transform: translateY(0px);
transition: opacity 0.1s ease, transform 0.3s ease;
z-index: 1000000000;
position: fixed;
}
.navi_items {
display: flex;
flex-direction: column;
justify-content: center;
} .hidden-box {
opacity: 0;
transform: translateY(0px);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 100000;
position: fixed;
right: 3vw;
bottom: 30px;
}
.visible-box {
opacity: 1;
transform: translateY(0);
} .fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
margin-left: 10px;
margin-right: 10px;
touch-action: none; }
.fullscreen-bg__video {
position: absolute;
object-fit: cover;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 101%;
height: 101%;
z-index: -1;
overflow: hidden;
}
.videomargin_zero {
margin: 0px !important;
}
.pixel-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(//katjawolfinger.com/wp-content/uploads/2025/12/pixeloverlay.png); } .video-wrapper {
width: 100%;
}
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
} .video-container video {
width: 100%;
height: 100%;
object-fit: cover;
} .play-btn {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: clamp(56px, 10vw, 96px);
height: clamp(56px, 10vw, 96px);
background: #D9FD21;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.play-btn svg {
width: 40%;
height: 40%;
fill: #000;
} .timeline {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 8px;
background: rgba(255, 255, 255, 0.25);
border-radius: 0px;
cursor: pointer;
}
.buffered {
position: absolute;
height: 100%;
background: rgba(255, 255, 255, 0.45);
border-radius: 3px;
width: 0%;
}
.progress {
position: absolute;
height: 100%;
background: #D9FD21;
border-radius: 3px;
width: 0%;
}
.thumb {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background: #D9FD21;
border-radius: 0%;
transform: translate(-50%, -50%);
left: 0%;
pointer-events: none;
} .fullscreen-btn {
position: absolute;
top: 0px;
right: 0px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.6);
border: none;
border-radius: 0%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
}
.fullscreen-btn svg {
width: 24px;
height: 24px;
fill: #D9FD21;
} .video-container:hover .fullscreen-btn {
opacity: 1;
}
.fullscreen-btn {
opacity: 0;
transition: opacity .2s ease;
}
.video-container:hover .fullscreen-btn,
.video-container:active .fullscreen-btn {
opacity: 1;
} .scroll-container {
height: 100vh;
overflow: hidden; position: relative;
}
.sticky_container_auto {
min-height: 100vh;
height: auto !important;
background: #00FF00;
overflow: visible !important;
}
.sticky_container {
min-height: 100vh;
height: 400vh !important;
background: #00FF00;
overflow: visible !important;
}
.box {
width: 100%;
height: 100vh;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 2rem !important;
overflow: visible !important;
}
.box1 {
background-color: red !important;
color: white !important;
transition: position 0.3s ease-in-out !important;
position: -webkit-sticky; position: sticky;
top: 0 !important;
z-index: 10 !important;
overflow: visible !important;
}
.box2 {
background-color: rgba(0, 0, 0, 0.0) !important;
color: white !important;
transition: position 0.3s ease-in-out !important;
position: -webkit-sticky; position: sticky;
top: 0 !important;
z-index: 10 !important;
overflow: visible !important;
}
.box3 {
background-color: green !important;
color: white !important;
transition: position 0.3s ease-in-out !important;
position: -webkit-sticky; position: sticky;
top: 0 !important;
z-index: 10 !important;
overflow: visible !important;
}
.box4 {
background-color: rgba(0, 0, 0, 0.0) !important;
color: white !important;
transition: position 0.3s ease-in-out !important;
position: -webkit-sticky; position: sticky;
top: 0 !important;
z-index: 10 !important;
overflow: visible !important;
}
.center_items {
display: flex;
align-items: center;
} .height_auto {
height: auto !important;
}
.headline-container {
position: relative;
overflow: hidden;
width: 100%;
background: transparent;
margin: 0px 0;
line-height: inherit;
padding-bottom: 10px;
}
.headline1 {
display: inline-block;
transform: translateY(105%);
transition: transform 1.0s cubic-bezier(0.85, 0, 0.15, 1);
transition-delay: 0ms;
}
.headline1.visible {
transform: translateY(0);
}
.headline2 {
display: inline-block;
transform: translateY(105%);
transition: transform 1.0s cubic-bezier(0.85, 0, 0.15, 1);
transition-delay: 60ms;
padding-bottom: 15px;
}
.headline2.visible {
transform: translateY(0);
}
.headline3 {
display: inline-block;
transform: translateY(105%);
transition: transform 1.0s cubic-bezier(0.85, 0, 0.15, 1);
transition-delay: 250ms; }
.headline3.visible {
transform: translateY(0);
} .kc-container {
padding-left: 30px !important;
padding-right: 30px !important;
}
.padding_zero {
padding-left: 0px !important;
padding-right: 0px !important;
}
@media screen and (max-width:1190px) {
.kc-container {
padding-left: 30px !important;
padding-right: 30px !important;
}
}
@media screen and (max-width:999px) {
.kc-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media screen and (max-width:767px) {
.kc-container {
padding-left: 15px !important;
padding-right: 15px !important;
}
} .kc_single_image img { display: inline-block !important;
} .no_silbentrennung {
-moz-hyphens: none !important;
-o-hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
} .kc_button {
cursor: pointer!important;
} .profil-container {
width: 140px;
height: 140px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.profil-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient( from -5deg, #D9FD21, #6ee7b7, #38bdf8, #a855f7, #fd1d1d, #fcb045, #D9FD21);
z-index: 0;
}
.bulletprofil-container {
width: 140px;
height: 140px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.profil-image {
width: 94%; height: 94%; border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; border: solid 3px #000000
}
.bulletprofil-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient( from -5deg, #D9FD21, #6ee7b7, #38bdf8, #a855f7, #fd1d1d, #fcb045, #D9FD21);
z-index: 0;
}
.bulletprofil-image {
width: 94%;
height: 94%;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
border: solid 3px #000000
}
.bulletprofil-container_bar {
width: 38px;
height: 38px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.bulletprofil-container_bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient( from -5deg, #D9FD21, #6ee7b7, #38bdf8, #a855f7, #fd1d1d, #fcb045, #D9FD21); z-index: 0; }
.bulletprofil-image_bar {
width: 94%; height: 94%; border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; border: solid 3px #000000
}
#stickybarbullet {
display: none !important;
}
.flex-start {
justify-content: flex-start !important;
}
.sponsoren_slider {
margin-bottom: 0px;
}
.border_bottom {
border-bottom: 1px solid #333333;
}
.bullet-text {
position: relative;
padding-left: 15px;
padding-bottom: 15px; }
.bullet-text::before {
content: "";
position: absolute;
left: 0;
top: 0.7em; width: 6px;
height: 6px;
background-color: #D9FD21; border-radius: 50%; } @media only screen and (max-width: 1280px) {
.fontsize_xxlarge {
font-size: calc(60px + 20*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 0px;
}
.fontsize_xxlarge_crowdfunding {
font-size: calc(40px + 20*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 0px;
}
.fontsize_regular1 {
font-size: calc(16px + 18*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.1;
padding-top: 10px;
}
.fontsize_large {
font-size: calc(20px + 24*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
}
.fontsize_small {
font-size: calc(10px + 14*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.6;
padding-top: 0px;
}
.fontsize_xxsmall {
font-size: calc(6px + 8*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 0px;
}
.bt_text {
font-size: 12px;
font-weight: 500 !important;
font-family: 'Halisa', sans-serif;
}
.prozent40 {
width: 60%
}
.cta-button {
display: flex;
height: 46px;
border: none;
padding: 0;
cursor: pointer;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
border-radius: 4px;
}
.cta-text {
background-color: var(--yellow);
color: #000000;
display: flex;
align-items: center;
padding: 0px 24px 4px 24px;
font-size: 11px;
font-weight: 500 !important;
font-family: 'Halisa';
flex-grow: 1;
text-transform: uppercase;
}
.cta-text {
background-color: var(--yellow);
color: #000000;
display: flex;
align-items: center;
padding: 0px 30px 6px 30px;
font-size: 14px;
font-weight: 500 !important;
font-family: 'Halisa';
flex-grow: 1;
text-transform: uppercase;
height: 46px;
}
.cta-image {
width: 46px;
height: 46px;
padding: 0px;
background-color: #0D0D0D;
object-fit: cover;
}
.bar2::before {
background-size: 60px;
}
.line1 {
font-size: calc(100px + 60*(100vw - 320px)/1600) !important;
}
.showmobile {
display: none !important;
}
} @media only screen and (max-width: 999px) {  .div_center_mobile {
display: flex;
flex-direction: column;
align-items: center;
}
.svg-overlay {
position: absolute;
top: -12%;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/01/overlay_pattern_hero_2_mobile.svg);
background-repeat: no-repeat;
background-size: cover; background-position: center center;
opacity: 1.0; pointer-events: none; z-index: 5; }
.fontsize_xxlarge {
font-size: calc(120px + 90*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 10px;
}
.fontsize_xxlarge_crowdfunding {
font-size: calc(80px + 60*(100vw - 320px)/1600); letter-spacing: 0.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 10px;
}
.fontsize_xlarge {
font-size: calc(120px + 90*(100vw - 320px)/1600); letter-spacing: -2.0px;
line-height: 0.9;
padding-top: 20px;
padding-bottom: 10px;
padding-right: 50px;
}
.fontsize_large {
font-size: calc(32px + 40*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
}
.fontsize_regular {
font-size: calc(16px + 20*(100vw - 320px)/1600);
letter-spacing: 0.2px;
line-height: 1.2;
padding-top: 10px;
}
.fontsize_regular1 {
font-size: calc(24px + 30*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.1;
padding-top: 10px;
}
.fontsize_small {
font-size: calc(14px + 20*(100vw - 320px)/1600);
letter-spacing: 0.2px;
line-height: 1.4;
padding-top: 15px;
padding-top: 0px;
}
.fontsize_xsmall {
font-size: calc(12px + 16*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 10px;
}
.fontsize_larger {
font-size: calc(36px + 70*(100vw - 320px)/1600);
letter-spacing: -0.5px;
line-height: 1.1;
}
.fontsize_smaller {
font-size: calc(12px + 14*(100vw - 320px)/1600);
letter-spacing: 0.2px;
line-height: 1.5;
padding-top: 10px;
}
.fontsize_xxsmall {
font-size: calc(10px + 10*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 0px;
}
.p_xsmall {
font-size: calc(12px + 10*(100vw - 320px)/1600);
line-height: 1.3;
padding: 10px 60px 10px 60px;
padding-top: 10px;
padding-bottom: 10px;
letter-spacing: 0.0px;
}
.max_width_80prozent {
max-width: 90%;
position: relative;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.prozent40 {
width: 90%
}
.owl-carousel {
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
padding-left: calc(0vw - 0px);
padding-right: calc(0vw - 0px);
}
.owl-item {
padding-left: 3vw;
padding-right: 3vw;
}
.owl-theme .owl-controls {
margin-top: 50px;
text-align: center;
}
#stickybarbullet {
display: block !important;
}
.hidemobile {
display: none !important;
}
.bulletprofil-container_bar {
width: 58px; height: 58px; border-radius: 50%;
position: relative; overflow: hidden; }
.showmobile {
display: block !important;
}
} @media only screen and (max-width: 767px) { .fontsize_small_fact {
font-size: calc(20px + 14*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.5;
padding-top: 0px;
}
.fontsize_regular_fact {
font-size: calc(26px + 16*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.1;
padding-top: 10px;
}
.svg-overlay {
position: absolute;
top: -11%;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katjawolfinger.com/wp-content/uploads/2026/01/overlay_pattern_hero_2_mobile.svg);
background-repeat: no-repeat;
background-size: cover; background-position: center center;
opacity: 1.0; pointer-events: none; z-index: 5; }
.fontsize_xxlarge {
font-size: calc(58px + 70*(100vw - 320px)/1600); letter-spacing: -1.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 0px;
padding-right: 20px;
}
.fontsize_xxlarge_crowdfunding {
font-size: calc(54px + 40*(100vw - 320px)/1600); letter-spacing: -1.0px;
line-height: 1.0;
padding-top: 20px;
padding-bottom: 0px;
padding-right: 20px;
}
.fontsize_xlarge {
font-size: calc(62px + 90*(100vw - 320px)/1600); letter-spacing: -1.0px;
line-height: 0.9;
padding-top: 20px;
padding-bottom: 10px;
padding-right: 20px;
}
.fontsize_regular {
font-size: calc(20px + 20*(100vw - 320px)/1600);
letter-spacing: -0.1px;
line-height: 1.4;
padding-top: 0px;
}
.fontsize_regular1 {
font-size: calc(24px + 20*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.2;
padding-top: 10px;
}
.fontsize_large {
font-size: calc(24px + 30*(100vw - 320px)/1600);
letter-spacing: -0.0px;
line-height: 1.4;
}
.fontsize_larger {
font-size: calc(38px + 70*(100vw - 320px)/1600);
letter-spacing: -0.5px;
line-height: 1.1;
margin-left: -25px;
}
.fontsize_small {
font-size: calc(18px + 20*(100vw - 320px)/1600);
letter-spacing: 0.2px;
line-height: 1.5;
padding-top: 15px;
padding-top: 0px;
}
.fontsize_smaller {
font-size: calc(15px + 18*(100vw - 320px)/1600);
letter-spacing: 0.2px;
line-height: 1.6;
padding-top: 10px;
padding-bottom: 10px;
}
.fontsize_xsmall {
font-size: calc(12px + 15*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 10px;
padding-right: 0px; opacity: 0.8;
}
.fontsize_xxsmall {
font-size: calc(10px + 10*(100vw - 320px)/1600);
letter-spacing: 0.0px;
line-height: 1.4;
padding-top: 0px;
}
.p_xsmall {
font-size: calc(13px + 10*(100vw - 320px)/1600);
line-height: 1.3;
padding: 0px 0px 0px 0px;
letter-spacing: 0.0px;
}
.owl-carousel {
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
padding-left: calc(0vw - 0px);
padding-right: calc(0vw - 0px);
}
.owl-item {
padding-left: 6vw;
padding-right: 6vw;
}
.hidemobile {
display: none !important;
}
.owl-theme .owl-controls {
margin-top: 10px;
text-align: center;
}
.max_width_80prozent {
max-width: 99%;
position: relative;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.prozent40 {
width: 100%
}
.social_icon {
position: absolute;
bottom: 15px;
right: 15px;
width: auto;
} .bulletprofil-container {
width: 90px; height: 90px; border-radius: 50%;
position: relative; overflow: hidden; }
.bulletprofil-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient( from -5deg, #D9FD21, #6ee7b7, #38bdf8, #a855f7, #fd1d1d, #fcb045, #D9FD21); z-index: 0; }
.bulletprofil-image {
width: 94%; height: 94%; border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; border: solid 3px #000000
}
.profil-container {
width: 90px; height: 90px; border-radius: 50%;
position: relative; overflow: hidden; }
.line1 {
font-size: calc(80px + 40*(100vw - 320px)/1600) !important;
}
.bulletprofil-container_bar {
width: 38px; height: 38px; border-radius: 50%;
position: relative; overflow: hidden; }
} @media only screen and (max-width: 479px) {}