/*
Theme Name: cellpremium
Author: Michael Weiss
Version: 0.14.0
*/

@import 'css/fonts.css';
@import 'css/reset.css';

/* VARS */

:root
{
    --gutter: 1rem;
    --content-max-width: none;
    /*--logo-width: 11rem;*/
    --logo-width: 5rem;
}

@media (min-width: 768px)
{
    :root
    {
        --gutter: 2rem;
        --content-max-width: 110rem;
        --scrollbar-width: 15px;
        --viewport-width: calc(100vw - var(--scrollbar-width));
        /*--logo-width: 12.5rem;*/
    }
}

@media (min-width: 1140px)
{
    :root
    {
        --logo-width: 9rem;
    }
}

/* COMMON */

body
{
    font: 1.125rem/1.5 'RT Dromo', sans-serif;
    /*    background-color: #fdfaf6; */
    /*    background-image: url('img/pattern.svg'); */

    background-color: #f2f0ed;
    background-size: 8rem auto;
}

main
{
    margin-top: 7.5rem;
}

main sup {
	    font-size: 0.75em;
	    line-height: 1;

}

main a:hover
{
    color: #dfb069;
}

main strong
{
    font-weight: 500;
}

img
{
    display: block;

    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p
{
    margin: 0 0 1rem 0;
}

a
{
    position: relative;

    text-decoration: none;

    color: inherit;
}

:last-child
{
    margin-bottom: 0;
}

select
{
    padding-right: 2rem;

    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2011%209%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.41421%3B%22%3E%3Cg%20id%3D%22Layer-1%22%20serif%3Aid%3D%22Layer%201%22%3E%3Cpath%20d%3D%22M5.032%2C8.32c-0.341%2C0%20-0.659%2C-0.174%20-0.843%2C-0.462l-4.032%2C-6.32c-0.197%2C-0.308%20-0.209%2C-0.699%20-0.034%2C-1.019c0.176%2C-0.32%200.512%2C-0.519%200.877%2C-0.519l8.064%2C0c0.365%2C0%200.701%2C0.199%200.877%2C0.519c0.175%2C0.32%200.163%2C0.711%20-0.034%2C1.019l-4.032%2C6.32c-0.184%2C0.288%20-0.502%2C0.462%20-0.843%2C0.462%22%20style%3D%22fill%3A%23646567%3Bfill-rule%3Anonzero%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat,repeat;
    background-position: right .7rem top 50%,0 0;
    background-size: auto .5625rem;

    appearance: none;
}

.container
{
    position: relative;

    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.block
{
    margin-bottom: 4rem;
}

.block:last-child
{
    margin-bottom: 0;
}

@media (min-width: 768px)
{
    body
    {
        font-size: 1.125rem;
    }

    main
    {
        margin-top: 9.5rem;
    }

    .block
    {
        margin-bottom: 6rem;
    }
}

@media (min-width: 1140px)
{
    main
    {
        margin: 0;
    }
}

/* TITLE */

.page-header h1,
.page-header h2,
.block__images__title h2,
.block__products__list-item h2,
.block__text h1,
.product__slider h2
{
    font: normal 2.5rem/1.333 'ivymode', serif;

    letter-spacing: .1rem;
}

@media (min-width: 1140px)
{
    .page-header h1,
    .page-header h2,
    .block__images__title h2,
    .block__text h1,
    .block__products__list-item h2,
    .product__slider h2
    {
        font-size: 3rem;
    }
}

/* TEXT LINK */

.block__products__filter .swipe-filter-items li.active::before,
.block__products__filter .swipe-filter.static .swipe-filter-items li:hover::before
{
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;

    content: '';

    border-bottom: 2px solid;
}

@media (min-width: 1140px)
{
    .navbar-menu li:hover::before,
    .navbar-menu li.current-menu-item::before
    {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 100%;

        content: '';

        border-bottom: 2px solid;
    }
}

/* BURGER */

.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);
}

