/* WIRKSAM: quiet editorial surfaces and interaction, shared by website and editor. */
@layer wirksam-brand {
    :is(body.site-body, .editor-site) {
        --wirksam-accent: #754c94;
        --wirksam-line: #252c2518;
        --wirksam-ease: cubic-bezier(.22, .7, .3, 1);
        -webkit-font-smoothing: antialiased;
    }

    :is(body.site-body, .editor-site) ::selection { background: #754c9426; color: #252c25; }
    :is(body.site-body, .editor-site) :is(h1, h2) { text-wrap: balance; }
    :is(body.site-body, .editor-site) .module-responsive-text p { text-wrap: pretty; }
    :is(body.site-body, .editor-site) [data-scroll-reveal] {
        opacity: 1 !important;
        filter: none !important;
        translate: none !important;
        transform: none !important;
        transition: none !important;
    }
    :is(body.site-body, .editor-site) a:focus-visible {
        outline: 2px solid #754c94 !important;
        outline-offset: 5px;
    }

    :is(body.site-body, .editor-site) .site-header {
        background: #fffffff2 !important;
        box-shadow: 0 4px 25px #252c2505 !important;
        backdrop-filter: blur(14px);
    }
    :is(body.site-body, .editor-site) .site-nav-link {
        transition: color .24s ease, border-color .24s ease !important;
    }
    :is(body.site-body, .editor-site) .site-desktop-nav .site-nav-link::after {
        content: '' !important;
        display: block !important;
        position: absolute;
        inset: auto 0 -1px;
        height: 1px;
        background: #754c94 !important;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease !important;
    }
    :is(body.site-body, .editor-site) .site-nav-link:is(:hover, :focus-visible) { color: #754c94 !important; }
    :is(body.site-body, .editor-site) .site-desktop-nav .site-nav-link:is(:hover, :focus-visible, .is-active)::after { transform: scaleX(1); }
    :is(body.site-body, .editor-site) .site-nav-link.is-active { border-bottom-color: transparent !important; color: #754c94 !important; }

    :is(body.site-body, .editor-site) .site-button {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border-radius: 9px !important;
        background: #29342d !important;
        border-color: #29342d !important;
        box-shadow: 0 4px 12px #252c2510, inset 0 1px #ffffff18 !important;
        transition: transform .28s var(--wirksam-ease), box-shadow .28s ease, background-color .28s ease !important;
        transform: none !important;
    }
    :is(body.site-body, .editor-site) .site-button-secondary {
        background: #ffffff70 !important;
        color: #29342d !important;
        border-color: #29342d33 !important;
    }
    :is(body.site-body, .editor-site) .site-button::before {
        content: '' !important;
        display: block !important;
        position: absolute;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(105deg, transparent 20%, #ffffff28 45%, #ffffff55 50%, #ffffff28 55%, transparent 80%) !important;
        opacity: .75 !important;
        transform: translateX(-145%) skewX(-12deg) !important;
        transition: transform .8s var(--wirksam-ease) !important;
        animation: none !important;
        pointer-events: none;
    }
    :is(body.site-body, .editor-site) .site-button::after {
        position: relative;
        z-index: 2;
        transition: transform .28s ease;
    }
    :is(body.site-body, .editor-site) .site-button:focus-visible::before { transform: translateX(145%) skewX(-12deg) !important; }
    :is(body.site-body, .editor-site) .site-button:active { transform: translateY(0) !important; }

    :is(body.site-body, .editor-site) .wirksam-cover-opening {
        position: relative;
        background: radial-gradient(ellipse at 50% 52%, #754c940c, transparent 61%), linear-gradient(180deg, #fff 0%, #faf9f6 100%) !important;
        padding-block: 42px 46px !important;
        border-bottom: 1px solid var(--wirksam-line);
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening .site-grid:first-child p {
        display: inline-block;
        padding: 5px 12px;
        border: 1px solid #754c9425;
        border-radius: 30px;
        background: #754c9407;
        margin-bottom: 12px;
        color: #754c94 !important;
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening h1 { font-size: clamp(30px, 3.6vw, 48px) !important; }
    :is(body.site-body, .editor-site) .wirksam-cover-opening [data-grid-width="3"] {
        padding-block: 18px;
        gap: 12px;
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening [data-grid-width="3"] > :is(.module-responsive, .editor-module) {
        padding: 18px 20px !important;
        border: 1px solid #754c9412;
        border-radius: 12px;
        background: #ffffff85;
        transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening h2 { font-size: clamp(14px, 1.35vw, 17px) !important; }
    :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport {
        --cover-page-depth: 11px;
        position: relative;
        isolation: isolate;
        overflow: visible !important;
        transform-origin: center;
        transform: perspective(1200px) rotateX(3deg) rotateY(-11deg) rotateZ(-1deg);
        border: 1px solid #252c2512;
        box-shadow: 12px 28px 42px #40324930, 3px 8px 12px #40324918 !important;
        transition: transform .55s var(--wirksam-ease), box-shadow .55s ease !important;
    }
    /* The paper block sits behind the original cover and stays visible at rest. */
    :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport::before {
        content: '';
        position: absolute;
        inset: 4px calc(-1 * var(--cover-page-depth)) calc(-1 * var(--cover-page-depth)) 4px;
        z-index: -1;
        pointer-events: none;
        border: 1px solid #bfbab4;
        border-radius: 0 2px 3px 0;
        background: linear-gradient(90deg, #d0cbc4, transparent 8%, transparent 96%, #c4beb6), repeating-linear-gradient(0deg, #fdfcf8 0 1px, #d9d5ce 1px 2px, #f6f4ef 2px 4px);
        box-shadow: 2px 2px 0 #eeeae4, 3px 3px 0 #bfbab4;
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport > a {
        position: relative;
        display: block;
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport > a::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg, #211a252b, #ffffff18 1.5%, #211a2514 3%, transparent 7%, transparent 97%, #ffffff18);
    }
    :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 35%, #ffffff08 43%, #ffffff45 50%, #ffffff08 57%, transparent 65%);
        background-size: 250% 100%;
        background-position: 150% 0;
        opacity: 0;
        transition: background-position 1.15s var(--wirksam-ease), opacity .25s ease !important;
    }

    :is(body.site-body, .editor-site) .wirksam-intro { background: #fff !important; }
    :is(body.site-body, .editor-site) .wirksam-intro [data-grid-width="4"] p,
    :is(body.site-body, .editor-site) .wirksam-topics .site-grid:first-child p,
    :is(body.site-body, .editor-site) .wirksam-media-teaser p:first-child { color: #754c94 !important; }
    :is(body.site-body, .editor-site) .wirksam-topics { background: #f4f3ef !important; }
    :is(body.site-body, .editor-site) .wirksam-topics .site-grid:not(:first-child) { gap: 18px !important; margin-bottom: 18px !important; }
    :is(body.site-body, .editor-site) .wirksam-topics .site-grid:not(:first-child) > [data-grid-width] {
        border: 1px solid #252c250b;
        border-radius: 16px;
        background: #fff;
        padding: 28px !important;
        box-shadow: 0 3px 12px #252c2503;
        transition: box-shadow .3s ease, border-color .3s ease;
    }
    :is(body.site-body, .editor-site) .wirksam-topics .site-grid:not(:first-child) p { max-width: none; }
    :is(body.site-body, .editor-site) .wirksam-archive-teaser {
        background: radial-gradient(ellipse at 20% 50%, #ffffffa0, transparent 65%), #e9eee3 !important;
    }
    :is(body.site-body, .editor-site) .wirksam-archive-teaser .module-image {
        transform: rotate(-3deg);
        transition: transform .55s var(--wirksam-ease), box-shadow .55s ease;
    }
    :is(body.site-body, .editor-site) .wirksam-media-teaser {
        background: linear-gradient(115deg, #f3eef7, #faf9f6) !important;
        border-block: 1px solid #754c9410;
    }
    :is(body.site-body, .editor-site) .wirksam-page-intro {
        background-image: linear-gradient(115deg, #ffffff65, transparent 65%) !important;
        border-bottom: 1px solid var(--wirksam-line);
    }
    :is(body.site-body, .editor-site) .wirksam-archive-group a { transition: color .25s ease, padding-left .25s ease; }
    :is(body.site-body, .editor-site) .wirksam-archive-group a::after {
        border-radius: 5px;
        background: #f0ebf4;
        color: #67417e;
        transition: background-color .25s ease, color .25s ease;
    }
    .wirksam-archive-tools :is(input, select) {
        border-radius: 9px;
        transition: border-color .25s ease, box-shadow .25s ease;
    }
    .wirksam-archive-tools :is(input, select):focus-visible {
        border-color: #754c94;
        outline: 2px solid #754c9440;
        outline-offset: 2px;
        box-shadow: 0 4px 16px #754c940c;
    }
    :is(body.site-body, .editor-site) .site-footer-builder { border-top: 1px solid #252c2512; }
    :is(body.site-body, .editor-site) .site-footer-builder a { transition: color .25s ease, text-decoration-color .25s ease; }

    @media (hover: hover) and (pointer: fine) {
        :is(body.site-body, .editor-site) .site-button:hover {
            background: #38463c !important;
            box-shadow: 0 10px 22px #252c2520, inset 0 1px #ffffff25 !important;
            transform: translateY(-2px) !important;
        }
        :is(body.site-body, .editor-site) .site-button-secondary:hover { background: #fff !important; }
        :is(body.site-body, .editor-site) .site-button:hover::before { transform: translateX(145%) skewX(-12deg) !important; }
        :is(body.site-body, .editor-site) .site-button:hover::after { transform: translate(2px, -2px); }
        :is(body.site-body, .editor-site) .wirksam-cover-opening [data-grid-width="3"] > :is(.module-responsive, .editor-module):hover {
            background: #fff;
            border-color: #754c9430;
            box-shadow: 0 5px 20px #754c9408;
        }
        :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image:has(a:is(:hover, :focus-visible)) .module-image__viewport {
            transform: perspective(1200px) translateY(-5px) rotateX(5deg) rotateY(-16deg) rotateZ(-2deg) scale(1.045);
            box-shadow: 16px 34px 52px #40324938, 4px 10px 14px #4032491c !important;
        }
        :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image:has(a:is(:hover, :focus-visible)) .module-image__viewport::after {
            opacity: .7;
            background-position: -50% 0;
        }
        :is(body.site-body, .editor-site) .wirksam-topics .site-grid:not(:first-child) > [data-grid-width]:hover {
            border-color: #754c9420;
            box-shadow: 0 8px 24px #252c2507;
        }
        :is(body.site-body, .editor-site) .wirksam-archive-teaser .module-image:has(a:hover) { transform: rotate(0deg) translateY(-3px); }
        :is(body.site-body, .editor-site) .wirksam-archive-group a:hover { color: #754c94; padding-left: 6px; }
        :is(body.site-body, .editor-site) .wirksam-archive-group a:hover::after { background: #754c94; color: #fff; }
    }

    @media (max-width: 767px) {
        :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport { --cover-page-depth: 8px; }
        :is(body.site-body, .editor-site) .wirksam-cover-opening { padding-block: 28px 34px !important; }
        :is(body.site-body, .editor-site) .wirksam-cover-opening [data-grid-width="3"] > :is(.module-responsive, .editor-module) { padding: 12px !important; min-height: 70px; }
        :is(body.site-body, .editor-site) .wirksam-cover-opening [data-grid-width="3"] { gap: 8px; }
        :is(body.site-body, .editor-site) .wirksam-cover-opening h2 { font-size: 13px !important; }
        :is(body.site-body, .editor-site) .wirksam-topics .site-grid:not(:first-child) > [data-grid-width] { padding: 22px !important; }
    }
    .editor-viewport.viewport-mobile .editor-site .wirksam-cover-opening .module-image__viewport { --cover-page-depth: 8px; }
    .editor-viewport.viewport-mobile .editor-site .wirksam-cover-opening { padding-block: 28px 34px !important; }
    .editor-viewport.viewport-mobile .editor-site .wirksam-cover-opening [data-grid-width="3"] > :is(.module-responsive, .editor-module) { padding: 12px !important; min-height: 70px; }
    .editor-viewport.viewport-mobile .editor-site .wirksam-cover-opening [data-grid-width="3"] { gap: 8px; }
    .editor-viewport.viewport-mobile .editor-site .wirksam-cover-opening h2 { font-size: 13px !important; }
    .editor-viewport.viewport-mobile .editor-site .wirksam-topics .site-grid:not(:first-child) > [data-grid-width] { padding: 22px !important; }
}

/* The shop uses the same visual language; checkout behaviour stays with its own module. */
.shop-body { -webkit-font-smoothing: antialiased; background: #faf9f6; }
.shop-body .shop-header { background: #fffffff2; border-color: #252c2512; }
.shop-body :is(.shop-card, .shop-panel, .account-sidebar, .account-issue) { border-radius: 16px; box-shadow: 0 5px 22px #252c2505; }
.shop-body .shop-card { border-color: #252c2515; transition: border-color .3s ease, box-shadow .3s ease; }
.shop-body .shop-cover { background: radial-gradient(ellipse at center, #eee5f4, #f4f0f5); }
.shop-body .shop-cover img { transition: transform .5s ease; }
.shop-body .shop-button {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 9px;
    transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.shop-body .shop-button::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 20%, #ffffff35 50%, transparent 80%);
    transform: translateX(-145%) skewX(-12deg); transition: transform .8s ease;
}
.shop-body .shop-button:focus-visible::before { transform: translateX(145%) skewX(-12deg); }
.shop-body .shop-form :is(input:not([type=checkbox]), select, textarea) { border-radius: 8px; transition: border-color .25s ease, box-shadow .25s ease; }
.shop-copyright { margin-top: 28px; padding-top: 20px; border-top: 1px solid #252c2518; font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
    .shop-body .shop-card:hover { border-color: #754c9425; box-shadow: 0 10px 30px #252c2509; }
    .shop-body .shop-card:hover .shop-cover img { transform: rotate(0deg) translateY(-3px); }
    .shop-body .shop-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px #252c2520; }
    .shop-body .shop-button:not(:disabled):hover::before { transform: translateX(145%) skewX(-12deg); }
}

@layer wirksam-brand {
    @media (prefers-reduced-motion: reduce) {
        :is(body.site-body, .editor-site) :is(.site-button, .site-button::before, .site-button::after, .site-nav-link, .site-nav-link::after, .module-image, .module-image__viewport, .wirksam-archive-group a, .wirksam-archive-group a::after),
        :is(body.site-body, .editor-site) .wirksam-cover-opening [data-grid-width="3"] > :is(.module-responsive, .editor-module),
        :is(body.site-body, .editor-site) .wirksam-topics [data-grid-width] {
            transition: none !important;
            animation: none !important;
        }
        :is(body.site-body, .editor-site) .site-button:is(:hover, :focus-visible)::before { display: none !important; }
        :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image__viewport::after { display: none !important; transition: none !important; }
        :is(body.site-body, .editor-site) .wirksam-cover-opening .module-image:has(a:focus-visible) .module-image__viewport { transform: none !important; }
        :is(body.site-body, .editor-site) .site-button:hover,
        :is(body.site-body, .editor-site) .site-button:hover::after,
        :is(body.site-body, .editor-site) .module-image:has(a:hover),
        :is(body.site-body, .editor-site) .module-image:has(a:hover) .module-image__viewport { transform: none !important; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .shop-body :is(.shop-card, .shop-cover img, .shop-button, .shop-button::before) { transition: none !important; }
    .shop-body .shop-button::before { display: none; }
    .shop-body .shop-button:hover, .shop-body .shop-card:hover .shop-cover img { transform: none; }
}

/* Shared basket entry in the published website, editor and magazine shop. */
.wirksam-cart-link{display:inline-flex!important;align-items:center;gap:8px;padding:10px 13px!important;border:1px solid #d8cbdf;border-radius:6px;color:#764b94!important;font:600 12px WirksamSans,Arial,sans-serif;text-decoration:none!important;white-space:nowrap;flex-shrink:0}.wirksam-cart-link svg{display:block;flex-shrink:0}.wirksam-cart-link b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:50%;background:#764b94;color:white;font-size:10px;font-weight:600}.site-header-inner>.wirksam-cart-link{order:3;margin-left:12px}.wirksam-cart-link:focus-visible{outline:2px solid #764b94;outline-offset:4px}@media(max-width:900px){.wirksam-cart-link{font-size:10px;padding:9px!important;gap:6px}.site-header-inner>.wirksam-cart-link{margin-left:auto}.site-header-inner>.wirksam-cart-link>span{display:none}.wirksam-cart-link svg{width:17px;height:18px}}@media(hover:hover) and (prefers-reduced-motion:no-preference){.wirksam-cart-link{transition:background .2s,border-color .2s}.wirksam-cart-link:hover{background:#f1eaf6;border-color:#ab8bbf}}