@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --yellow: #ffed00;
    --orange: #f9aa00;
    --darkorange: #ec5400;
    --red: #cc1216;
    --pink: #e6007c;
    --darkblue: #0069a3;
    --blue: #00a1e5;
    --turquoise: #a3edc8;
    --green: #8abe22;
    --transparent: rgba(255, 255, 255, 0.8);
}

:root {
    --font: 'Open Sans', sans-serif;
}

html {
    background-color: var(--lightblue);
    overflow: hidden auto;
    font-size: 10px;
    line-height: 1.6;
}

html,
body {
    font-family: var(--font);
}

body {
    font-size: 1.8rem;
}

main ol:not([class]) {
    margin-left: 1.5em;
}
main ul:not([class]) {
    margin-left: 1.5em;
    list-style: square;
}

main ul:not([class]) > ::marker {
    font-size: 1.5em;
    line-height: 1;
}

main ul:not([class]) > :nth-child(3n - 2)::marker {
    color: var(--pink);
}
main ul:not([class]) > :nth-child(3n - 1)::marker {
    color: var(--darkblue);
}
main ul:not([class]) > :nth-child(3n - 3)::marker {
    color: var(--green);
}

main,
aside {
    color: var(--creart);
}

.logo {
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    font-size: 1.5em;
    font-weight: var(--bold, 700);
}

.logo img {
    max-height: 5rem;
    height: 4rem;
    width: auto;
}

.box,
[data-bg] {
    padding: 2rem;
    background-color: var(--white);
    color: var(--creart);
    display: block;
    width: 100%;
}

[data-bg='auto']:not(.box) {
    background: none;
}

[data-bg='auto'] {
    padding: 0;
}

.box.full {
    padding: 0;
    align-items: stretch;
    aspect-ratio: 1;
}

.box.full img {
    width: 100%;
}

.shopcontainer > a {
    display: flex;
    max-height: 100%;
    flex-direction: column;
}

.shopcontainer .image_wrapper {
    flex-shrink: 1;
    max-height: -webkit-fill-available;
    height: 0px;
    flex-grow: 1;
}