/* MENU */

.dropdown-toggle
{
    cursor: pointer;
}

.dropdown-content
{
    display: none;
    overflow: hidden;

    transition: .2s;
}

/* NAVBAR */

.navbar
{
    font-size: 1rem;

    position: fixed;
    z-index: 100;
    top: 0;

    width: 100%;

    background: #f2f0ed;
}

.navbar::before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    transition: .2s;

    opacity: 0;
}

.navbar.open::before
{
    opacity: 1;
}

.navbar-brand
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 6.875rem;
    padding: 0 var(--gutter);
}

.navbar-logo
{
    display: block;

    width: var(--logo-width);

    color: inherit;
}

.navbar-logo svg
{
    width: 100%;
    height: 100%;
}

.navbar-burger
{
    width: 1.875rem;
    height: 1.75rem;
}

.navbar-menu ul
{
    margin: 0;
    padding: 0;

    text-align: center;
}

.navbar-menu li
{
    position: relative;

    display: block;

    letter-spacing: .125rem;
}

.navbar-menu li.current-menu-item
{
    font-weight: 500;
}

.navbar-menu a
{
    display: block;

    text-decoration: none;
    text-transform: uppercase;

    color: inherit;
}


.navbar-menu a:hover
{
    font-weight: 500;
}

.navbar-menu-primary
{
    margin-bottom: 2.625rem;
}

.navbar-menu-primary ul
{
    display: flex;
    flex-direction: column;

    gap: 2rem;
}

.navbar-menu-right
{
    padding: .5rem 0 .75rem 0;

    background: #e3ddd6;
}

.navbar-menu-lang
{
    padding: 1rem;
}

.navbar-menu-lang ul
{
    display: flex;
    justify-content: center;

    gap: .5rem;
}

.navbar-menu-secondary
{
    font-size: .875rem;

    padding: 1rem;
}

.navbar-menu-secondary ul
{
    display: flex;
    flex-direction: column;

    gap: 1.25rem;
}


@media (min-width: 768px)
{
    .navbar-container
    {
        padding: 1rem 0 0 0;
    }
}

@media (min-width: 1140px)
{
    .navbar
    {
        position: static;

        /*        background: url('img/bergkette.svg') bottom 6.5rem center no-repeat; */
    }

    .navbar-brand
    {
        flex: 0;

        height: auto;
        padding: 0;
    }

    .navbar-logo
    {
       /* margin-top: 1.25rem;*/
    }

    .navbar-burger
    {
        display: none;
    }

    .navbar-container
    {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        max-width: var(--content-max-width);
        margin: 0 auto;
        /*padding: 3.25rem var(--gutter) 6rem;*/
        padding: 2rem var(--gutter) 4rem;
    }

    .navbar-menu
    {
        position: relative;

        display: flex !important;
        align-items: flex-start;
        flex: 1 0 auto;

        height: auto !important;
        padding-top: 4rem;
    }

    .navbar-menu ul
    {
        display: flex;
        flex-direction: row;

        margin: 0;
    }

    .navbar-menu-primary ul
    {
        gap: 1.5rem;
    }

    .navbar-menu-primary
    {
        display: flex;
        flex: 1 0 auto;
        justify-content: center;

        margin: 0;
    }

    .navbar-menu-right
    {
        display: flex;
        align-items: flex-end;
        flex-direction: column-reverse;

        max-width: var(--logo-width);
        padding: 0;

        background: none;
    }

    .navbar-menu-lang
    {
        padding: 0;
    }

    .navbar-menu-secondary
    {
        position: absolute;
        top: 0;
        right: 0;

        padding: 0;
    }

    .navbar-menu-secondary ul
    {
        gap: 1.5rem;
    }

    .navbar-menu a:hover
    {
        font-weight: normal;
    }

    .navbar-menu li.current-menu-item a:hover
    {
        font-weight: 500;
    }
}

