@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//oekokiste-leipzig.de/wp-content/themes/imablo-child/assets/landing/fonts/Ubuntu-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//oekokiste-leipzig.de/wp-content/themes/imablo-child/assets/landing/fonts/Ubuntu-Medium.woff2) format('woff2');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//oekokiste-leipzig.de/wp-content/themes/imablo-child/assets/landing/fonts/Ubuntu-Bold.woff2) format('woff2');
} .lp-page *,
.lp-page *::before,
.lp-page *::after { box-sizing: border-box; }
.lp-page {
font-family: Ubuntu, Helvetica, Arial, sans-serif;
color: #666666;
background: #ffffff;
width: 100%;
overflow-x: hidden;
margin: 0;
}
.lp-page img { max-width: 100%; }
.lp-page h1,
.lp-page h2,
.lp-page h3,
.lp-page p,
.lp-page ol,
.lp-page ul { margin: 0; } .lp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
font-family: inherit;
font-weight: 500;
color: #ffffff;
background: #57b03c;
border: 1px solid #57b03c;
border-radius: 3px;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.lp-btn:hover,
.lp-btn:focus-visible {
background: #e7622a;
border-color: #e7622a;
color: #ffffff;
}
.lp-btn--hero {
width: 100%;
max-width: 340px;
min-height: 56px;
padding: 14px 28px;
font-size: 18px;
}
.lp-btn--kontakt {
width: 100%;
max-width: 340px;
min-height: 52px;
padding: 12px 24px;
font-size: 18px;
}
.lp-page a:focus-visible,
.lp-page button:focus-visible {
outline: 3px solid #e7622a;
outline-offset: 2px;
}  .lp-hero {
background: #faf3e7;
width: 100%;
overflow-x: hidden;
overflow-x: clip;
} .lp-hero__grid {
display: grid;
grid-template-columns: 1fr;
align-items: center;
max-width: 1240px;
margin: 0 auto;
}
.lp-hero__text {
position: relative;
padding: 24px 20px 8px;
width: 100%;
max-width: 660px;
margin: 0 auto;
display: flex;
flex-direction: column;
} .lp-hero__deco {
position: absolute;
z-index: 0;
pointer-events: none;
}
.lp-hero__deco--a {
top: 10px;
left: -40px;
width: 300px;
height: 250px;
background: #eaf3df;
border-radius: 62% 38% 55% 45% / 52% 60% 40% 48%;
}
.lp-hero__deco--b {
top: 120px;
right: -30px;
width: 150px;
height: 130px;
background: #f2e7d3;
border-radius: 48% 52% 38% 62% / 60% 42% 58% 40%;
}
.lp-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 26px;
align-items: flex-start;
} .lp-hero__headings {
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-hero__title {
margin: 0;
font-size: clamp(38px, 10.4vw, 50px);
line-height: 1.05;
font-weight: 700;
color: #57b03c;
}
.lp-hero__subtitle {
margin: 0;
font-size: clamp(22px, 5.6vw, 30px);
line-height: 1.2;
font-weight: 500;
color: #666666;
}
.lp-hero__subtitle span { display: block; }
.lp-steps {
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.lp-steps li {
display: flex;
align-items: center;
gap: 12px;
font-size: 17px;
font-weight: 500;
color: #666666;
}
.lp-steps__num {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: #57b03c;
color: #ffffff;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.lp-hero__media {
position: relative;
overflow: hidden;
padding: 0 20px 0;
display: flex;
align-items: center;
justify-content: center;
}
.lp-hero__blob {
position: absolute;
display: none;
width: 82%;
max-width: 560px;
aspect-ratio: 1 / 1;
background: #f4ead8;
border-radius: 54% 46% 60% 40% / 46% 58% 42% 54%;
}
.lp-hero__img {
position: relative;
width: 100%;
max-width: 540px;
height: auto;
object-fit: contain;
display: block;
filter: drop-shadow(0 26px 26px rgba(87, 90, 60, 0.28));
} .lp-form {
padding: 32px 20px 44px;
background: #f5f5f5;
}
.lp-form__grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 24px 32px;
align-items: start;
} .lp-form__pic {
display: block;
width: 100%;
order: 2;
position: static;
top: 20px;
text-align: center;
} .lp-page .lp-form__img {
display: block;
width: 100%;
max-width: 540px; height: auto;
max-height: none; margin: 0 auto; aspect-ratio: var(--lp-img-ratio, auto);
object-fit: contain;
border-radius: 4px;
}
.lp-form__col {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
max-width: 700px;
}
.lp-h2 {
font-size: 26px;
line-height: 1.25;
font-weight: 500;
color: #57b03c;
text-wrap: pretty;
} .lp-formbox {
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 18px;
background: #ffffff;
display: flex;
flex-direction: column;
gap: 18px;
} .lp-formbox--placeholder { border: 2px dashed #57b03c; }
.lp-formbox__note {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
line-height: 1.4;
color: #57b03c;
} .lp-badge {
display: inline-flex;
align-items: center;
flex: none;
padding: 6px 10px;
border-radius: 3px;
background: #57b03c;
color: #ffffff;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.lp-badge--orange { background: #e7622a; } .lp-detail {
padding: 8px 20px 44px;
background: #f5f5f5;
}
.lp-detail__inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.lp-detail__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.lp-detail__item {
display: flex;
gap: 12px;
align-items: flex-start;
} .lp-detail__marker {
flex: none;
width: 22px;
height: 22px;
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
color: #57b03c;
}
.lp-detail__icon {
width: 22px;
height: 22px;
display: block;
} .lp-detail__marker--dot::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: #57b03c;
} .lp-detail__text {
font-size: 17px;
line-height: 1.55;
color: #666666;
text-wrap: pretty;
} .lp-detail__text .lp-badge {
padding: 2px 8px;
font-size: 0.9em;
line-height: 1.4;
vertical-align: baseline;
} .lp-detail__note {
font-size: 17px;
line-height: 1.55;
color: #666666;
}
.lp-detail__note strong {
color: #57b03c;
font-weight: 500;
} .lp-next {
padding: 40px 20px 44px;
background: #ffffff;
}
.lp-next__inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.lp-next__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 28px;
align-items: center;
}
.lp-next__list {
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
}
.lp-next__list li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.lp-next__num {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background: #57b03c;
color: #ffffff;
font-size: 17px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
.lp-next__text {
font-size: 17px;
line-height: 1.55;
color: #666666;
text-wrap: pretty;
}
.lp-next__img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 4px;
display: block;
} .lp-kontakt {
padding: 36px 20px 88px;
background: #f5f5f5;
}
.lp-kontakt__inner {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
}
.lp-kontakt__daten {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 17px;
line-height: 1.55;
color: #666666;
}
.lp-kontakt__daten a { color: #57b03c; }
.lp-kontakt__zeiten {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 16px;
line-height: 1.5;
color: #666666;
}
.lp-footer {
width: 100%;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #dddddd;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 14px;
color: #666666;
}
.lp-footer a { color: #666666; }
.lp-footer a:hover { color: #e7622a; } .lp-sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid #dddddd;
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
transform: translateY(110%);
transition: transform .18s ease;
}
.lp-sticky.is-visible { transform: translateY(0); }
.lp-sticky .lp-btn {
width: 100%;
min-height: 48px;
padding: 10px 20px;
font-size: 17px;
} .lp-danke {
padding: 48px 20px 56px;
background: #faf3e7;
min-height: 60vh;
display: flex;
align-items: center;
}
.lp-danke__inner {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}  .lp-page .lp-danke__logo {
display: block;
align-self: center;
width: 100%;
max-width: 180px;
height: auto;
margin: 0 0 12px;
}
.lp-danke__title {
font-size: clamp(28px, 6.8vw, 36px);
line-height: 1.15;
font-weight: 700;
color: #57b03c;
}
.lp-danke__text {
font-size: 17px;
line-height: 1.55;
color: #666666;
text-wrap: pretty;
}  .lp-page .fluent_form_9 .ff-el-form-check:has(input[name="kiste"]) {
margin: 0 0 10px;
padding: 0;
}
.lp-page .fluent_form_9 .ff-el-form-check-label:has(input[name="kiste"]) {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 56px;
margin: 0;
padding: 14px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 3px;
cursor: pointer;
transition: border-color .15s ease;
}
.lp-page .fluent_form_9 .ff-el-form-check-label:has(input[name="kiste"]):hover {
border-color: #57b03c;
} .lp-page .fluent_form_9 .ff-el-form-check-label:has(input[name="kiste"]:checked) {
border-color: #57b03c;
} .lp-page .fluent_form_9 .ff-el-form-check-label input[name="kiste"] {
flex: none;
width: 20px;
height: 20px;
margin: 0;
accent-color: #57b03c;
} .lp-page .fluent_form_9 .ff-el-form-check-label:has(input[name="kiste"]) > span {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
font-size: 15px;
line-height: 1.35;
color: #666666;
}
.lp-page .fluent_form_9 .ff-el-form-check-label .lp-badge {
margin-left: auto;
}  .lp-page .fluent_form_9 .ff_list_buttons .ff-el-form-check .ff-el-form-check-label > span {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 18px;
font-size: 16px;
line-height: 1.35;
color: #666666;
background: #ffffff;
border: 1px solid #dddddd;
border-color: #dddddd !important;
border-radius: 3px;
cursor: pointer;
transition: color .15s ease, background-color .15s ease, border-color .15s ease;
} .lp-page .fluent_form_9 .ff_list_buttons .ff-el-form-check .ff-el-form-check-label > span:hover {
color: #ffffff !important;
background: #e7622a;
border-color: #e7622a !important;
} .lp-page .fluent_form_9 .ff_list_buttons .ff-el-form-check.ff_item_selected .ff-el-form-check-label > span {
color: #ffffff;
background-color: #57b03c !important;
border-color: #57b03c !important;
} .lp-page .fluent_form_9 .ff_list_buttons .ff-el-form-check.ff_item_selected .ff-el-form-check-label > span:hover {
color: #ffffff !important;
background-color: #e7622a !important;
border-color: #e7622a !important;
} .lp-page .fluent_form_9 .ff_list_buttons .ff-el-form-check .ff-el-form-check-label:focus-within > span {
outline: 3px solid #e7622a;
outline-offset: 2px;
} .lp-page .fluent_form_9 .ff-custom_html .lp-badge,
.lp-page .fluent_form_9 .lp-badge {
display: inline-flex;
align-items: center;
vertical-align: baseline;
padding: 2px 8px;
border-radius: 3px;
background: #57b03c;
color: #ffffff;
font-size: 0.9em;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
} .lp-page .fluent_form_9 .ff-custom_html p {
font-size: 13px;
line-height: 1.6;
color: #666666;
}  .lp-page .fluent_form_9 .step-nav {
display: flex;
flex-direction: column; align-items: stretch;
gap: 10px;
}
.lp-page .fluent_form_9 .ff-btn.ff-btn-next,
.lp-page .fluent_form_9 .ff-btn.ff-btn-prev,
.lp-page .fluent_form_9 .ff-btn.ff-btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%; min-height: 52px;
padding: 12px 24px;
font-family: inherit;
font-size: 18px;
font-weight: 500;
line-height: 1.2;
border-radius: 3px;
box-shadow: none;
text-shadow: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
} .lp-page .fluent_form_9 .ff-btn.ff-btn-next,
.lp-page .fluent_form_9 .ff-btn.ff-btn-submit {
color: #ffffff;
background: #57b03c;
border: 1px solid #57b03c;
}
.lp-page .fluent_form_9 .ff-btn.ff-btn-next:hover,
.lp-page .fluent_form_9 .ff-btn.ff-btn-next:focus-visible,
.lp-page .fluent_form_9 .ff-btn.ff-btn-submit:hover,
.lp-page .fluent_form_9 .ff-btn.ff-btn-submit:focus-visible {
color: #ffffff;
background: #e7622a;
border-color: #e7622a;
} .lp-page .fluent_form_9 .ff-btn.ff-btn-prev {
color: #57b03c;
background: transparent;
border: 1px solid #57b03c;
}
.lp-page .fluent_form_9 .ff-btn.ff-btn-prev:hover,
.lp-page .fluent_form_9 .ff-btn.ff-btn-prev:focus-visible {
color: #e7622a;
background: transparent;
border-color: #e7622a;
} .lp-page .fluent_form_9 .ff-el-progress {
height: 6px;
margin: 0 0 6px;
background: #e5e5e5;
border-radius: 3px;
overflow: hidden;
}
.lp-page .fluent_form_9 .ff-el-progress .ff-el-progress-bar {
height: 100%;
background: #57b03c;
border-radius: 3px;
} .lp-page .fluent_form_9 .ff-el-progress .ff-el-progress-bar > span {
display: none;
} @media (min-width: 780px) {
.lp-hero__grid {
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.lp-hero__text { padding: 44px 20px 40px; } .lp-hero__inner { container-type: inline-size; }
.lp-hero__title {
font-size: 50px;
font-size: clamp(36px, 9.6cqi, 50px);
}
.lp-hero__media { padding: 10px 20px 34px; }
.lp-hero__blob { display: block; } .lp-form__grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.lp-form__pic {
order: 0; position: sticky;
text-align: initial;
}
.lp-page .lp-form__img {
width: 100%;
height: auto;
max-height: none;
margin: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
} .lp-detail { padding: 8px 20px 48px; }
.lp-detail__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
column-gap: 40px;
row-gap: 16px;
}
.lp-kontakt { padding: 36px 20px 44px; } .lp-sticky { display: none !important; } .lp-page .fluent_form_9 .step-nav {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
} .lp-page .fluent_form_9 .ff-btn.ff-btn-next,
.lp-page .fluent_form_9 .ff-btn.ff-btn-prev,
.lp-page .fluent_form_9 .ff-btn.ff-btn-submit {
width: auto;
min-width: 220px;
} .lp-page .fluent_form_9 .ff-el-form-check-label:has(input[name="kiste"]) > span {
font-size: 16px;
}
} @media (prefers-reduced-motion: reduce) {
.lp-page *,
.lp-page *::before,
.lp-page *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}