/* Startseite, Showroom: ruhiger. Alle Bilder einheitlich einfarbig in Markenton,
   Farbe erst beim Ueberfahren. Weniger Text pro Karte. */

.calm-media {
    position: relative;
    isolation: isolate;
}

.calm-media img {
    filter: grayscale(1) contrast(.92) brightness(1.06);
    transition: filter .6s var(--ease), transform .6s var(--ease);
}

[data-theme="dark"] .calm-media img {
    filter: grayscale(1) contrast(.9) brightness(.82);
}

/* Markenton darueber, wie ein Duoton */
.calm-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(140deg, var(--brand), #7947C7);
    mix-blend-mode: color;
    opacity: .55;
    pointer-events: none;
    transition: opacity .6s var(--ease);
}

.product:hover .calm-media img,
.case-card:hover .calm-media img {
    filter: none;
}

.product:hover .calm-media::after,
.case-card:hover .calm-media::after {
    opacity: 0;
}

/* Produkt: Rahmen ohne Leiste, Bild ruhiger angeschnitten */
.product--calm .product__body {
    gap: 1.25rem;
    justify-content: center;
}

.product--calm .product__body > p {
    max-width: 26rem;
}

.product--calm .product__actions {
    margin-top: .5rem;
}

.product--calm .frame {
    max-height: 22rem;
}

.product--calm .frame img {
    object-fit: cover;
    object-position: top left;
}

/* Cases: Titel, ein Satz, Herkunft. Mehr steht im Case. */
.case-card--calm .case-card__body {
    gap: .375rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.case-card--calm .case-card__from {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .04em;
}

.case-card--calm h3 {
    font-size: 1.25rem;
}

.case-card--calm p:not(.case-card__from) {
    color: var(--text-muted);
    font-size: .9375rem;
}

.case-card--calm .archive-art {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .calm-media img,
    .calm-media::after {
        transition: none;
    }
}