@font-face
{
font-family: 'HelveticaNowText';
font-weight: normal;
font-style: normal;
src: url(//www.contractubex.at/wp-content/themes/contractubex/fonts/open-sans-v23-latin-regular.woff2) format('woff2'),
url(//www.contractubex.at/wp-content/themes/contractubex/fonts/open-sans-v23-latin-regular.woff) format('woff');
font-display: swap;
}
@font-face
{
font-family: 'HelveticaNowText';
font-weight: 300;
font-style: normal;
src: url(//www.contractubex.at/wp-content/themes/contractubex/fonts/open-sans-v23-latin-300.woff2) format('woff2'),
url(//www.contractubex.at/wp-content/themes/contractubex/fonts/open-sans-v23-latin-300.woff) format('woff');
font-display: swap;
}
@font-face
{
font-family: 'HelveticaNowText';
font-weight: 500;
font-style: normal;
src: url(//www.contractubex.at/wp-content/themes/contractubex/fonts/open-sans-v23-latin-600.woff2) format('woff2'),
url(//www.contractubex.at/wp-content/themes/contractubex/fonts/open-sans-v23-latin-600.woff) format('woff');
font-display: swap;
}
html
{
box-sizing: border-box;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin: 0;
}
:root
{
--yellow: #fd0;
--navbar-height: 6.25rem;
--navbar-border-width: 10px;
--light-gray: #f4f4f4;
--gray: #edeff0;
--gutter: 1rem;
--content-max-width-l: none;
--content-max-width-s: none;
--menu-item-padding: 0;
}
@media (min-width: 768px)
{
:root
{
--gutter: 2rem;
--content-max-width-l: 78rem;
--content-max-width-s: 62.875rem;
--navbar-border-width: 15px;
--menu-item-padding: .5rem;
}
}
@media (min-width: 1024px)
{
:root
{
--navbar-height: 8.4375rem;
}
}
html
{
font-size: 16px;
scroll-behavior: smooth;
}
body
{
font: 1rem/1.75 'HelveticaNowText', sans-serif;
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6
{
font-size: inherit;
margin: 0;
}
p,
ul,
ol
{
margin: 0 0 1.5rem 0;
}
ul,
ol
{
padding-left: 1.5em;
}
ol
{
list-style: none;
counter-reset: ol-counter;
}
ol li
{
position: relative;
counter-increment: ol-counter;
}
ol li::before
{
position: absolute;
top: 0;
left: -1.25em;
content: counter(ol-counter) '. ';
}
a
{
color: inherit;
}
a:hover
{
text-decoration: none;
}
img
{
display: block;
max-width: 100%;
height: auto;
}
strong
{
font-weight: 500;
}
:last-child
{
margin-bottom: 0;
}
[class^='container'],
[class*=' container']
{
position: relative;
margin: 0 auto;
padding: 0 var(--gutter);
}
.container-l
{
max-width: var(--content-max-width-l);
}
.container-s
{
max-width: var(--content-max-width-s);
}
.main-content
{
margin-top: calc(var(--navbar-height) + var(--navbar-border-width));
}
.section
{
position: relative;
}
.block
{
padding: 2rem 0;
}
.anchor
{
position: absolute;
top: -6.25rem;
}
.button
{
font-size: 1rem;
line-height: 1.4;
display: inline-block;
padding: .625rem 1.75rem;
text-decoration: none;
letter-spacing: .12em;
text-transform: uppercase;
background: var(--yellow);
}
.button:hover
{
text-decoration: underline;
}
.section[data-color='yellow']
{
background: var(--yellow);
}
.section[data-color='gray']
{
background: var(--gray);
}
@media (min-width: 768px)
{
p,
ul
{
margin-bottom: 2rem;
}
.block
{
padding: 5rem 0 7rem 0;
}
} figure.quote
{
display: flex;
flex-direction: column;
margin: 0;
gap: 1rem;
}
figure.quote > blockquote
{
font-weight: 500;
font-style: italic;
margin: 0;
}
figure.quote > blockquote p::before
{
content: '„';
}
figure.quote > blockquote p::after
{
content: '“';
}
figure.quote > figcaption
{
font-size: 1.25rem;
}
figure.quote > figcaption::before
{
content: '— ';
} .sources
{
font-size: .875rem;
max-width: 36.875rem;
padding: 1rem 1.25rem 0.75rem 1.25rem;
line-height: normal;
color: #52646c;
border-radius: .625rem;
background: var(--gray);
}
.section[data-color='gray'] .sources
{
background: #fff;
}
.sources-title
{
font-weight: 500;
font-size: .9375rem;
margin: 0 0 0.375rem 0;
}
.sources ul 
{
padding-left: 0.875rem;
}
.sources li 
{
margin: 0 0 0.375rem 0;
}
.sources a 
{
color: #52646c;
} .burger
{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.burger > span
{
top: 50%;
}
.burger > span,
.burger > span::before,
.burger > span::after
{
width: 100%;
height: 2px;
transition: .2s;
background: currentColor;
}
.burger > span::before,
.burger > span::after
{
position: absolute;
display: block;
content: '';
}
.burger > span::before
{
top: 0;
}
.burger > span::after
{
top: 100%;
transform: translateY(-100%);
}
.open .burger > span
{
background: transparent;
}
.open .burger > span::before
{
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.open .burger > span::after
{
top: 50%;
transform: translateY(-50%) rotate(-45deg);
} .dropdown-toggle
{
cursor: pointer;
}
.dropdown
{
display: none;
overflow: hidden;
transition: .2s;
} .navbar
{
font-size: 1.125rem;
position: fixed;
z-index: 100;
top: 0;
width: 100%;
color: #52646c;
border-top: var(--navbar-border-width) solid var(--yellow);
background: #fff;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .1);
}
.navbar-container
{
max-width: var(--content-max-width-l);
margin: 0 auto;
}
.navbar-brand
{
display: flex;
align-items: center;
justify-content: space-between;
height: var(--navbar-height);
}
.navbar-logo
{
display: block;
color: inherit;
}
.navbar-logo svg
{
width: 100%;
height: 100%;
}
.navbar-burger
{
width: 1.875rem;
height: 1.75rem;
}
.navbar-dropdown
{
background: #fff;
}
.navbar-dropdown ul
{
margin: 0;
padding: 0;
text-align: center;
}
.navbar-dropdown li
{
display: block;
border-width: 1px;
border-color: var(--yellow);
border-top-style: solid;
border-bottom-style: solid;
}
.navbar-dropdown .current_page_item
{
background: var(--yellow);
}
.navbar-dropdown li + li
{
border-top: none;
}
.navbar-dropdown a
{
display: block;
padding: 1.5rem 0;
text-decoration: none;
}
.navbar-logo img
{
width: 9rem;
}
@media (min-width: 375px)
{
.navbar-logo img
{
width: 11rem;
}
}
.button-menu {
display: none;
}
.button-menu-mobile {
position: absolute;
right: 3.875rem;
}
.button-menu-mobile a span {
display: none;
}
@media (min-width: 768px)
{
.button-menu-mobile {
right: 5.75rem;
}
.button-menu-mobile a span {
display: inline-block;
}
}
@media (min-width: 1140px)
{
.button-menu-mobile {
display: none;
}
.navbar-brand
{
padding: 0;
}
.navbar-burger
{
display: none;
}
.navbar-container
{
display: flex;
justify-content: space-between;
padding: 0 var(--gutter);
gap: 2rem;
}
.navbar-dropdown
{
display: flex !important;
align-items: center;
flex: 1;
height: auto !important;
margin-right: calc(var(--menu-item-padding) * -1);
background: none;
}
.navbar-dropdown > div
{
display: flex;
align-items: flex-end;
flex-direction: column;
width: 100%;
}
.navbar-dropdown ul
{
display: flex;
justify-content: space-between; margin: 0;
}
.navbar-dropdown li
{
border: none;
}
.navbar-dropdown .menu a
{
position: relative;
padding: var(--menu-item-padding);
}
.navbar-dropdown .menu a:hover,
.navbar-dropdown .menu .current_page_item a
{
background: var(--yellow);
}
.navbar-dropdown .menu a:hover::before,
.navbar-dropdown .menu .current_page_item a::before
{
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 500px;
content: '';
background: var(--yellow);
}
.navbar-dropdown > .button-menu {
display: block;
width: auto;
white-space: nowrap;
margin-left: 2rem;
}
}
.button-menu a, .button-menu-mobile a
{
font-size: 0.75rem;
line-height: 1.4;
display: inline-block;
padding: .375rem .375rem;
text-decoration: none;
letter-spacing: .12em;
text-transform: uppercase;
color: black;
background: var(--yellow);
}
@media (min-width: 375px)
{
.button-menu a, .button-menu-mobile a
{
font-size: 0.875rem;
}
}
@media (min-width: 768px)
{
.button-menu a, .button-menu-mobile a
{
font-size: 1rem;
padding: .375rem .625rem;
}
.navbar-logo img
{
width: 16rem;
}
}
.button-menu a:hover
{
text-decoration: underline;
}
@media (min-width: 1024px)
{
.navbar
{
font-size: 1.125rem;
}
.navbar-container
{ }
.navbar-logo img
{
width: 22rem;
}
.navbar-dropdown ul
{
gap: 1rem;
}
} .page-header
{
background: var(--light-gray);
}
.page-header .hero
{
position: relative;
}
.page-header .hero-bg
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-header .hero-bg img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.page-header .hero-content
{
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 19.5rem;
}
.page-header .hero h1
{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.1;
max-width: 21rem;
margin-bottom: 1rem;
padding: .875rem 1rem 1.125rem 1.25rem;
color: #52646c;
background: rgba(255, 221, 0, .75);
}
.page-header .row
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
@media (min-width: 768px)
{
.page-header .hero-bg
{
right: 0;
left: 0;
max-width: 1900px;
margin: 0 auto;
}
.page-header .hero-content
{
min-height: 38.625rem;
}
.page-header .hero h1
{
font-size: 2.875rem;
max-width: 23rem;
margin-bottom: 3.125rem;
}
.page-header .row
{
flex-direction: row;
gap: 4rem;
}
.page-header .col
{
flex: 1;
}
} .block[data-layout='tip']
{
background: #edeff0;
}
.block[data-layout='tip'] .row
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.tip__extra
{
line-height: 1.6;
padding: .75rem 1.5rem;
color: #52646c;
border-radius: .625rem;
background: var(--yellow);
}
@media (min-width: 768px)
{
.block[data-layout='tip']
{
padding: 3rem 0;
}
.block[data-layout='tip'] .row
{
align-items: center;
flex-direction: row;
}
.tip__left
{
flex: 1;
}
.tip__text
{
max-width: 26rem;
}
.tip__extra
{
max-width: 20.3125rem;
}
} .block[data-layout='hint']
{
background: #fff8cf;
}
.block[data-layout='hint'] .row
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.hint__title
{
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
}
.hint__text
{
font-size: 1rem;
}
@media (min-width: 768px)
{
.block[data-layout='hint']
{
padding: 3rem 0;
}
.block[data-layout='hint'] .row
{
flex-direction: row;
}
.hint__left
{
flex: 6;
}
.hint__right
{
flex: 7;
}
.hint__title
{
max-width: 22rem;
}
} .block[data-layout='post'] h1
{
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.3;
margin-bottom: 1.75rem;
}
.post__content
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.post__text h2
{
font-size: 1.125rem;
font-weight: 500;
line-height: normal;
margin-bottom: 1rem;
}
.post__text a:hover
{
text-decoration: none;
}
.post__image
{
max-width: 28.4375rem;
}
.post__image img
{
width: 100%;
}
@media (min-width: 768px)
{
.block[data-layout='post'] h1
{
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
.post__content
{
flex-direction: row-reverse;
gap: 3rem;
}
.post__image
{
flex: 2;
}
.post__text
{
flex: 3;
}
.post__text-inner
{
max-width: 36.875rem;
}
}
.post__text-inner .notes
{
font-size: 0.875rem;
margin: 0 0 2rem 0;
}
.post__text-inner .notes p
{
margin: 0 0 0.5rem 0;
} .block[data-layout='index'] h1
{
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.3;
max-width: 50rem;
margin-bottom: 1.75rem;
}
.index__intro
{
max-width: 46rem;
}
.index__posts
{
display: flex;
align-items: center;
flex-direction: column;
margin-top: 3rem;
gap: 1.875rem;
}
.index__posts .post-item
{
flex: 1;
width: 100%;
max-width: 22.125rem;
}
@media (min-width: 600px)
{
.index__posts
{
display: grid;
align-items: stretch;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
}
@media (min-width: 768px)
{
.block[data-layout='index'] h1
{
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
.index__posts
{
gap: 3.8125rem;
}
.index__posts .post-item
{
width: auto;
max-width: none;
}
} .post-item
{
display: flex;
flex-direction: column;
background: var(--gray);
}
.post-item h2
{
font-size: 1.25rem;
font-weight: 500;
line-height: 1.3;
}
.post-item a
{
text-decoration: none;
}
.post-item a:hover
{
text-decoration: underline;
}
.post-item-image
{
position: relative;
display: block;
padding-bottom: 76.836158192090395%;
background: var(--yellow);
}
.post-item-image img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.post-item-text
{
display: flex;
align-items: flex-start;
flex: 1;
flex-direction: column;
justify-content: space-between;
padding: 1.25rem;
gap: .875rem;
}
.post-item-link a
{
display: block;
padding: .5rem 1.5rem;
text-decoration: none;
letter-spacing: .125rem;
text-transform: uppercase;
border: 1px solid;
} .block[data-layout='magazine'] h1
{
font-size: 1.5rem;
}
.magazine__content
{
display: flex;
flex-direction: column;
gap: 3.8125rem;
}
.magazine__intro h1
{
margin-bottom: 1.5rem;
}
.magazine__text
{
margin-bottom: 1.75rem;
}
.magazine__posts
{
display: flex;
align-items: center;
flex-direction: column;
gap: 1.875rem;
}
.magazine__posts .post-item
{
width: 100%;
max-width: 22.125rem;
}
@media (min-width: 600px)
{
.magazine__content
{
align-items: start;
}
.magazine__posts
{
display: grid;
align-items: stretch;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 768px)
{
.magazine__posts
{
gap: 3.8125rem;
}
}
@media (min-width: 1024px)
{
.magazine__content
{
align-items: flex-start;
flex-direction: row;
}
.magazine__posts
{
max-width: 48.0625rem;
}
.magazine__text
{
max-width: 20rem;
}
} .block[data-layout='info']
{
padding: 2rem 0;
background: var(--light-gray);
}
.block[data-layout='info'] .row
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.info__title
{
font-size: 1.375rem;
font-weight: 500;
line-height: 1.4;
color: #52646c;
}
.info__title + .info__button
{
margin-top: 1.75rem;
}
@media (min-width: 768px)
{
.block[data-layout='info']
{
padding: 6.25rem 0;
}
.block[data-layout='info'] .row
{
flex-direction: row;
gap: 4rem;
}
.block[data-layout='info'] .col
{
flex: 1;
}
.info__right
{
display: flex;
align-items: stretch;
justify-content: flex-end;
}
.info__right-inner
{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: 29rem;
gap: 2rem;
}
.info__text
{
min-width: 24rem;
}
.info__title
{
font-size: 1.5rem;
max-width: 20rem;
}
.info__title + .info__button
{
margin: 0;
}
} .block[data-layout='sources']
{
padding: 3rem 0 0 0;
}
.section[data-color='gray'] .block[data-layout='sources'] {
padding-bottom: 3rem;
} .block[data-layout='text'] h1
{
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.3;
max-width: 50rem;
margin-bottom: 1.75rem;
}
.text__sections
{
display: flex;
flex-direction: column;
gap: 2rem;
}
.text__text
{
max-width: 43.75rem;
}
.text__image + .text__text
{
margin-top: 1.75rem;
}
@media (min-width: 768px)
{
.block[data-layout='text']
{
padding-bottom: 5.5rem;
}
.block[data-layout='text'] h1
{
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
.text__sections
{
gap: 5.25rem;
}
.text__section.has-image
{
display: flex;
gap: 4rem;
}
.text__section.has-image:nth-child(odd)
{
flex-direction: row;
}
.text__section.has-image:nth-child(odd)
{
flex-direction: row-reverse;
}
.text__image
{
display: flex;
flex: 2;
flex-direction: column;
}
.text__image + .text__text
{
margin-top: 0;
}
.text__section.has-image:nth-child(odd) .text__image
{
align-items: flex-end;
}
.text__section.has-image:nth-child(even) .text__image
{
align-items: flex-start;
}
.text__section.has-image .text__text
{
display: flex;
flex: 3;
flex-direction: column;
}
.text__section.has-image:nth-child(odd) .text__text
{
align-items: flex-start;
}
.text__section.has-image:nth-child(even) .text__text
{
align-items: flex-end;
}
.text__section.has-image .text__text-inner
{
max-width: 30.25rem;
}
} .block[data-layout='checklist'] h1
{
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.3;
margin-bottom: 1.75rem;
}
.checklist__sections
{
display: flex;
flex-direction: column;
gap: 2rem;
}
.checklist__section::before
{
display: block;
width: 100%;
height: 2.75rem;
margin-bottom: 1rem;
content: '';
background: url(//www.contractubex.at/wp-content/themes/contractubex/img/check.svg) no-repeat top left/contain;
}
section#narbentypen
{
background: var(--gray);
}
@media (min-width: 768px)
{
.block[data-layout='checklist'] h1
{
font-size: 2.5rem;
}
.checklist__sections
{
flex-direction: row;
justify-content: space-between;
gap: 3rem;
}
.checklist__section
{
flex: 1;
max-width: 16rem;
}
} .block[data-layout='product']
{
padding-top: 2.625rem;
}
.block[data-layout='product'] .row
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.product__image
{
display: flex;
align-items: center;
flex-direction: column;
}
.product__text
{
font-size: 1.375rem;
line-height: 1.5;
display: flex;
flex-direction: column;
gap: 1.875rem;
}
@media (min-width: 768px)
{
.block[data-layout='product']
{
padding: 6.5rem 0 7rem;
}
.block[data-layout='product'] .row
{
flex-direction: row;
}
.block[data-layout='product'] .col
{
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
}
.product__right
{
align-items: flex-end;
}
.product__text
{
font-size: 1.5rem;
width: 100%;
max-width: 29rem;
padding-left: 4rem;
}
.product__text-inner
{
max-width: 24rem;
}
}
@media (min-width: 1200px)
{
.product__text
{
padding-left: 0;
}
} .block[data-layout='special']
{
background: var(--yellow);
}
.block[data-layout='special'] .row
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.block[data-layout='special'] h1
{
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.3;
margin-bottom: 1rem;
}
.special__figures
{
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.special__figure
{
display: flex;
align-items: flex-start;
flex-direction: column;
padding-right: var(--lable-padding);
--lable-padding: 5rem;
}
.special__figure__title
{
font-weight: 500;
margin-bottom: 1rem;
}
.special__figure__figure
{
position: relative;
}
.special__figure__image
{
background: #fff;
}
.special__figure__image img
{
border: 2px solid #52646c;
}
.special__figure__labels
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.special__figure__label
{
position: absolute;
right: calc(var(--lable-padding) * -1);
display: flex;
align-items: flex-end;
flex-direction: column;
border-top: 2px solid #52646c;
}
.special__figure__label-inner
{
font-size: .875rem;
line-height: 1.4;
max-width: 5rem;
padding: .5rem 0 0 0;
text-align: right;
}
@media (min-width: 768px)
{
.block[data-layout='special']
{
padding: 5rem 0 7rem;
}
.block[data-layout='special'] .row
{
flex-direction: row;
gap: 0;
}
.block[data-layout='special'] h1
{
font-size: 2.5rem;
margin-bottom: 2rem;
}
.special__left
{
display: flex;
align-items: flex-end;
flex: 1;
flex-direction: column;
}
.special__right
{
flex: 1;
}
.special__text
{
max-width: 30rem;
}
.special__left .special__content
{
max-width: calc(var(--content-max-width-s) / 2 - var(--gutter));
}
.special__right .special__content
{
display: flex;
align-items: flex-end;
flex-direction: column;
max-width: 34rem;
}
.special__figures
{
margin-top: 2.5rem;
padding-left: 4rem;
gap: 2.75rem;
}
.special__figure__image
{
max-width: 21rem;
}
} .footer
{
font-size: 1rem;
line-height: 1.8;
line-height: 2;
padding: 2.5rem 0;
text-align: center;
color: #fff;
border-top: var(--navbar-border-width) solid var(--yellow);
background: #52646c;
}
.footer a
{
text-decoration: none;
color: inherit;
}
.footer a:hover
{
text-decoration: underline;
}
.footer h2
{
font-size: 1.25rem;
}
.footer ul
{
line-height: inherit;
margin: 0;
padding: 0;
list-style: none;
}
.footer__container > div + div
{
margin-top: 1.75rem;
}
.footer__contact__title
{
font-size: 1.25rem;
font-weight: 700;
}
@media (min-width: 768px)
{
.footer
{
text-align: left;
}
.footer__container
{
display: flex;
}
.footer__container > div
{
flex: 3;
}
.footer__container > div + div
{
margin: 0;
}
.footer__container .footer__copyright
{
flex: 4;
text-align: right;
}
.footer__container .footer__links,
.footer__container .footer__copyright
{
margin-top: 2.5rem;
}
} body.home .block[data-layout='product'] .row
{
gap: 0;
}
#wirkstoffe
{
background: var(--yellow);
}
#wirkstoffe ol li + li
{
margin-top: 1rem;
}
#wirkstoffe ol li::before
{
font-weight: 500;
}
#wirkstoffe ul
{
margin-top: .5rem;
}
#dreifachwirkung
{
background: rgba(82, 100, 108, .1);
}
#anwendung
{
background: var(--yellow);
}
#anwendung .text__text-inner
{
font-size: 1.375rem;
font-weight: 500;
line-height: 1.4;
max-width: 25rem;
color: #52646c;
}
@media (min-width: 768px)
{
#anwendung .text__text-inner
{
font-size: 1.5rem;
}
#anwendung .text__section.has-image .text__text
{
justify-content: center;
}
}
#anwendung .text__image img
{
border: 2px solid #52646c;
}
#anwendunginfo ul
{
margin-top: .5rem;
}
#anwendungtipp .tip__text
{
max-width: 29rem;
}
.special__figures .special__figure:nth-child(1) .special__figure__label:nth-child(1)
{
top: 22%;
width: calc(var(--lable-padding) + 4.5%);
}
.special__figures .special__figure:nth-child(1) .special__figure__label:nth-child(2)
{
top: 50%;
width: calc(var(--lable-padding) + 14%);
}
.special__figures .special__figure:nth-child(1) .special__figure__label:nth-child(3)
{
top: 78%;
width: calc(var(--lable-padding) + 4.5%);
}
.special__figures .special__figure:nth-child(2) .special__figure__label:nth-child(1)
{
top: 40%;
width: calc(var(--lable-padding) + 71%);
}
@media (min-width: 768px)
{
.page-header .hero-bg img
{
object-position: center 33.333%;
}
.product__image
{
margin-bottom: -10%;
}
}
a.optanon-show-settings
{
cursor: pointer;
text-decoration: underline;
}
a.optanon-show-settings:hover
{
text-decoration: none;
}
.block[data-layout='post'],
.block[data-layout='index'] {
padding-bottom: 0;
}
.product_subtext{
font-size: 1rem;
margin-top: -20px;
}
#wirkstoffe .container-s{
background-color: white;
padding: 20px;
}
#wirkstoffe h2{
font-size: 2.5rem;
margin-bottom: 2.5rem;
font-weight: 300;
}
#wirkstoffe .header-in{
display: flex;
}
#wirkstoffe .header-in picture{
width: 250px;
z-index: 2;
position: relative;
}
@media (max-width: 990px)
{
#wirkstoffe .header-in picture{
display: none;
}
}
#wirkstoffe ol {
list-style: none;
padding: 0;
margin: -80px 0px 0px 0px;
}
@media (max-width: 990px)
{
#wirkstoffe ol{
margin-top: 0px;       
}
}
#wirkstoffe ol li {
background-color: #fff8dc; margin-bottom: 10px;
padding: 15px 15px 15px 70px;
border-radius: 5px;
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#wirkstoffe ol li:last-child{
margin-bottom: 10px;
}
#wirkstoffe ol li::before {
content: counter(item);
counter-increment: item;
position: absolute;
top: 15px;
left: 15px;
background-color: #ffcc00;
color: black;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-weight: bold;
}
#wirkstoffe ol {
counter-reset: item;
}
#wirkstoffe ol li strong {
display: block;
font-size: 1.25rem;
font-weight: 500; 
}
.dreiwirkung{
display: flex;
justify-content: space-between;
gap: 40px;
}
@media (max-width: 740px)
{
.dreiwirkung{
display: block;
}
.dreiwirkung h2{
margin-top: 50px;
}
}
.dreiwirkung > div:first-child{
max-width: 500px;
}
.dreiwirkung h2{
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
margin-bottom: 20px;
}
.dreiwirkung ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
justify-content: flex-start;
}
.dreiwirkung li {
background-color: #fff8dc;
border: 2px solid #fff8dc;
width: 100%;
border-radius: 25px;
padding: 10px 20px;
font-weight: bold;
color: black;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: background-color 0.3s ease;
}
.dreiwirkung li span {
font-size: 1.2em;
color: black;
}
#gel-einleitung .text__text{
width: 100%;
max-width: none;
}
button.navbar-burger {
background: none;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.navbar .navbar-dropdown.dropdown {
justify-content: flex-end;
}
#skip-to-content {
display: block;
max-width: fit-content;
padding: 1rem;
position: fixed;
top: 20px;
left: 20px;
z-index: 9999999999;
background-color: #fff;
text-decoration: none;
color: #707070;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
left: -500px;
}
#skip-to-content:focus-visible,
#skip-to-content:focus {
left: 20px;
opacity: 1;
}
#BorlabsCookieBox a {
color: #000 !important;
text-decoration: underline !important;
text-decoration-color: #ffdd00 !important;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.5 !important;
}