/* Imported: reset.css */
html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
figure,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
caption,
legend,
table,
tr,
td,
th,
address,
blockquote,
img {
    margin: 0;
    padding: 0;
}

img,
fieldset {
    border: none;
}

blockquote,
q {
    quotes: none;
}

body *,
*:after,
*:before {
    box-sizing: border-box;
}

legend {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
}

button,
label,
summary {
    cursor: pointer;
}

html,
body {
    height: 100%;
}

body,
button,
input,
table,
textarea,
select {
    font-size: 1rem;
    line-height: 1.5;
    font-family:
        Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
        sans-serif;
}

body {
    background: var(--bg-body, #fff);
    color: #21292f;
    margin: 0;
    line-height: 1.5;
}
*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
}
:where(:not(:defined)) {
    display: block;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Segoe UI,
        Roboto,
        Helvetica Neue,
        Arial,
        Noto Sans,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        Segoe UI Symbol,
        "Noto Color Emoji";
    scroll-behavior: smooth;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

abbr:where([title]) {
    text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        Liberation Mono,
        Courier New,
        monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    background-image: none;
}

:-moz-focusring {
    outline: auto;
}

:-moz-ui-invalid {
    box-shadow: none;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}

button,
[role="button"] {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none;
}


/* Imported: root.css */
@view-transition {
    navigation: auto;
}

:root {
    --beige: #faf6e6;
    --bg-body: #fff;
    --border-color: #0f0f0f;
    --border-size: 5px;
    --font-headings: "Gooper";
    --font-subheadings: "Dosis";
    --main-top: 0px;
    --main-bottom: 0px;
    --bg-body: #faf6e6;
    --xbg-body: transparent;
    --bg-body: #fff;
    --border-color: #21292f;
    --border-size: 5px;
    --body-width: var(--step--2);
    --inner-width-border: calc(100% - ((var(--body-width) * 2) - 10px));
    --main-margin: calc(
        var(--step-7) + var(--step-1) + var(--border-size) +
            var(--border-size) + 3px
    );
    --body-width: var(--step--2);
    --bg-card: #fff;
    --auto-grid-max-columns: 1;
    --dhg-pink: #ff9ecf;
    --dhg-blue: #95c9e5;
    --border-color: #11152a;
}

:root {
    --step--2: clamp(0.78rem, calc(0.73rem + 0.23vw), 0.96rem);
    --step--1: clamp(0.94rem, calc(0.87rem + 0.33vw), 1.2rem);
    --step-0: clamp(1.13rem, calc(1.02rem + 0.48vw), 1.5rem);
    --step-1: clamp(1.35rem, calc(1.21rem + 0.67vw), 1.88rem);
    --step-2: clamp(1.62rem, calc(1.42rem + 0.92vw), 2.34rem);
    --step-3: clamp(1.94rem, calc(1.68rem + 1.25vw), 2.93rem);
    --step-4: clamp(2.33rem, calc(1.97rem + 1.69vw), 3.66rem);
    --step-5: clamp(2.8rem, calc(2.32rem + 2.26vw), 4.58rem);
    --step-6: clamp(3.36rem, calc(2.72rem + 3vw), 5.72rem);
    --step-7: clamp(4.03rem, calc(3.19rem + 3.96vw), 7.15rem);
    --step-8: clamp(4.84rem, calc(3.73rem + 5.21vw), 8.94rem);
    --step-9: clamp(5.81rem, calc(4.36rem + 6.82vw), 11.18rem);
    --step-10: clamp(6.97rem, calc(5.08rem + 8.89vw), 13.97rem);
}

:root {
    --space-3xs: clamp(0.56rem, calc(0.51rem + 0.24vw), 0.75rem);
    --space-2xs: clamp(0.56rem, calc(0.51rem + 0.24vw), 0.75rem);
    --space-xs: clamp(0.88rem, calc(0.81rem + 0.32vw), 1.13rem);
    --space-s: clamp(1.13rem, calc(1.02rem + 0.48vw), 1.5rem);
    --space-m: clamp(1.69rem, calc(1.54rem + 0.71vw), 2.25rem);
    --space-l: clamp(2.25rem, calc(2.05rem + 0.95vw), 3rem);
    --space-xl: clamp(3.38rem, calc(3.07rem + 1.43vw), 4.5rem);
    --space-2xl: clamp(4.5rem, calc(4.1rem + 1.9vw), 6rem);
    --space-3xl: clamp(6.75rem, calc(6.14rem + 2.86vw), 9rem);
    --space-4xl: clamp(7.88rem, calc(7.17rem + 3.33vw), 10.5rem);
    --space-5xl: clamp(7.88rem, calc(7.17rem + 3.33vw), 10.5rem);
    --space-3xs-2xs: clamp(0.56rem, calc(0.51rem + 0.24vw), 0.75rem);
    --space-2xs-xs: clamp(0.56rem, calc(0.41rem + 0.71vw), 1.13rem);
    --space-xs-s: clamp(0.88rem, calc(0.71rem + 0.79vw), 1.5rem);
    --space-s-m: clamp(1.13rem, calc(0.82rem + 1.43vw), 2.25rem);
    --space-m-l: clamp(1.69rem, calc(1.33rem + 1.67vw), 3rem);
    --space-l-xl: clamp(2.25rem, calc(1.64rem + 2.86vw), 4.5rem);
    --space-xl-2xl: clamp(3.38rem, calc(2.67rem + 3.33vw), 6rem);
    --space-2xl-3xl: clamp(4.5rem, calc(3.29rem + 5.71vw), 9rem);
    --space-3xl-4xl: clamp(6.75rem, calc(5.74rem + 4.76vw), 10.5rem);
    --space-4xl-5xl: clamp(7.88rem, calc(7.17rem + 3.33vw), 10.5rem);
    --space-s-l: clamp(1.13rem, calc(0.62rem + 2.38vw), 3rem);
    --space-xs-xl: clamp(0.88rem, calc(-0.1rem + 4.6vw), 4.5rem);
}


/* Imported: fonts.css */
@font-face {
    font-display: swap;
    font-family: "Gooper";
    font-style: bolder;
    font-weight: bolder;
    src: url("../fonts/font-gooper.otf") format("opentype");
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    text-wrap: balance;
    font-weight: 200;
}

h1,
h2,
h3 {
    letter-spacing: var(--tracking-s);
    line-height: 1;
}

h1 {
    font-size: var(--step-4);
}

h2 {
    font-size: var(--step-2);
}

h3 {
    font-size: var(--step-1);
}

h4 {
    font-size: var(--step-0);
}

h5,
h6 {
    font-size: var(--step--1);
}

/* Text Content Max Width */
blockquote:not([class]),
h4,
h5,
h6,
li,
p {
    max-width: 65ch;
    font-size: var(--step--1);
    line-height: 1.5;
}


/* Imported: css-base.css */
css-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    padding-left: var(--space-xs-xl);
    padding-right: var(--space-xs-xl);
    overflow: auto;
    max-width: 1600px;
    margin: 0 auto;
    background: green;
}
css-wrapper > header {
    position: fixed;
    top: 0;
    left: 0;
    height: 200px;
    width: 100%;
    z-index: 10;
    background: var(---bg-body);
    box-sizing: border-box;
}
css-wrapper > header > div {
    border-bottom: var(--border-size) solid;
    border-color: var(--border-color);
    width: calc(100% - (var(--space-xs-xl) * 2));
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

css-wrapper > main {
    position: relative;
    top: 0;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    inset: auto;
    min-height: 100vh;
    xpadding-top: calc(var(--main-top) - (var(--border-size) * 2));
    xpadding-bottom: calc(2 + var(--border-size));
    border-color: var(--border-color);
    border-left: var(--border-size) solid;
    border-right: var(--border-size) solid;
    background: red;
}
css-wrapper > main > div {
    width: 100%;
    inset: auto;
}
css-wrapper > footer {
    max-width: 1600px;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    margin: 0 auto;
}
css-wrapper footer > div {
    width: calc(100% - (var(--space-xs-xl) * 2));
    padding: 1rem;
    background: var(--bg-body);
    margin: 0 auto;
}


/* Imported: css-grid.css */
.border-bottom {
    padding-top: var(--step-0);
    border-bottom: var(--border-size) solid var(--border-color);
}

.grid {
    --columns: 12;
    --gutter: var(--border-size);
    display: grid;
    grid-gap: var(--border-size);
    grid-template-columns: 1fr;
    background-color: var(--border-color);
    border-bottom: var(--border-size) solid var(--border-color);
}
.grid > .column {
    background-color: white;
    padding: 0;
    display: grid;
    grid-area: "innercolumn";
    grid-template-columns: 1fr;
}
.inner-blocks {
    grid-template-columns: 1fr;
    --blocks-bg-color: #fff;
    --blocks-bg-alpha: var(--blocks-bg-color);
    border-color: var(--blocks-bg-color);
    background: linear-gradient(var(--blocks-bg-alpha), var(--blocks-bg-color));
}
.blocks {
    display: grid;
    padding: var(--step-0);
}

.autogrid {
    --gutter: var(--border-size);
    --min: 22rem; /* Ich habe den Mindestwert etwas erhöht für eine typische 3-Spalten-Ansicht */
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    grid-auto-flow: dense;
    background-color: var(--border-color);
}

/* Styling für die Spalten-Elemente */
.autogrid > div {
    background-color: var(--beige);
    padding: var(--step-0);
}

@media screen and (min-width: 767.9px) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
    .grid > .column {
        grid-column: span var(--columns);
    }
    .autogrid {
        --min: 26rem; /* Ich habe den Mindestwert etwas erhöht für eine typische 3-Spalten-Ansicht */
        display: grid;
    }
}