.shopcontainer .image_wrapper img {
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.shop_cat_link {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.shop_cat_link [role='heading'] {
    hyphens: auto;
    width: 100%;
}

.shop_cat_link p:not([class]) {
    line-height: 1.2;
    font-size: 0.8em;
    hyphens: auto;
    /* margin: auto 0; */
}

.shop_cat_link p:not([class]) br {
    display: none;
}

.shop_cat_link:focus-visible,
.shop_cat_link:hover {
    transform: scale(1.05);
}

.swiper-slide .shop_cat_link:focus-visible,
.swiper-slide .shop_cat_link:hover {
    transform: scale(0.95);
}

.shop_cat_link > .details {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    /* flex-direction: row-reverse; */
    gap: 0 1em;
    align-self: center;
}

.shop_cat_link .price {
    display: block;
    width: fit-content;
    background-color: var(--creart);
    color: var(--white);
    padding: 0.125em 0.5em;
    line-height: 1.2;
}

.shop_cat_link .price + p {
    width: 50%;
    flex-grow: 1;
}
.shop_cat_link .price data {
    font-size: 1.4rem;
}

@media screen and (min-width: 769px) and (hover: hover) {
    .shop_cat_link > .details {
        aspect-ratio: 1;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        z-index: 2;

        background-image: url(../images/arrow-right.svg);
        background-position: calc(100% - 1rem) calc(100% - 1rem);
        background-repeat: no-repeat;
        background-size: 3rem auto;
    }

    .shop_cat_link > .details:not(:only-child) {
        visibility: hidden;
    }

    .shop_cat_link:focus-visible > .details,
    .shop_cat_link:hover > .details {
        visibility: visible;
    }
}

@media screen and (max-width: 768px), not (hover: hover) {
    .shop_cat_link {
        display: flex;
        aspect-ratio: unset !important;
    }

    .shop_cat_link > * {
        background: none !important;
        aspect-ratio: unset !important;
    }
    .shop_cat_link > .details {
        align-content: flex-start;
    }

    .shop_cat_link [role='heading'] {
        /* display: none; */
    }

    .shop_cat_link .price {
        margin-top: 0;
    }

    .shopcontainer > a {
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        /* display: grid; */
        /* grid-template-columns: 1fr 1fr; */
        /* grid-template-rows: auto auto; */
        max-height: none;
        aspect-ratio: unset !important;
    }

    .shopcontainer > a > * {
        width: 50%;
        min-width: 15rem;
        flex-grow: 1;
    }

    .shopcontainer .image_wrapper {
        height: auto;
        grid-column-start: 1;
        /* grid-row-end: span 2; */
    }

    .shop_cat_link > .desc {
        display: none;
    }
}

.box.grid {
    display: grid;
}

.box.flexbox {
    display: flex;
}

.jumb_to_main {
    /* pointer-events: none; */
    opacity: 0;
    visibility: invisible;
    position: fixed;
    left: 2rem;
    top: 2rem;
    z-index: 101;
    z-index: -1;
    overflow: hidden;
    width: 0;
    height: 0;
    display: block;
}

.jumb_to_main:focus,
.jumb_to_main:focus-within,
.jumb_to_main:focus-visible {
    /* pointer-events: all; */
    opacity: 1;
    visibility: visible;
    z-index: 101;
    overflow: visible;
    width: fit-content;
    height: auto;
    background-color: var(--white);
    color: var(--creart);
}

.product_image img {
    aspect-ratio: 800 / 600;
}

.product_box {
    grid-auto-flow: dense;
    position: relative;
    padding: 0;
    margin-bottom: 3rem;
}

.product_box:after {
    content: '';
    position: absolute;
    display: block;
    width: 100vw;
    top: -5rem;
    bottom: -15rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: inherit;
    z-index: -1;
    pointer-events: none;
}

.product_box .start {
    align-self: center;
}

.product_box h1 {
    font-size: calc((100vw - (var(--padding) * 2)) * 0.05);
    text-transform: uppercase;
    line-height: 1;
    /* color: var(--white); */
    text-align: center;
    margin: 0;
}

.product_box h1 strong {
    font-size: 1.5em;
}

.product_box .product_image {
    align-self: flex-start;
}

.cart_img {
    width: 100%;
}

main {
    width: 100% !important;
    padding: 5rem 0;
}

#row_content > [data-bg]:not([data-bg='auto']):last-child {
    margin-bottom: -5rem;
}

.nav_breadcrumb {
    display: none;
}

aside {
    position: sticky;
    top: 14rem;
    max-height: 100vh;
    width: var(--padding) !important;
    overflow: visible;
    z-index: 2;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    margin-left: calc(0px - var(--padding));
    transform: translateX(100%);
    padding: 0 2rem;
    align-items: flex-end;
}

aside .toggler {
    background-color: var(--creart);
    color: var(--white);
    text-decoration: none;
    padding: 1rem;
    aspect-ratio: 1;
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    max-width: var(--padding);
}

.cart_toggler {
    position: relative;
}
.cart_toggler .sidebar_cart > * {
    width: 100%;
}

.cart_toggler:after {
    content: attr(data-cnt);
    position: absolute;
    right: 100%;
    top: 0;
    transform: translate(1rem, -50%);
    background-color: var(--pink);
    color: var(--white);
    border-radius: 1em;
    padding: 0.25em 0.75em;
    font-size: 0.66em;
}

aside > *:not(.toggler) {
    display: none;
    position: relative;
    transform: translateX(-100% - var(--padding));
    width: max-content;
    max-width: 100vw;
    min-width: var(--padding);
    padding: 2rem;
    margin-right: -2rem;
    margin-top: calc(0px - var(--gap));
    background-color: var(--white);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

    max-height: 50vh;
    overflow: auto;
}

aside > *:not(.toggler) input:not([type='submit']) {
    border: 2px solid;
    color: var(--creart);
}

aside .form-row {
    width: auto;
}

.content-wrapper {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
}

.content_block > span:first-child + * {
    margin-top: 0;
}

.content_block {
    position: relative;
}

.content_block:before {
    content: '';
    position: absolute;
    display: block;
    width: 100vw;
    background-color: inherit;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
}

.content_block[data-bg]:not([data-bg='auto']) {
    padding: 5rem 0;
}

.slider {
    position: relative;
    height: auto;
}

.swiper-wrapper img {
    aspect-ratio: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    align-self: center;
    justify-self: center;
    flex-grow: 0;
    display: block;
}

.swiper-button-prev,
.swiper-button-next,
.slider .button-next,
.slider .button-prev {
    background-image: none;
    padding: 0;
    position: absolute;
    display: block;
    transform: translateY(-50%);
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    height: 3em;
    width: 1.5em;
    cursor: pointer;
    border: none;
}

.swiper-button-prev,
.slider .button-prev {
    right: calc(100% + var(--gap));
    background-color: var(--darkorange);
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.swiper-button-next,
.slider .button-next {
    left: calc(100% + var(--gap));
    background-color: var(--yellow);
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible,
.slider .button-next:focus-visible,
.slider .button-prev:focus-visible {
    filter: hue-rotate(180deg) saturate(2) brightness(2);
    outline: none;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: none;
}

.swiper-button-prev {
    right: auto;
    left: var(--gap);
    background-color: var(--creart);
}
.swiper-button-next {
    left: auto;
    right: var(--gap);
    background-color: var(--creart);
}
[data-cnt='1'] .swiper-button-prev,
[data-cnt='1'] .swiper-button-next,
[data-cnt='1'] .gallery-thumbs {
    display: none !important;
}
.product_info [role='heading'] a {
    text-decoration: none;
}
button {
    transition: all 0.3s ease;
}
button.swiper-slide:hover {
    transform: scale(0.95);
}
.swiper-container {
    padding: 2px 0;
}

.add_to_cart {
    align-items: flex-end;
    border: 0.5rem solid var(--white);
    padding: 2rem;
}

form > * {
    margin-top: 0;
}

.price_info {
    flex-grow: 1;
}
.add_to_cart .price_info .price {
    font-size: 2em;
    line-height: 1;
}

.more_products {
    text-decoration: none;
    position: relative;
    display: block;
    width: fit-content;
    margin-left: auto;
    padding-right: calc(var(--gap) + 1em);
    font-weight: var(--bold, 700);
}

.more_products:after {
    content: '';
    display: block;
    position: absolute;
    width: 1em;
    height: 1em;
    right: 0;
    bottom: 0;
    background-color: var(--pink);
}

.more_products:hover:after {
    animation-name: jump;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

@keyframes jump {
    0% {
        transform: translateY(0%);
    }
    17% {
        transform: translateY(-200%);
    }
    33% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-100%);
    }
    66% {
        transform: translateY(0%);
    }
    83% {
        transform: translateY(-33%);
    }
    100% {
        transform: translateY(0%);
    }
}

.uploads {
    background-color: #fff;
}

.uploads [role='heading'] {
    font-size: inherit;
}

#shopcontact_form fieldset,
#related_products {
    margin-top: 3rem;
}

.product_specification table {
    width: 100% !important;
}

.product_specification table tr > td:first-child {
    font-weight: var(--bold, 700);
}

.form-steps .step-data.active,
.form-steps .step-data {
    /* position: relative; */
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 2em var(--gap);
}

#row_content {
    max-width: calc(100vw - (var(--padding) * 2));
}

