.cme-page.cme-katalog {
    --cme-blue: #1974fc;
    --cme-green: #25bda4;
    --ck-indigo: #596be9;
}

.cme-katalog .cme-panel::after { background: linear-gradient(105deg, #eef5ff, #e7f2ff 72%, #f2f6ff); }
.cme-katalog .cme-alt::after   { background: linear-gradient(75deg, #e9f8f6, #edf6ff 74%, #f4f9ff); }
.cme-katalog .cme-p-sablon::after { width: 50%; clip-path: ellipse(98% 220% at 0 50%); }

.cme-katalog .cme-copy p { max-width: 590px; }
.cme-katalog .cme-lead i { background: var(--cme-green); }
.cme-katalog .cme-cta-mark { background: linear-gradient(145deg, var(--cme-blue), var(--ck-indigo)); box-shadow: 0 8px 19px rgb(25 116 252 / 20%); }

.cme-katalog .cme-copy .cme-eyebrow { color: var(--ck-indigo); }
.cme-katalog .cme-copy .cme-eyebrow i { background: var(--ck-indigo); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ck-indigo) 22%, white); }

.cme-katalog .cme-hero .cme-visual img { width: 105%; max-width: none; max-height: 470px; object-fit: contain; }

.cme-katalog .cme-builder {
    position: relative;
    isolation: isolate;
    margin-bottom: 14px;
    padding: clamp(28px, 3.4vw, 64px);
    overflow: hidden;
    border: 1px solid rgb(207 222 242 / 45%);
    border-radius: 18px;
    background: #fbfdff;
    box-shadow: 0 9px 30px rgb(33 81 139 / 5%);
}
.cme-katalog .cme-builder::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(118deg, #f7fbff 0 42%, #edf5ff 42% 72%, #edf9f7 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 53%);
}
.cme-katalog .cme-builder > * { position: relative; z-index: 1; }

.cme-katalog .cme-builder-heading { max-width: 820px; margin: 0 auto clamp(24px, 2.6vw, 34px); text-align: center; }
.cme-katalog .cme-builder-heading .cme-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--ck-indigo);
    font-weight: 800;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: .06em;
}
.cme-katalog .cme-builder-heading .cme-eyebrow i {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ck-indigo);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ck-indigo) 22%, white);
}
.cme-katalog .cme-builder-heading h2 {
    margin: 10px 0 13px;
    padding: 0;
    font-family: inherit;
    color: var(--cme-ink);
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.035em;
}
.cme-katalog .cme-builder-heading h2 em { color: var(--cme-blue); font-style: normal; }
.cme-katalog .cme-builder-heading p { margin: 0; color: #102154; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.55; }

.cme-katalog .cme-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cme-katalog .cme-step {
    min-width: 0;
    padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px) 20px;
    overflow: hidden;
    border: 1px solid rgb(207 222 242 / 65%);
    border-radius: 16px;
    background: rgb(255 255 255 / 84%);
    box-shadow: 0 8px 22px rgb(35 77 130 / 7%);
}
.cme-katalog .cme-step h3 {
    min-height: 50px;
    margin: 0 0 9px;
    padding: 0;
    font-family: inherit;
    color: var(--cme-ink);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
    text-transform: uppercase;
}
.cme-katalog .cme-step h3::after { content: ""; width: 34px; height: 3px; margin-top: 13px; display: block; border-radius: 99px; background: var(--cme-green); }
.cme-katalog .cme-step p { min-height: 62px; margin: 0; color: #102154; font-size: clamp(12px, 1vw, 13px); line-height: 1.55; }
.cme-katalog .cme-step-image {
    height: 220px;
    margin-top: 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(238 245 255 / 70%), rgb(250 252 255 / 25%));
}
.cme-katalog .cme-step-image img { width: 110%; max-width: none; height: 110%; object-fit: contain; filter: drop-shadow(0 13px 20px rgb(39 70 135 / 10%)); }

@media (max-width: 767px) {
    .cme-katalog .cme-steps { grid-template-columns: 1fr; }
    .cme-katalog .cme-step h3, .cme-katalog .cme-step p { min-height: 0; }
    .cme-katalog .cme-step-image { height: 190px; }
    .cme-katalog .cme-builder-heading { text-align: left; }
    .cme-katalog .cme-builder-heading .cme-eyebrow { justify-content: flex-start; }
}