.wpml-ls-legacy-list-vertical{display:table;max-width:100%;border:1px solid transparent;border-bottom:0}.wpml-ls-legacy-list-vertical>ul{position:relative;padding:0;margin:0!important;list-style-type:none}.wpml-ls-legacy-list-vertical .wpml-ls-item{padding:0;margin:0;list-style-type:none}.wpml-ls-legacy-list-vertical a{display:block;text-decoration:none;border-bottom:1px solid transparent;padding:5px 10px;line-height:1}.wpml-ls-legacy-list-vertical a span{vertical-align:middle}.wpml-ls-legacy-list-vertical .wpml-ls-flag{display:inline;vertical-align:middle}.wpml-ls-legacy-list-vertical .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-vertical .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-vertical.wpml-ls-statics-footer{margin-bottom:30px}.woodi-five-reasons {
position: relative;
min-height: 100vh;
width: 100%;
padding: 20vh 0 !important;
overflow: hidden;
}
.woodi-five-reasons-inner {
margin: 0 auto;
}
.woodi-five-reasons-inner .woodi-btn-wrapper {
width: inherit;
margin: auto;
}
.woodi-five-reasons-headline {
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.header-section {
gap: 45px;
grid-template-columns: none !important;
}
}
.header-section {
display: grid;
grid-template-columns: 2.2fr 1fr;
}
.woodi-five-reasons .header-section {
margin-bottom: 30px;
}
.woodi-five-reasons .header-section h2 {
font-size: 40px;
font-weight: 600;
color: #042736;
margin-bottom: 34px;
}
.woodi-five-reasons .header-section p {
font-size: 20px;
line-height: 26px;
color: #042736;
margin-bottom: 0;
}
.woodi-five-reasons .content-wrapper {
display: grid;
grid-template-columns: 1.3fr 0.8fr;
align-items: center;
}
.woodi-five-reasons .reasons-list {
list-style: none;
counter-reset: reason-counter;
}
ol.reasons-list {
padding-left: 0;
}
.woodi-five-reasons .reasons-list li {
counter-increment: reason-counter;
font-size: 40px;
line-height: 1.2;
margin-bottom: 20px;
font-weight: 600;
color: #042736;
opacity: 1;
position: relative;
padding-left: 90px;
transition: color 0.4s ease;
}
.woodi-five-reasons .reasons-list li::before {
content: 'n°' counter(reason-counter);
position: absolute;
left: 0;
font-size: 40px;
opacity: 1;
}
.woodi-five-reasons .reasons-list li.reason-item > a {
color: inherit;
text-decoration: none;
transition-duration: 0s;
display: block;
}
li.reason-item {
position: relative;
list-style-position: inside;
}
li.reason-item span {
background-image: linear-gradient(to right, currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 0.1em;
animation: underline-out 0.25s ease-out forwards;
}
li.reason-item span:hover {
animation: underline-in 0.25s ease-out forwards;
}
@keyframes underline-in {
from {
background-position: 0 100%;
background-size: 0 0.1em;
}
to {
background-position: 0 100%;
background-size: 100% 0.1em;
}
}
@keyframes underline-out {
from {
background-position: 0 100%;
background-size: 100% 0.1em;
}
to {
background-position: 100% 100%;
background-size: 0 0.1em;
}
}
.woodi-five-reasons .visual-content {
display: flex;
flex-direction: column;
align-items: start;
}
.woodi-five-reasons .image-wrapper {
position: relative;
width: 365px;
height: 430px;
max-height: 100%;
max-width: 100%;
}
.woodi-five-reasons .reason-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 0.4s ease;
}
.woodi-five-reasons .reason-image.active {
opacity: 1;
}
.woodi-btn-wrapper-desktop {
display: block;
}
.woodi-btn-wrapper-mobile {
display: none;
}
.woodi-five-reasons-nav {
position: fixed;
right: 3%;
top: 57%;
transform: translateY(-50%);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.woodi-five-reasons-nav.visible {
opacity: 1;
pointer-events: auto;
}
.woodi-five-reasons-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.woodi-five-reasons-nav li {
margin: 15px 0;
font-size: 8px;
line-height: 8px;
}
.woodi-five-reasons-nav .nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid #042736;
background: #042736;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
@media screen and (max-width: 768px) {
.woodi-five-reasons {
min-height: auto;
padding: 60px 0 !important;
}
.woodi-five-reasons-inner {
width: 100%;
padding-top: 50px;
}
.woodi-five-reasons-headline,
.woodi-five-reasons .header-section {
padding-left: 20px;
padding-right: 20px;
}
.woodi-five-reasons .header-section {
margin-bottom: -75px;
}
.woodi-five-reasons .content-wrapper {
grid-template-columns: 1fr;
align-content: center;
gap: 20px;
min-height: 100svh;
padding: 100px 10px 0px;
}
.woodi-five-reasons .reasons-list li {
font-size: 20px;
padding-left: 45px;
margin-bottom: 16px;
}
.woodi-five-reasons .reasons-list li::before {
font-size: 20px;
}
.woodi-five-reasons .visual-content {
align-items: center;
gap: 25px;
}
.woodi-five-reasons .image-wrapper {
width: 100%;
height: 225px;
margin: 0 auto;
}
.woodi-btn-wrapper-desktop {
display: none;
}
.woodi-btn-wrapper-mobile {
display: flex;
width: 100%;
margin-top: 20px;
justify-content: center;
}
.woodi-btn-wrapper-mobile .woodi-btn {
width: 100%;
max-width: 320px;
text-align: center;
}
.woodi-five-reasons-nav {
display: none;
}
}.woodi-btn-wrapper {
width: 100%;
margin-bottom: 10px;
}
.woodi-btn {
--hov: 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
padding: 0.275rem 0.275rem 0.275rem 1.65rem;
border-radius: 2rem;
background: var(--btn-color, #ff5c63);
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color 300ms ease-out;
max-width: fit-content;
font-family: "Outfit";
font-weight: 500;
font-size: 1.2rem;
line-height: 1.2rem;
color: #042736;
}
.woodi-btn::after {
content: "\e902";
font-family: "woodi";
font-size: 0.9rem;
padding: 0.4rem;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--btn-hover, #0a2233);
color: hsla(0, 0%, 100%, var(--hov));
font-weight: 100;
transform: scale(calc(0.15 + var(--hov) * 0.85));
transition: transform 300ms ease-out, color 300ms ease-out;
}
.woodi-btn:hover,
.woodi-btn:focus {
--hov: 1;
color: #042736;
}
a[href^='mailto'].woodi-btn, a.woodi-btn,  {
text-decoration: none;
}:root {
--filled-circle-start: 75;
--filled-circle-end: 350;
}
@media screen and (max-width: 768px) {
:root {
--filled-circle-start: 50;
--filled-circle-end: 220;
}
} .scroll-scene {
position: relative;
} .scroll-scene-bg {
position: fixed;
inset: 0;
height: 120vh;
pointer-events: none;
z-index: 0; 
opacity: 0;    
transition: opacity 0.3s ease;
}
.scroll-scene-bg img {
position: absolute; left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1.12);
transform-origin: top center;
width: 100%;
height: 100%;
object-fit: cover;
will-change: transform;
} .scroll-text-section {
position: relative;
min-height: 300vh;
width: 100%;
z-index: 1; } .scroll-text-sticky {
position: sticky !important;
top: 100px !important;
height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 2;
} [data-circle="outline"] {
aspect-ratio: 1 / 1;
width: 100vmax;
border: 1px solid white;
border-radius: 50%;
opacity: 0.6;
pointer-events: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
z-index: 1;
}
[data-circle="filled"] {
aspect-ratio: 1 / 1;
width: 100vmax;
background: rgba(0,0,0,0.4);
border-radius: 50%;
pointer-events: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
z-index: 2;
clip-path: circle(50%);
}
.scroll-text-box {
position: relative;
text-align: center;
color: white;
padding: 2rem;
z-index: 10;
}
.scroll-text-item {
opacity: 0;
transition: opacity 0s;
position: absolute;
inset: 0;
width: 80%;
margin: auto;
letter-spacing: 3px;
}
.scroll-text-item.active {
opacity: 1;
position: relative;
transition: opacity 1.25s ease-in-out;
}
.scroll-text-sticky {
position: relative;
}
.scroll-text-disclaimers {
position: absolute;
left: 8vw;
bottom: 0;
max-width: 60vw;
z-index: 10;
}
.scroll-text-disclaimer {
text-align: left;
color: #fff;
font-size: 16px;
margin-bottom: 25px;
background: rgb(0 0 0 / 35%);
padding: 12px 24px;
border-radius: 15px;
}
.scroll-text-disclaimer {
display: none;
}
.scroll-text-sticky.state-1 .scroll-text-disclaimer.d1,
.scroll-text-sticky.state-2 .scroll-text-disclaimer.d2,
.scroll-text-sticky.state-3 .scroll-text-disclaimer.d3 {
display: flex;
gap: 10px;
}
@media screen and (max-width: 768px) {
.scroll-text-line {
font-size: 8vw !important;
}
.scroll-text-item {
width: 90%;
}
[data-circle="filled"] {
width: 50vmax;
}
.scroll-text-disclaimers {
position: absolute;
bottom: 0;
left: auto;
max-width: 100%;
max-height: max-content;
margin: 30px 10px 0;
}
.scroll-text-sticky {
top: 20px !important;
}
}@media screen and (max-width: 768px) {
.split-text {
flex-direction: column;
gap: 0 !important;
margin-bottom: 35px;
}
.split-left {
font-size: 55px !important;
}
.split-right {
font-size: 30px !important;
}
}.woodi-video__click-overlay {
position: absolute;
z-index: 2;
cursor: pointer;
}
.woodi-video {
position: relative;
width: 100%;
overflow: hidden;
}
.woodi-video__media,
.woodi-video__ratio-box,
.woodi-video__video,
.woodi-video__iframe-target,
.woodi-video iframe {
width: 100%;
border-radius: 15px;
}
.woodi-video__video {
display: block;
height: auto;
object-fit: cover;
}
.woodi-video__ratio-box {
position: relative;
}
.woodi-video--ratio-16-9 .woodi-video__ratio-box {
aspect-ratio: 16 / 9;
}
.woodi-video__iframe-target,
.woodi-video iframe {
position: absolute;
inset: 0;
height: 100%;
border: 0;
}
.woodi-video__play-btn,
.woodi-video__mute-btn {
position: absolute;
z-index: 5;
border: 0;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.woodi-video__play-btn {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background: url(//woodi.meplan.de/en//wp-content/uploads/2026/03/buttons-icons-wood-play.svg);
display: flex;
align-items: center;
justify-content: center;
}
.woodi-video__play-btn:hover {
transform: translate(-50%, -50%) scale(1.05);
}
.woodi-video__play-btn.is-hidden {
opacity: 0;
pointer-events: none;
}
.woodi-video__mute-btn {
top: 16px;
left: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgb(4 39 54 / 75%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.woodi-video__mute-icon--unmuted {
display: none;
}
.woodi-video__mute-btn.is-unmuted .woodi-video__mute-icon--muted {
display: none;
}
.woodi-video__mute-btn.is-unmuted .woodi-video__mute-icon--unmuted {
display: inline;
}
.fa-solid.fa-volume-xmark, .fa-solid.fa-volume-high {
font-family: 'Font Awesome 5 Free';
color: #fff;
font-size: 16px;
font-weight: 900;
font-style: normal;
}
.fa-volume-xmark:before {
content: "\f6a9";
}
.fa-volume-high:before {
content: "\f028";
}
.woodi-video__notice {
padding: 16px;
background: #f5f5f5;
border: 1px solid #ddd;
}
.woodi-video__iframe-target,
.woodi-video iframe {
z-index: 1;
}.st0,
.st1,
.st2 {
fill: #042736;
}
.st3 {
fill: #acd54f;
}
.st4 {
fill: #ff6872;
}
.st1,
.st2,
.st3,
.st4 {
fill-rule: evenodd;
}
#preloader {
--t: 2000ms;
--fade-dur: 350ms;
--text-delay: calc(var(--t) * 0.25);
--text-dur: calc(var(--t) * 0.5);
--dot-in-dur: calc(var(--t) * 0.35);
--dot-move-dur: calc(var(--text-dur) * 0.8);
--dot-move-delay: var(--text-delay);
--bg-fade-dur: calc(var(--t) * 1.2);
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 9999991;
overflow: hidden;
background: #fff;
}
html.preloader-pending #preloader {
display: flex;
}
html.preloader-skip #preloader {
display: none !important;
}
#preloader.is-active::after {
content: "";
position: absolute;
inset: 0;
background: url(https://woodi.meplan.de/wp-content/uploads/2026/04/woodi-preloader-background-scaled.webp) center/cover no-repeat;
z-index: 1;
opacity: 1;
animation: fadeOut var(--fade-dur) ease forwards;
animation-delay: calc(var(--t) * 1.2);
}
#woodi-by-meplan-logo {
position: relative;
z-index: 2;
max-width: 400px;
width: 100%;
height: auto;
opacity: 1;
overflow: visible;
}
#woodi-by-meplan-tex {
overflow: hidden;
}
#woodi-by-meplan-tex-inner {
will-change: transform;
}
#preloader.is-active #woodi-by-meplan-logo {
animation: fadeOut var(--fade-dur) ease forwards;
animation-delay: calc(var(--t) * 1);
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
#woodi-dot-koralle,
#woodi-dot-gruen {
opacity: 0;
transform-origin: 60% 25%;
}
#preloader.is-active #woodi-dot-koralle,
#preloader.is-active #woodi-dot-gruen {
animation:
dotIn var(--dot-in-dur) cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards,
dotsShrinkAndMove var(--dot-move-dur) ease-in forwards;
}
#preloader.is-active #woodi-dot-koralle {
animation-delay: 0s, var(--dot-move-delay);
}
#preloader.is-active #woodi-dot-gruen {
animation-delay: calc(var(--t) * 0.12), var(--dot-move-delay);
}
@keyframes dotIn {
0% {
opacity: 0;
transform: scale(0);
}
25% {
opacity: 1;
transform: scale(6);
}
45% {
opacity: 1;
transform: scale(5);
}
100% {
opacity: 1;
transform: scale(5);
}
}
@keyframes dotsShrinkAndMove {
0% {
transform: scale(5);
}
100% {
transform: scale(1);
}
}
.preloader-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
overflow: hidden;
z-index: 10113;
opacity: 1;
}
#preloader.is-active .preloader-progress {
animation: fadeOut var(--fade-dur) ease forwards;
animation-delay: calc(var(--t) * 1.2);
}
.preloader-progress-bar {
width: 0%;
height: 100%;
background: #042736;
transition: width var(--t) ease;
}
#preloader.wipe-out {
pointer-events: none;
}
.woodi-logo {
will-change: transform, opacity;
}
html.preloader-was-shown .woodi-logo {
transform-origin: 50% 100%;
will-change: transform;
opacity: 0;
transform: translateY(60%);
}
html.preloader-was-shown .woodi-intro-1 {
height: 300px;
transform-origin: 50% 100%;
will-change: transform;
opacity: 0;
transform: translateY(50%);
}
html.preloader-was-shown .woodi-intro-2 {
height: fit-content;
transform-origin: 50% 100%;
will-change: transform;
opacity: 0;
transform: translateY(100%);
}
html.preloader-was-shown.woodi-logo-reveal-start .woodi-logo {
animation: woodiLogoRevealUp 700ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
html.preloader-was-shown.woodi-logo-reveal-start .woodi-intro-1,
html.preloader-was-shown.woodi-logo-reveal-start .woodi-intro-2 {
animation: woodiLogoRevealUp 1000ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes woodiLogoRevealUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (max-width:768px) {
html.preloader-was-shown .woodi-intro-1 {
height: fit-content;
}
#woodi-by-meplan-logo {
max-width: 250px;
}
}