/* Imported: css-card.css */
css-card {
    display: block;
    background-color: var(--card-color);
    content: "MOLLI";
}


/* Imported: css-button.css */
.ui-button {
    position: relative;
    display: inline-block;
    transform: translate3d(
            var(--un-translate-x),
            var(--un-translate-y),
            var(--un-translate-z)
        )
        rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
        rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
        skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
        scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
    cursor: pointer;
    border-width: 0;
    border-width: 5px;
    --un-border-opacity: 1;
    border-color: rgba(22, 27, 50, var(--un-border-opacity));
    border-radius: 9999px;
    --un-bg-opacity: 1;
    background-color: rgba(22, 27, 50, var(--un-bg-opacity));
    padding: 0.35em 0.8em;
    font-size: var(--step-2);
    line-height: 1;
    font-weight: 72;
    font-family: Hughie, sans-serif;
    --un-text-opacity: 1;
    color: rgba(255, 255, 255, var(--un-text-opacity));
    transition-property:
        color, background-color, border-color, outline-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
    will-change: transform;
    font-size: var(--space-m);
}

.ui-button:active:not(:disabled):not(.--tooltip) {
    --un-scale-x: 0.9;
    --un-scale-y: 0.9;
    transform: translate(var(--un-translate-x))
        translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
        rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
        rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
        skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
        scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
}

