.card-noten{--noten-gap: 2.2cqw;--noten-tile: 27.88cqw;--noten-block: calc(3 * var(--noten-tile) + 2 * var(--noten-gap));display:none!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;align-items:center;justify-content:center;padding:5px;background:#fff;overflow:hidden;container-type:inline-size}.card-wrapper:hover .card-noten,.card-wrapper:focus-within .card-noten{display:flex!important}@media(hover:none){.card-wrapper:hover .card-noten,.card-wrapper:focus-within .card-noten{display:none!important}}.card-wrapper .card__inner:has(.card-noten) .card__product-labels,.card-wrapper .card__inner:has(.card-noten) .card__badge{transition:opacity .15s ease}@media(hover:hover){.card-wrapper:hover .card__inner:has(.card-noten) .card__product-labels,.card-wrapper:hover .card__inner:has(.card-noten) .card__badge,.card-wrapper:focus-within .card__inner:has(.card-noten) .card__product-labels,.card-wrapper:focus-within .card__inner:has(.card-noten) .card__badge{opacity:0}}.card-noten__inner{display:flex;flex-direction:column;gap:var(--noten-gap);width:100%}.card-noten__label{width:var(--noten-block);margin:0 0 1.2cqw;font-size:max(6.5px,2.5cqw);font-weight:500;line-height:1;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;text-align:center;white-space:nowrap;color:#2a2a2a}.card-noten__row{display:grid;grid-auto-flow:column;grid-auto-columns:var(--noten-tile);justify-content:start;gap:var(--noten-gap);margin:0;padding:0;list-style:none}.card-noten:not(.card-noten--single) .card-noten__row:has(.card-noten__item:nth-child(2)):not(:has(.card-noten__item:nth-child(3))){margin-left:calc((var(--noten-tile) + var(--noten-gap)) / 2)}.card-noten:not(.card-noten--single) .card-noten__row:not(:has(.card-noten__item:nth-child(2))){margin-left:calc(var(--noten-tile) + var(--noten-gap))}.card-noten--single .card-noten__label,.card-noten--single .card-noten__row{width:100%}.card-noten--single .card-noten__row{justify-content:center}.card-noten--single .card-noten__row:has(.card-noten__item:nth-child(4)){justify-content:start}.card-noten__item{position:relative;aspect-ratio:1 / 1;border-radius:max(4px,2.8cqw);overflow:hidden;background-color:#111;background-size:cover;background-position:center;box-shadow:0 3px 10px #7864502e}.card-noten__item:nth-child(4){box-shadow:none;-webkit-mask-image:linear-gradient(to right,#000000 0%,#000000 6%,rgba(0,0,0,0) 36%);mask-image:linear-gradient(to right,#000 0% 6%,#0000 36%)}.card-noten__item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000c7,#0006 34%,#0000 62%)}.card-noten__caption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:max(3px,2cqw) max(3px,2.4cqw);color:#fff;font-weight:500;font-size:max(6.5px,2.6cqw);letter-spacing:.01em;line-height:1.2;text-align:left;overflow-wrap:break-word}.card-wrapper .card__media .media>script{display:none}.card-wrapper .card__media .media>.card-noten-knop{display:none}@media(hover:none){.card-wrapper .card__inner:has(.card-noten-knop){z-index:2;pointer-events:none}.card-wrapper .card__inner:has(.card-noten-knop) :is(a,button,input,select,label,[role=button]){pointer-events:auto}.card-wrapper .card__media .media>.card-noten-knop{display:flex;position:absolute;top:auto;right:auto;left:1rem;bottom:1rem;z-index:4;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;min-width:0;max-width:none;margin:0;padding:0;border:0;border-radius:50%;background:#ffffffe0;color:#2a2a2a;box-shadow:0 1px 4px #0000001f;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}.card-wrapper .card__media .media>.card-noten-knop:before{content:"";position:absolute;top:-.8rem;right:-.8rem;bottom:-.8rem;left:-.8rem}.card-wrapper .card__media .media>.card-noten-knop svg{display:block;position:static;width:1.8rem;height:1.8rem;transition:transform .25s ease}.card-wrapper .card__media .media>.card-noten-knop[aria-expanded=true]{box-shadow:none;background:#f3f3f3}.card-wrapper .card__media .media>.card-noten-knop[aria-expanded=true] svg{transform:rotate(180deg)}.card-wrapper.is-noten-open .card-noten{display:flex!important}.card-wrapper.is-noten-open .card__inner .card__product-labels,.card-wrapper.is-noten-open .card__inner .card__badge{opacity:0}.card-wrapper .card__inner:has(.card-noten-knop) .card__badge:not(.right) .badge{margin-left:3.8rem}}
/*# sourceMappingURL=/cdn/shop/t/86/assets/component-card-noten.css.map */