.info_wrapper {
    max-width: 100%;
    transition: all 1s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2em var(--gap);
    padding: 0;
    background: none !important;
    overflow: hidden;
}

@media screen and (min-width: 769px) {
    .info_wrapper {
        max-width: calc(
            (100vw - (var(--padding) * 2)) / 12 * 4 -
                (var(--gap) / 12 * (12 - 4))
        );
    }

    .form-steps .step-data .info_wrapper {
        transform: none;
        opacity: 0;
        margin-bottom: -10rem;
    }

    .form-steps .step-data > .info_wrapper,
    .form-steps .step-data > :first-child {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .form-steps .step-data.active .info_wrapper {
        transform: translateX(calc(-100% - (var(--gap) + 2rem)));
        opacity: 1;
    }
}
.h5[data-bg] {
    padding: 1rem;
    width: fit-content;
    position: relative;
}

.step-data .info_wrapper > :first-child .h5:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 25vw;
    left: 100%;
    top: 0%;
    background-image: url(../images/arrow_1.svg);
    transform: translate(var(--gap), 0%);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* https://shop-creart.democp.de/custom/images/icon_contact.svg */

.button[href*='mailto:'] {
    background-image: url(../images/icon_contact.svg);
}

.button[href*='tel:'] {
    background-image: url(../images/icon_phone.svg);
}
.button[href*='mailto:'],
.button[href*='tel:'] {
    background-position: 1.33rem 50%;
    background-size: 2.5rem auto;
    color: var(--white);
    display: inline-block;
    padding: 1rem 2rem 1rem 5rem;
}
aside .button[href*='mailto:'],
aside .button[href*='tel:'] {
    padding: 1rem 4rem 1rem 5rem;
}

.button[href*='mailto:']:hover,
.button[href*='tel:']:hover {
    background-position: 1.66rem 50%;
}

#sidebar_contact {
    background: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    padding: 0;
    box-shadow: none;
    margin: 1rem -2rem 1rem 0;
}

.imagegallery_shop + div:last-child {
    flex-grow: 1;
}

.boxes .cart_costs tr:not(table table tr) > * {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-image: linear-gradient(
        0deg,
        transparent 0.75rem,
        var(--white) 0.75rem,
        var(--white) calc(100% - 0.75rem),
        transparent calc(100% - 0.75rem)
    );
}

.boxes .cart_costs tr:not(table table tr) > :first-child {
    padding-left: 2rem;
}

.boxes .cart_costs tr:not(table table tr) > :last-child {
    padding-right: 2rem;
}

.boxes .cart_costs tr:not(table table tr):after {
    content: none;
}

#error_message_block,
#success_message_block {
    border: 0.5rem solid var(--white);
    padding: 2rem;
}

#error_message_block {
    margin-top: 1em;
}

#hamburger span[aria-hidden='true'] {
    display: block !important;
}