.ui-button:disabled {
    cursor: default;
    opacity: 0.5;
}

@media only screen and (hover: hover) and (pointer: fine) {
    .ui-button:hover,
    .ui-button:focus-visible {
        --un-scale-x: 1.05;
        --un-scale-y: 1.05;
        transform: translate(var(--un-translate-x))
            translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
            rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
            rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
            skew(var(--un-skew-x)) skewY(var(--un-skew-y))
            scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
            scaleZ(var(--un-scale-z));
        --un-bg-opacity: 1;
        background-color: rgba(255, 255, 255, var(--un-bg-opacity));
        --un-text-opacity: 1;
        color: rgba(22, 27, 50, var(--un-text-opacity));
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }
}

.ui-button.--shallow {
    padding-top: var(--space-3xs-2xs);
    padding-bottom: var(--space-3xs-2xs);
}

.ui-button.--mobile {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    font-size: var(--step-1);
    line-height: 1;
}

.ui-button.--uppercase {
    font-weight: 55;
    text-transform: uppercase;
}

.ui-button.--bordered {
    background-color: transparent;
    --un-text-opacity: 1;
    color: rgba(22, 27, 50, var(--un-text-opacity));
}

.ui-button.--seamless {
    border-color: transparent;
    background-color: transparent;
    --un-text-opacity: 1;
    color: rgba(22, 27, 50, var(--un-text-opacity));
}