@media (min-width: 1280px)
{
    .navbar-menu-primary ul
    {
        gap: 2.5rem;
    }
}

@media (min-width: 1400px)
{

    .navbar-logo
    {
        margin-top: 2.75rem;
    }
	
}
	
/* WPML */

.wpml-ls-item .wpml-ls-native
{
    display: none;
}

.wpml-ls-item-de a::before
{
    content: 'de';
}

.wpml-ls-item-en a::before
{
    content: 'en';
}

.wpml-ls-current-language
{
    font-weight: 500;
}

/* PAGE HEADER */

.page-header h1,
.page-header h2
{
    margin-bottom: 1.25rem;
}

.page-header-caption
{
    font-size: 1rem;

    margin-bottom: 1rem;

    letter-spacing: .125rem;
    text-transform: uppercase;

    color: #9b8a74;
}

@media (min-width: 768px)
{
    .page-header-caption
    {
        margin-bottom: 1.25rem;
    }

    .page-header h1,
    .page-header h2
    {
        margin-bottom: 1.75rem;
    }
}

.page-header-text
{
    font-size: 1.125rem;
    line-height: 1.8;
}

/* IMAGES BLOCK */

.block__images__title
{
    margin-bottom: 3rem;

    text-align: center;
}

.block__images__title h2
{
    max-width: 20rem;
    margin: 0 auto;
}

.block__images__items
{
    display: flex;
    flex-direction: column;

    gap: 3.5rem;
}

.block__images__item
{
    display: flex;
    align-items: center;
    flex-direction: column;

    text-align: center;
}

.block__images__item-label
{
    max-width: 23rem;
	line-height: 1.8;
}

.block__images__item-image
{
    max-width: 20rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px)
{
    .block__images__title
    {
        margin-bottom: 4rem;
    }

    .block__images__title h2
    {
        max-width: none;
    }

    .block__images__items
    {
        flex-direction: row;
        justify-content: space-between;

        gap: 3.75rem;
    }

    .block__images__item-image
    {
        max-width: 25rem;
        margin-bottom: 2.25rem;
    }
	
	.block[data-layout='images'] {
	    margin-bottom: 6rem;
	}
}

/* INFO BLOCK */

.block__info
{
    display: flex;
    flex-direction: column-reverse;

    max-width: 50rem;
    margin: 0 auto;

    gap: 3rem;
}

.block__info__content-inner
{
    margin: 0;
}

.block__info__images
{
    max-width: 35rem;
    margin: 0 auto;
}

.block__info__images-secondary
{
    width: 50%;
    margin: 0 auto;
}

.block__info__images-secondary img
{
    margin-top: -25%;
}

.block__info__link
{
    margin: 2rem 0 0 0;
}

.block__info__link a,
.professionals-select > div a
{
    font-size: 1rem;

    display: block;

    padding: .75rem 2rem;

    text-align: center;
    text-decoration: none;
    letter-spacing: .0625rem;
    text-transform: uppercase;
    color: #9b8a74;
    border: 1px solid #9b8a74;
}

.professionals-select > div a
{
    background: white;
}


.block__info__link a:hover,
.professionals-select > div a:hover
{
    color: white;
    background: #dfb069;
    border: 1px solid #dfb069;
}

@media (min-width: 768px)
{
    .block[data-layout='info']
    {
        margin-bottom: 6.5rem;
    }

    .block__info__link
    {
        display: flex;
    }
}