.ui-button.--seamless-dark {
    border-color: transparent;
    background-color: transparent;
    --un-text-opacity: 1;
    color: rgba(255, 255, 255, var(--un-text-opacity));
}

.ui-button.--yellow {
    --un-border-opacity: 1;
    border-color: rgba(255, 237, 155, var(--un-border-opacity));
    --un-bg-opacity: 1;
    background-color: rgba(255, 237, 155, var(--un-bg-opacity));
    font-weight: 72;
    --un-text-opacity: 1;
    color: rgba(22, 27, 50, var(--un-text-opacity));
}

@media only screen and (hover: hover) and (pointer: fine) {
    .ui-button.--yellow:hover,
    .ui-button.--yellow:focus-visible {
        --un-border-opacity: 1;
        border-color: rgba(255, 255, 255, var(--un-border-opacity));
        --un-bg-opacity: 1;
        background-color: rgba(22, 27, 50, var(--un-bg-opacity));
        --un-text-opacity: 1;
        color: rgba(255, 255, 255, var(--un-text-opacity));
    }
}

.ui-button_hover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.7em;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    --un-translate-x: 2em;
    transform: translate(var(--un-translate-x))
        translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
        rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
        rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
        skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
        scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
    transition-property:
        color, background-color, border-color, outline-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

.ui-button.--hover {
    overflow: hidden;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@media only screen and (hover: hover) and (pointer: fine) {
    .ui-button.--hover:hover,
    .ui-button.--hover:focus-visible {
        padding-right: 1.7em;
    }

    .ui-button.--hover: hover .ui-button_hover,.ui-button.--hover:focus-visible .ui-button_hover {
        --un-translate-x: 0;
        transform: translate(var(--un-translate-x))
            translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
            rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
            rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
            skew(var(--un-skew-x)) skewY(var(--un-skew-y))
            scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
            scaleZ(var(--un-scale-z));
    }
}

.--touch-screen .ui-button.--hover {
    padding-right: 1.7em;
}

.--touch-screen .ui-button.--hover .ui-button_hover {
    --un-translate-x: 0;
    transform: translate(var(--un-translate-x))
        translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
        rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
        rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
        skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
        scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
}


/* Imported: css-heading.css */
h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
    text-align: center;
    font-family: var(--font-headings);
    text-wrap: balance;
    font-weight: 900;
    line-height: 1.2;
    margin: var(--step-0);
}


/* Imported: css-shop-home.css */
*,
::after,
::before {
    --un-translate-z: 0;
    --un-translate-y: 0;
    --un-translate-x: 0;
    --un-skew-y: 0;
    --un-skew-x: 0;
    --un-scale-z: 1;
    --un-rotate-z: 0;
    --un-rotate-y: 0;
    --un-rotate-x: 0;
    --un-rotate: 0;
    --un-scale-y: 1;
    --un-scale-x: 1;
}

*,
::after,
::before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
}

::after,
::before {
    border-color: #161b32;
}

button {
    appearance: button;
    background-image: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
    text-transform: none;
}

button,
p,
ul {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
}

:disabled {
    cursor: default;
}

.img-logo {
    width: unset;
}
.product-cards {
    padding-left: var(--space-m-l);
    padding-right: var(--space-m-l);
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.product-cards a {
    border-radius: 0.6em;
}

.product-cards-grid {
    column-gap: 19.6392px;
    row-gap: 19.6392px;
}

@media (min-width: 1280px) {
    .product-cards-grid {
        column-gap: 19.6392px;
        row-gap: 19.6392px;
    }
}

.product-cards-item {
    aspect-ratio: 69/78;
    /* position: relative; */
    transform-style: preserve-3d;
    /* max-width: 300px; */
}

.product-cards-pos,
.product-cards-pos .product-cards-image img {
    transition:
        color, background-color, border-color, outline-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
}

.product-cards-pos {
    backface-visibility: hidden;
    background-color: transparent;
    bottom: 0;
    font-size: var(--space-m);
    left: 0;
    perspective: 1200px;
    perspective-origin: center center;
    position: absolute;
    right: 0;
    top: 0;

    border-radius: 0em;
    outline: 0px solid var(--border-color);
    transform-origin: center bottom;
    transition:
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        outline 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-cards-pos::before {
    /* This is the visual style for the shadow */
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.6em;
    bottom: calc(0px - var(--space-2xs-xs));
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    /* --- CHANGES START HERE --- */

    /* 1. Make the pseudo-element invisible by default. */
    opacity: 0;

    /* 2. Add a transition for the opacity property to create a smooth fade-in effect. */
    /* The timing function is matched with your existing transitions for consistency. */
    transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);

    /* 3. (Optional but good practice) Ensure the pseudo-element is behind the card's content. */
    z-index: -1;

    /* --- CHANGES END HERE --- */
}

.product-cards-pos .product-cards-image img {
    transform-origin: 50% 20%;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* This media query correctly targets devices where a hover state is meaningful. */
@media only screen and (hover: hover) and (pointer: fine) {
    /* --- NEW RULE ADDED HERE --- */
    /* 4. On hover or focus, set the opacity to 1 to make the shadow visible. */
    .product-cards-pos:focus-visible::before,
    .product-cards-pos:hover::before {
        opacity: 1;
    }
    /* --- END OF NEW RULE --- */

    .product-cards-pos:focus-visible,
    .product-cards-pos:hover {
        --un-translate-x: 2%;
        --un-rotate-x: 0;
        --un-rotate-y: 0;
        --un-rotate-z: 0;
        --un-rotate: -2deg;
        --un-translate-y: -5%;
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
        border-radius: 0.4em;
        outline: var(--border-size) solid var(--border-color);
        z-index: 10;
    }

    .product-cards-pos:focus-visible,
    .product-cards-pos:focus-visible .product-cards-image img,
    .product-cards-pos:hover,
    .product-cards-pos:hover .product-cards-image img {
        transform: translate(var(--un-translate-x))
            translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
            rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
            rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
            skew(var(--un-skew-x)) skewY(var(--un-skew-y))
            scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
            scaleZ(var(--un-scale-z));
    }

    .product-cards-pos:focus-visible .product-cards-image img,
    .product-cards-pos:hover .product-cards-image img {
        --un-scale-y: 1.1;
        --un-scale-x: 1.1;
    }
}

.product-cards-front,
.product-cards-image img {
    transform: translate3d(
            var(--un-translate-x),
            var(--un-translate-y),
            var(--un-translate-z)
        )
        rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
        rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z))
        skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
        scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
}

.product-cards-front {
    backface-visibility: hidden;
    border-color: #fff;
    border-radius: 0.4em;
    border-width: 0.3em;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: center center;
    will-change: transform;
}