@media (min-width: 1140px)
{
    .block__info
    {
        align-items: flex-start;
        flex-direction: row;

        max-width: var(--content-max-width);
        margin: 0 auto;
        padding: 0 2rem;

        --image-offset: min(max(((var(--viewport-width)) - var(--content-max-width)) - var(--gutter), var(--gutter) * -1), 0rem);
        gap: 3.5rem;
    }

    .block__info.image-right
    {
        flex-direction: row-reverse;
    }

    .block__info__images
    {
        display: flex;
        align-items: flex-end;
        flex: 8;

        max-width: none;
        margin-left: var(--image-offset);
    }

    .block__info.image-right .block__info__images
    {
        flex-direction: row-reverse;

        margin-right: var(--image-offset);
        margin-left: 0;
    }

    .has-secondary .block__info__images-primary
    {
        flex: 2;

        margin-bottom: 18%;
    }

    .block__info__images-secondary
    {
        flex: 1;

        width: auto;
        margin-left: -20%;
    }

    .block__info.image-right .block__info__images-secondary
    {
        margin-right: -20%;
        margin-left: 0;
    }

    .block:first-child .block__info__images-secondary
    {
        margin-left: -33.3333%;
    }

    .block:first-child .block__info.image-right .block__info__images-secondary
    {
        margin-right: -33.3333%;
    }

    .block__info__images-secondary img
    {
        margin: 0;
    }

    .block__info__content
    {
        display: flex;
        flex: 7;
        justify-content: flex-end;
    }

    .block__info.image-right .block__info__content
    {
        justify-content: flex-start;
    }

    .block__info__content-inner
    {
        max-width: 52rem;
        padding: 0;
    }

    .block__info__link
    {
        display: flex;
    }
}

/* QUOTE BLOCK */

.block__quote figure
{
    margin: 0;
    padding: 3.125rem 0;

    border-top: 2px solid #aeacaa;
}

.block__quote blockquote
{
    font: 1.875rem/1.5 'ivymode', serif;

    margin: 0 0 1.5rem 0;

    text-align: center;
    letter-spacing: .1rem;
}

.block__quote figcaption
{
    font-weight: 500;
    line-height: 1.5;

    text-align: center;
}

.block__quote figcaption cite
{
    font-weight: normal;

    display: block;
}

@media (min-width: 768px)
{
    .block__quote
    {
        margin-top: 8.25rem;
    }

    .block__quote figure
    {
        display: flex;
        flex-direction: column;

        padding: 5.25rem 0;

        gap: 3.25rem;
    }

    .block__quote blockquote
    {
        font-size: 2.5rem;
        line-height: 1.7;

        max-width: 56rem;
        margin: 0 auto;
    }

    .block__quote figcaption cite br
    {
        display: none;
    }
}

/* PRODUCTS */

.block__products__filter
{
    font-size: 1rem;

    letter-spacing: .2rem;

    background: #e3ddd6;
}

.block__products__filter .swipe-filter
{
    overflow: hidden;

    cursor: grab;
    text-transform: uppercase;

    touch-action: none;
}

.block__products__filter .swipe-filter.static
{
    cursor: default;
}

.block__products__filter .swipe-filter-items
{
    position: relative;

    display: flex;
    justify-content: flex-start;

    margin: 0;
    padding: 0;
    padding: 1rem 0;

    list-style: none;

    -webkit-user-select: none;
            user-select: none;
    transition: .2s;

    gap: 1.75rem;
}

.block__products__filter .swipe-filter.moving .swipe-filter-items
{
    transition: none;
}

.block__products__filter .swipe-filter.static .swipe-filter-items
{
    transform: none !important;
}


.block__products__filter .swipe-filter-items li
{
    position: relative;

    flex: 0 0 auto;

    outline: none;
}

.block__products__filter .swipe-filter.static .swipe-filter-items li
{
    cursor: pointer;
}

.block__products__filter .swipe-filter-items li.active
{
    font-weight: 500;
}

.block__products__list
{
    font-size: 1.125rem;
    line-height: 1.5;

    display: flex;
    flex-direction: column;

    margin: 3rem 0;

    gap: 5rem;
}

.block__products__list-item
{
    display: flex;
    flex-direction: column-reverse;

    width: 100%;

    gap: 2rem;
}

.block__products__list-item.hidden
{
    display: none;
}

.block__products__image
{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.block__products__excerpt
{
    margin-bottom: 1.5rem;
}

@media (min-width: 768px)
{
    .block__products__filter
    {
        letter-spacing: .2em;
    }

    .block__products__filter .swipe-filter-items
    {
        justify-content: space-around;

        padding: 2rem 0;
    }

    .block__products__list
    {
        margin: 6rem 0 8rem;

        gap: 8rem;
    }

    .block__products__list-item
    {
        align-items: center;
        flex-direction: row;

        max-width: 65rem;
        margin: 0 auto;

        gap: 3rem;
    }

    .block__products__list-item:nth-child(even)
    {
        flex-direction: row-reverse;
    }

    .block__products__list-item h2
    {
        margin-bottom: 1.5rem;
    }

    .block__products__image
    {
        flex: 1;
    }

    .block__products__content
    {
        flex: 1;
    }

    .block__products__excerpt
    {
        margin-bottom: 1.75rem;
    }
}

/* CLAIM */

.block__claim[data-style='background']
{
    background: #e3ddd6;
}

.block__claim__content
{
    display: flex;
    flex-direction: column;

    padding: 1.5rem 0;

    text-align: center;

    gap: 1rem;
}

.block__claim[data-style='background'] .block__claim__content
{
    padding: 1.5rem 0 2.5rem;
}

.block__claim[data-style='border'] .block__claim__content
{
    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
}

.block__claim__content h2
{
    font: normal 1.875rem/1.5 'ivymode', serif;

    margin: 0;

    letter-spacing: .1rem;
}

@media (min-width: 768px)
{
    .block__claim__content
    {
        padding: 2.5rem 0;

        gap: 2rem;
    }

    .block__claim[data-style='background'] .block__claim__content
    {
        padding: 2.5rem 0 4rem;
    }

    .block__claim__content h2
    {
        font-size: 2.5rem;
    }

    .block__claim[data-style='border'] .block__claim__text
    {
        font-size: 1.375rem;
    }
}

/* TILES */

.block__tiles__tile-inner
{
    margin: 0 0 3.75rem 0;
    padding: 1.5rem 0 ;

    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
}

.block__tiles__tile h2
{
    font: 2rem/1.25 'ivymode', serif;

    margin-bottom: 1.5rem;

    letter-spacing: .1rem;
}

.block__tiles__tile
{
    line-height: 1.8;

    text-align: center;
}

@media (min-width: 768px)
{
    .block__tiles__tiles
    {
        display: grid;
        flex-wrap: wrap;

        max-width: 68rem;
        margin: 0 auto;

        grid-template-columns: 1fr 1fr;
        gap: 3.75rem;
    }

    .block__tiles__tile
    {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .block__tiles__tile-inner
    {
        width: 100%;
        max-width: 30rem;
        height: 100%;
        margin: 0;
    }

    .block__tiles__tile h2
    {
        font-size: 2.25rem;
    }

    .block[data-layout='tiles']
    {
        margin-bottom: 6rem;
    }
}

/* DOWNLOADS */

.block__downloads__tile-inner
{
    margin: 0 0 3.75rem 0;
    padding: 1.5rem 0 ;

    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
}

.block__downloads__tile h2
{
    font: 2rem/1.25 'ivymode', serif;

    margin-bottom: 1.5rem;

    letter-spacing: .1rem;
}

.block__downloads__tile
{
    line-height: 1.8;

    text-align: center;
}

.block__downloads__items ul
{
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.block__downloads__items li
{
    display: block;
    position: relative;
}

.block__downloads__items a
{
    padding-left: 1.5rem;
    text-decoration: underline;
}

.block__downloads__items li.file a::before
{
    position: absolute;
    top: 50%;
    left: 0;

    width: 1rem;
    height: 1rem;

    content: '';
    transform: translateY(-50%);

    background: url('img/download-solid.svg') no-repeat center/contain;
}

@media (min-width: 768px)
{
    .block__downloads__tiles
    {
        display: grid;
        flex-wrap: wrap;

        max-width: 68rem;
        margin: 0 auto;

        grid-template-columns: 1fr 1fr;
        gap: 3.75rem;
    }

    .block__downloads__tile
    {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .block__downloads__tile-inner
    {
        width: 100%;
        max-width: 30rem;
        height: 100%;
        margin: 0;
    }

    .block__downloads__tile h2
    {
        font-size: 2.25rem;
    }

    .block[data-layout='downloads']
    {
        margin-bottom: 6rem;
    }
}


/* TEXT */


.block__text__content
{
    max-width: 50rem;
    margin: 0 auto;
}

.block__text
{
    margin-bottom: 3.5rem;
}

@media (min-width: 768px)
{
    .block__text
    {
        margin-bottom: 4.5rem;
    }
}

/* PRODUCT */

.product
{
    display: flex;
    flex-direction: column;

    gap: 2rem;
}

.product__main
{
    font-size: 1.125rem;
}

.product__main > .container
{
    display: flex;
    flex-direction: column;

    gap: 3rem;
}

.product__image
{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.product__type
{
    margin-bottom: .5rem;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: #9b8a74;
}

.product__content
{
    margin-bottom: 2rem;
}

.product__details
{
    padding: 2rem 0;

    background: #e3ddd6;
}

.product__details-content
{
    display: flex;
    flex-direction: column;

    max-width: 46rem;
    margin: 0 auto;

    gap: 3rem;
}

.product__details h2
{
    font-size: 1rem;
    font-weight: normal;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.product__details__application .product__details__content
{
    font: 1.875rem/1.7 'ivymode', serif;

    letter-spacing: .05em;
}

.product__slider
{
    padding-top: 1rem;
}

.product__slider h2
{
    margin-bottom: 2.5rem;

    text-align: center;
}

.product__details__ingredients h2
{
    margin-bottom: 1.75rem;
}

@media (min-width: 768px)
{
    .product
    {
        gap: 7rem;
    }

    .product__main > .container
    {
        flex-direction: row;
    }

    .product__image
    {
        flex: 1;

        padding: 1rem 0 0 0;
    }

    .product__info
    {
        flex: 1;
    }

    .product__info-inner
    {
        max-width: 40rem;
    }

    .product__content
    {
        margin-bottom: 1.75rem;
    }

    .product__details
    {
        padding: 5rem 0;
    }

    .product__details__application
    {
        flex: 2;
    }

    .product__details__application h2
    {
        margin-bottom: 1.75rem;
    }

    .product__details__application .product__details__content
    {
        font-size: 2rem;

        max-width: 58rem;
    }

    .product__details__ingredients
    {
        flex: 1;
    }

    .product__details__ingredients .product__details__content
    {
        width: 100%;
        min-width: 32rem;
    }

    .product__details__ingredients .product-highlights li
    {
        padding: .75rem 0;
    }

    .product__slider h2
    {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1140px)
{
    .product__details
    {
        padding: 6.5rem 0 4.5rem;
    }

    .product__details-content
    {
        flex-direction: row;

        max-width: var(--content-max-width);

        gap: 3.75rem;
    }

    .product__details__application h2
    {
        margin-bottom: 1.75rem;
    }

    .product__details__ingredients h2
    {
        margin-bottom: 2.75rem;
    }
}

/* PRODUCT SLIDER */

.product-slider
{
    position: relative;

    max-width: calc(var(--content-max-width) + var(--gutter));
    margin: 0 auto;
    margin-bottom: 4rem;
}

.product-slider .swiper-container
{
    position: static;

    max-width: 102rem;
}

.product-slider-item
{
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 100%;

    text-align: center;
}

.product-slider-image
{
    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 100%;
    height: 18.75rem;
    margin-bottom: 3rem;
}

.product-slider-image a
{
    display: flex;
    align-items: flex-end;
    justify-content: center;

    height: 18.75rem;
}

.product-slider-content
{
    max-width: 20rem;
    margin-bottom: 2.5rem;
    padding: 0 1rem;
}

@media (min-width: 768px)
{
    .product-slider-content
    {
        margin-bottom: 3.5rem;
    }
}


.product-slider-title
{
    font-size: 1.375rem;
    font-weight: 500;
}

.product-slider-title + .product-slider-desc
{
    margin-top: 2rem;
}

.product-slider-title a
{
    position: relative;

    text-decoration: none;
}

.product-slider .swiper-button-next,
.product-slider .swiper-button-prev
{
    top: 12.1875rem;

    width: 8vw;
    min-width: 3.125rem;
    max-width: 8.75rem;
    height: 8vw;
    min-height: 3.125rem;
    max-height: 8.75rem;

    background: #dfb06a;
}

.product-slider .swiper-button-next
{
    right: 0;
}

.product-slider .swiper-button-prev
{
    left: 0;
}

.product-slider .swiper-button-next:after,
.product-slider .swiper-button-prev:after
{
    width: 1.5rem;
    height: 1.5rem;

    content: '';

    background: url('img/chevron-right.svg') center/contain no-repeat;
}

.product-slider .swiper-button-prev:after
{
    transform: rotate(180deg);
}

.product-slider-progress-container
{
    padding: 0 var(--gutter);
}

.product-slider-progress
{
    position: relative;

    width: 100%;
    height: 4px;

    border-radius: 2px;
    background: #aeacaa;
}

.product-slider-progress-handle
{
    position: absolute;
    top: 0;
    left: 0;

    width: 20%;
    height: 100%;

    border-radius: 2px;
    background: #565554;
}

@media (min-width: 768px)
{
    .product-slider
    {
        margin-bottom: 9rem;
    }

    .product-slider-item
    {
        width: 50%;
    }
}

@media (min-width: 1152px)
{
    .product-slider-item
    {
        width: 33.33333%;
    }
}

@media (min-width: 1536px)
{
    .product-slider-item
    {
        width: 25%;
    }
}

/* PRODUCT HIGHLIGHTS */

.product-highlights
{
    line-height: 1.4;

    border-top: 2px solid #000;
}

.product-highlights ul
{
    margin: 0;
    padding: 0;

    list-style: none;
}

.product-highlights li
{
    padding: 1rem 0;

    border-bottom: 1px solid #9b8a74;
}

@media (min-width: 768px)
{
    .product-highlights li
    {
        padding: 1.25rem 0;
    }
}

/* FOOTER */

.page-footer
{
    font-size: 1rem;

    padding: 1.75rem 0;

    text-align: center;
    letter-spacing: .125rem;
    text-transform: uppercase;

    /* background: #d7d0c8; */
    background: #111;
    color: white;
}

.page-footer a
{
    text-decoration: none;

    /* color: inherit; */
    color: white;
}

.page-footer a:hover
{
    text-decoration: underline;
}

.page-footer-content
{
    display: flex;
    flex-direction: column;

    gap: 2.5rem;
}

.page-footer-menu ul
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin: 0;
    padding: 0;

    list-style: none;

    gap: 2.5rem 2rem;
}

@media (min-width: 768px)
{
    .page-footer
    {
        padding: 2.25rem 0;
    }

    .page-footer-content
    {
        flex-direction: row;
        justify-content: space-between;
    }

    .page-footer-menu ul
    {
        gap: 2.5rem;
    }
}

/* DEBUG */

body
{
    /* margin: 0 auto;*/
    /* background: red url('img/_desktop-company.png') top 53px center/1920px no-repeat; */

    /* background: red url('img/_mobile-home.png') top -829px center/390px no-repeat; */
}


/* NEU */

/* Produktbilder - Größen */

.woocommerce .product__image img,
.woocommerce-page .product__image img
{
    width: auto;
    max-width: 100%;
    max-height: 20rem;
}


/* 2 + 20 + 3 + 20 + 2 = 47 */

@media (min-width: 47rem)
{
    .woocommerce .product__image img,
    .woocommerce-page .product__image img
    {
        max-width: 21rem;
        max-height: 31.5rem;
    }
}

.woocommerce .block__products__image img,
.woocommerce-page .block__products__image img
{
    width: auto;
    max-width: 100%;
    max-height: 17rem;
}


.woocommerce .block__products__image img:hover,
.woocommerce-page .block__products__image img:hover
{
    opacity: .7;
}

/* 2 + 17 + 3 + 17 + 2 = 39 */

@media (min-width: 41rem)
{
    .woocommerce .block__products__image img,
    .woocommerce-page .block__products__image img
    {
        max-width: 17rem;
        max-height: 25.5rem;
    }
}


/* Slider: Bildgrößen */

.product-slider-image img:hover
{
    opacity: .7;
}

.product-slider-image img.img-40
{
    width: auto;
    height: 40%;
}

.product-slider-image img.img-50
{
    width: auto;
    height: 50%;
}

.product-slider-image img.img-75
{
    width: auto;
    height: 75%;
}

.product-slider-image img.img-80
{
    width: auto;
    height: 80%;
}

/* block__text__content */


.block__text__content h1
{
    margin-bottom: 1.75rem;
}

.block__text__content h2
{
	color: #9b8a74;
    font-size: 1.5rem;
    font-weight: normal;

    margin-bottom: 1rem;
}

.block__text__content p
{
    margin-bottom: 1.5rem;
}

.block__text__content a,
.block__tiles__text a,
.block__info__text a
{
    text-decoration: underline;
}

.block__text__content a[href^="tel"],
.block__tiles__text a[href^="tel"],
.block__info__text a[href^="tel"]
{
    white-space: nowrap;
}

.block__text__content .alignleft
{
   float: left;
}

.block__text__content .wp-caption .wp-caption-text
{
   color: #9b8a74;
   text-align: center;
}

.block__text__content .img-headline
{
   margin: 1.5rem 0 0.75rem 0;
}

.block__text__content img
{
   padding: 0 0 0.25rem 0;
}

.block__text__content:after
{
    content: "";
    display: table;
    clear: both;
}


/* Siegel */

body.home .block:first-child .block__info__images-secondary img
{
    width: 13rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1140px)
{
    body.home .block:first-child .block__info
    {
        gap: 1.5rem;
    }

    body.home .block:first-child .has-secondary .block__info__images-primary
    {
        margin-bottom: 15%;
    }

    body.home .block:first-child .block__info__images-secondary img
    {
        margin: 0 1.5rem 0 auto;
    }
}

/* Slider */

.flickity-prev-next-button
{
    width: 50px;
    height: 50px;

    border-radius: 0;
}

.flickity-button
{
    /* color: black;
    background: #dfb069; */
    color: white;
    background: #111;
}

.flickity-button:hover
{
    color: white;
    background: #dfb069;
}

.flickity-prev-next-button .flickity-button-icon
{
    position: absolute;
    top: 30%;
    left: 30%;

    width: 40%;
    height: 40%;
}

.flickity-prev-next-button.previous
{
    left: 0;
}

.flickity-prev-next-button.next
{
    right: 0;
}

/* LOGIN */

.login__form
{
    padding: 2rem;

    background: #e3ddd6;
}

.login__form form
{
    display: flex;
    flex-direction: column;

    max-width: 30rem;
    margin: 0 auto;

    gap: 1rem;
}

.login__form button,
.login__form input,
.login__form select
{
    font-size: 1.125rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #888;
}

.login__form button
{
    cursor: pointer;
    background: #888;
	color: white;
	
}

.login__form select
{
    padding-right: 2rem;
}

.login__form__error
{
    margin-top: .25rem;
    color: #e3170a;
}

.login__info {
    margin-top: 1.5rem;
}

.professionals-select
{
    display: flex;
    justify-content: space-around;
    width: 100%;
	margin: 0 0 1.5rem 0;
}