.product-cards-image {
    border-radius: 2px;
    border-width: 4px;
    bottom: 0;
    font-size: var(--space-m);
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

.product-cards-image img {
    object-fit: contain;
    /* width: 90%; */
    /* height: 69%; */
    margin: 0 auto;
    margin-top: -2%;
}

.product-cards-plate {
    text-align: center;
    bottom: 0.5em;
    left: 0.5em;
    position: absolute;
    right: 0.5em;
    max-width: 90%;
    margin: 0 auto;
}

.product-cards-plate h2.title {
    font-size: var(--step-0);
    font-weight: 900;
    padding-top: var(--space-3xs);
}

.product-cards-plate p.subtitle {
    font-size: var(--step--1);
    font-weight: bold;
    line-height: 1;
    padding-bottom: var(--space-3xs);
    padding-top: var(--space-3xs);
    text-transform: uppercase;
}

.auto-grid {
    --max-column-width: 100% / var(--auto-grid-max-columns, infinity) -
        var(--auto-grid-gap, 1rem);
    --column-width: max(
        var(--max-column-width),
        min(var(--auto-grid-min-size, 10rem), 100%)
    );

    background: var(--beige);

    --auto-grid-min-size: calc(var(--step-10) * 1.1);
    --auto-grid-gap: var(--step-3);
    padding: var(--step-2);

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));

    /* vertical gap falls back to general gap then falls back to 1rem*/
    gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem))
        var(--auto-grid-gap, 1rem);
}


/* Imported: css-layout.css */
@media (min-width: 424.9px) {
    :root {
        --body-width: var(--step-4);
        --auto-grid-max-columns: 1;
    }
}
@media (min-width: 767.9px) {
    :root {
        --body-width: var(--step-5);
        --auto-grid-max-columns: 2;
    }
    .sticky {
        position: relative;
    }
}
@media (min-width: 1023.9px) {
    :root {
        --body-width: var(--step-5);
        --auto-grid-max-columns: 3;
    }
}
html {
    scroll-behavior: smooth;
    overflow-y: auto;
}

.wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.container {
    display: grid;
    grid-template-areas: "left center right";
    grid-template-columns: var(--body-width) 1fr var(--body-width);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.center {
    grid-area: center;
}

.left {
    background: var(--bg-body);
    grid-area: left;
    border-right: var(--border-size) solid var(--border-color);
}

.right {
    background: var(--bg-body);
    grid-area: right;
    border-left: var(--border-size) solid var(--border-color);
}

.header {
    position: fixed;
    margin-left: calc(var(--border-size) * -1);
    width: var(--inner-width-border);
    z-index: 10;
}

.logo {
    height: calc(var(--step-6) + var(--border-size));
    padding-top: var(--step--2);
    background: var(--bg-body);
    display: flex;
    justify-content: center;
    border-bottom: var(--border-size) solid var(--border-color);
}

.logo img {
    position: absolute;
    height: var(--step-6);
}

.history {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: end;
    display: none;
    font-family: Dosis;
}

.text-subline {
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--step--2);
    color: var(--border-color);
}

.text-subline-footer {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--step--2);
    color: var(--border-color);
}

.banner {
    padding-top: var(--step--2);
    padding-inline: var(--step--2);
    font-size: var(--step--1);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    font-family: Dosis;
    display: none;
}

.main {
    margin-top: var(--main-margin);
}

.footer {
    position: relative;
    bottom: 0px;
    margin-left: calc(var(--border-size) * -1);
    background: var(--bg-body);
    padding-block: var(--step--2);
    display: flex;
    justify-content: space-between;
    font-family: Dosis;
    margin-left: calc(var(--border-size) * -1);
    z-index: 30;
    margin-right: calc(var(--border-size) * -1);
    padding-bottom: calc(50vh - var(--main-margin));
    overflow: hidden;
}
/* Left, Center (flexible), Right */
.nav {
    background: var(--border-color);
    border-bottom: var(--border-size) solid var(--border-color);
    margin-left: var(--border-size);
    margin-right: var(--border-size);
    display: grid;
    align-items: center;
}
@media (min-width: 869.69px) {
    .nav {
        grid-template-columns: auto 1fr auto;
        background: var(--bg-body);
    }
    .banner {
        display: block;
    }
}
.nav-left {
    grid-column: 1; /* Assign to the third column */
    text-align: left; /* Ensure text alignment is right */
}

.nav-center {
    grid-column: 2; /* Assign to the second column */
    justify-self: center; /* Horizontally center the item within its grid cell */
    text-align: center; /* Ensure text alignment is center if it's inline content */
}
.nav-right {
    grid-column: 3; /* Assign to the third column */
    text-align: right; /* Ensure text alignment is right */
}

.nav a {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 700;
    font-size: var(--step--2);
    overflow: hidden;
    color: #fff;
    background: var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-width: 80px;
}

@media (min-width: 374.9px) {
    .history {
        display: flex;
    }
}

.sticky {
    position: sticky;
    top: var(--main-margin);
    xborder-bottom: var(--border-size) solid var(--border-color);
}


/* Imported: css-prodi.css */
.prodi {
}

.prodi .block-type-text {
    padding: var(--step-2);
}


/* Original rules from: assets/css/styles.css */
@view-transition {
    navigation: auto;
}

.beige {
    background-color: var(--beige);
}

.subheading {
    font-family: var(--font-subheadings);
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
}

header .anno {
    width: 100%;
    height: auto;
    display: none;
    justify-content: space-between;
    align-items: end;
    position: absolute;
    left: var(--space-xs-xl);
    bottom: 7px;
    width: calc(100% - (var(--space-xs-xl) * 2));
    padding: 0 auto;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--step--2);
    line-height: 1.2;
}
.text {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--step--2);
    line-height: 1.5;
}

@media (min-width: 669px) {
    header .text {
        display: flex;
    }
}
css-logo {
    display: block;
    width: calc(var(--step-10) * 1.69);
    height: auto;
    position: relative;
    top: calc(var(--step--1) - 5px);
}

css-border {
    display: block;
    width: var(--space-m);
    height: var(--space-m);
    background-color: var(--bg-body, white);
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4gIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMDAgMEM0NC43NzIgMCAwIDQyLjY3NSAwIDk1LjMxN1YwaDEwMHoiLz48L3N2Zz4=");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4gIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMDAgMEM0NC43NzIgMCAwIDQyLjY3NSAwIDk1LjMxN1YwaDEwMHoiLz48L3N2Zz4=");
    mask-repeat: no-repeat;
    mask-size: contain;
    &[top] {
        transform: rotate(90deg);
    }
    &[bottom] {
        transform: rotate(270deg);
    }
    &[right] {
        transform: rotate(180deg);
    }
}
section {
    border-bottom: var(--border-size) solid;
}
main > div > section:last-of-type {
    border-bottom: 0px;
}
.h2 {
    transform: scale(1) rotate(-2deg) translateZ(0px);
    opacity: 1;
    border-width: 5px;

    border-color: rgba(22, 27, 50, 1);
    border-radius: 6px;

    background-color: rgba(255, 255, 255, 1);
    padding-top: var(--space-2xs-xs);
    padding-bottom: var(--space-2xs-xs);
    padding-left: var(--space-s-m);
    padding-right: var(--space-s-m);
    font-size: var(--step-3);
    line-height: 1;
    font-weight: 72;
    line-height: 0.95em;

    color: rgba(22, 27, 50, 1);
    max-width: 80%;
    margin: 0 auto;
    margin-top: var(--step-1);
    font-size: var(--step-1);
    margin-bottom: var(--step-3);
}
.dosis {
    font-size: Dosis;
}

.h3 {
    transform: scale(1) rotate(0deg) translateZ(0px);
    opacity: 1;
    border-width: 5px;

    border-color: rgba(22, 27, 50, 1);
    border-radius: 6px;

    background-color: rgba(22, 27, 50, 1);
    padding-top: var(--space-2xs-xs);
    padding-bottom: var(--space-2xs-xs);
    padding-left: var(--space-s-m);
    padding-right: var(--space-s-m);
    font-size: var(--step-3);
    line-height: 1;
    font-weight: 72;
    line-height: 0.95em;

    color: white;
    max-width: 60%;
    margin: 0 auto;
    margin-top: var(--step-1);
    font-size: var(--step-1);
}
.white {
    background-color: white;
}
.schatten:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    bottom: calc(0px - var(--space-2xs-xs));
    display: block;
    border-radius: 0.4em;
    background-color: #0000001a;
    content: "";
}