.wp-block-gms-teka-section.teka-section,
.teka-section {
    --teka-max: min(1880px, calc(100vw - 72px));
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    background: var(--teka-bg, #f4f6ff);
    padding-top: var(--teka-pad-y, 78px);
    padding-bottom: var(--teka-pad-y, 78px);
    color: var(--teka-text, #353946);
}

.teka-section *,
.teka-section *::before,
.teka-section *::after {
    box-sizing: border-box;
}

.teka-section::before {
    content: "";
    position: absolute;
    inset: -24% auto auto 50%;
    width: 560px;
    height: 560px;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--teka-accent, #136d9b) 14%, transparent), transparent 68%);
    transform: translateX(-8%);
    pointer-events: none;
    opacity: .8;
}

.teka-section.alignwide,
.teka-section.alignfull {
    max-width: none;
}

.teka-section.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

.teka-shell {
    position: relative;
    z-index: 1;
    width: var(--teka-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(680px, 1.45fr);
    gap: clamp(46px, 5.2vw, 98px);
    align-items: center;
}

.teka-copy {
    max-width: 560px;
}

.teka-kicker {
    margin: 0 0 22px;
    color: var(--teka-accent, #136d9b);
    font-size: clamp(14px, .95vw, 18px);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.teka-title {
    margin: 0;
    color: var(--teka-title, #161922);
    font-size: clamp(28px, 2.15vw, 46px);
    line-height: 1.32;
    font-weight: 800;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.teka-title strong,
.teka-title em,
.teka-title mark,
.teka-title span {
    color: var(--teka-accent, #136d9b);
}

.teka-text {
    margin: 28px 0 0;
    color: var(--teka-text, #353946);
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.62;
    max-width: 620px;
    white-space: pre-line;
}

.teka-cta-wrap {
    margin-top: 32px;
}

.teka-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--teka-accent, #136d9b);
    color: #fff;
    text-decoration: none;
    font-weight: 750;
    line-height: 1;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--teka-accent, #136d9b) 25%, transparent);
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.teka-cta:hover,
.teka-cta:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 24px 54px color-mix(in srgb, var(--teka-accent, #136d9b) 34%, transparent);
}

.teka-tiles-wrap {
    min-width: 0;
}

.teka-tiles {
    display: grid;
    grid-template-columns: repeat(var(--teka-active-cols, var(--teka-cols, 3)), minmax(0, 1fr));
    width: 100%;
    gap: 20px;
}

.teka-card {
    position: relative;
    overflow: hidden;
    min-height: var(--teka-card-min-height, 174px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 26px 22px 24px;
    background: var(--teka-card-bg, #fff);
    border: 1px solid var(--teka-border, rgba(19, 109, 155, .08));
    border-radius: var(--teka-radius, 0px);
    color: var(--teka-card-title, #20232b);
    text-align: center;
    box-shadow: 0 16px 40px rgba(17, 24, 39, .055);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease;
    isolation: isolate;
}

.teka-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--teka-card-bg-hover, #0d5f8d) 94%, #ffffff 6%), var(--teka-card-bg-hover, #0d5f8d));
    opacity: 0;
    transform: scale(.98);
    transition: opacity .28s ease, transform .28s ease;
    z-index: -1;
}

.teka-card::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -32px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .28s ease, transform .28s ease;
}

.teka-card:hover,
.teka-card:focus-within {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--teka-card-bg-hover, #0d5f8d) 34%, transparent);
    box-shadow: 0 28px 70px rgba(17, 24, 39, .13);
}

.teka-card:hover::before,
.teka-card:focus-within::before {
    opacity: 1;
    transform: scale(1);
}

.teka-card:hover::after,
.teka-card:focus-within::after {
    opacity: 1;
    transform: scale(1);
}

.teka-icon {
    width: var(--teka-icon-size, 48px);
    height: var(--teka-icon-size, 48px);
    color: var(--teka-icon, #0f1720);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .28s ease, transform .28s ease;
}

.teka-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.teka-number {
    width: auto;
    min-width: var(--teka-icon-size, 48px);
    height: var(--teka-icon-size, 48px);
    padding: 0 .18em;
    font-size: clamp(28px, calc(var(--teka-icon-size, 48px) * .82), 64px);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.07em;
    font-variant-numeric: tabular-nums;
    color: var(--teka-icon, #0f1720);
    text-shadow: 0 12px 24px rgba(17, 24, 39, .08);
}

.teka-custom-icon-mask {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.teka-custom-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.teka-card-title {
    margin: 0;
    color: var(--teka-card-title, #20232b);
    font-size: clamp(15px, .95vw, 18px);
    line-height: 1.24;
    font-weight: 720;
    letter-spacing: -.02em;
    transition: color .28s ease;
    text-wrap: balance;
}

.teka-card-text {
    margin: 0;
    color: var(--teka-card-text, #505664);
    font-size: clamp(13px, .8vw, 15px);
    line-height: 1.44;
    white-space: pre-line;
    transition: color .28s ease;
}

.teka-card:hover .teka-icon,
.teka-card:focus-within .teka-icon,
.teka-card:hover .teka-card-title,
.teka-card:focus-within .teka-card-title,
.teka-card:hover .teka-card-text,
.teka-card:focus-within .teka-card-text {
    color: var(--teka-card-hover-text, #fff);
}

.teka-card:hover .teka-icon,
.teka-card:focus-within .teka-icon {
    transform: translateY(-2px) scale(1.06);
}

.teka-slider-controls {
    display: none;
}

/* Breiten-Fix: Wenn weniger Kacheln vorhanden sind als Desktop-Spalten eingestellt sind,
   wird keine unsichtbare leere Spalte mehr reserviert. 1, 2 oder 3 Kacheln füllen dadurch
   immer die komplette verfügbare Kachelbreite. */
@supports selector(.teka-tiles:has(.teka-card:nth-child(1):last-child)) {
    .teka-tiles:has(.teka-card:nth-child(1):last-child) {
        grid-template-columns: 1fr;
    }

    .teka-tiles:has(.teka-card:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teka-tiles:has(.teka-card:nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1181px) {
    .teka-tiles-wrap {
        width: 100%;
    }

    .teka-section:has(.teka-card:nth-child(1):last-child) .teka-shell,
    .teka-section:has(.teka-card:nth-child(2):last-child) .teka-shell,
    .teka-section:has(.teka-card:nth-child(3):last-child) .teka-shell {
        grid-template-columns: minmax(300px, .66fr) minmax(0, 1.7fr);
    }
}

@media (min-width: 1680px) {
    .teka-section {
        --teka-max: min(1960px, calc(100vw - 96px));
    }

    .teka-tiles {
        gap: 24px;
    }

    .teka-card {
        padding: 30px 28px 28px;
    }
}

@media (max-width: 1440px) {
    .teka-section {
        --teka-max: calc(100vw - 56px);
    }

    .teka-shell {
        grid-template-columns: minmax(300px, .68fr) minmax(0, 1.62fr);
        gap: 44px;
    }

    .teka-tiles {
        gap: 14px;
    }

    .teka-card {
        padding: 22px 18px 20px;
        min-height: max(150px, calc(var(--teka-card-min-height, 174px) - 18px));
    }

    .teka-card-text {
        font-size: 13px;
    }
}

@media (max-width: 1180px) {
    .teka-section {
        --teka-max: min(960px, calc(100vw - 54px));
    }

    .teka-shell {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .teka-copy {
        max-width: 760px;
    }

    .teka-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .teka-section {
        --teka-max: min(100%, calc(100vw - 32px));
        padding-top: max(42px, calc(var(--teka-pad-y, 78px) * .62));
        padding-bottom: max(42px, calc(var(--teka-pad-y, 78px) * .62));
    }

    .teka-section::before {
        width: 380px;
        height: 380px;
        inset: -160px -170px auto auto;
        transform: none;
    }

    .teka-shell {
        gap: 30px;
    }

    .teka-copy {
        text-align: var(--teka-copy-align-mobile, left);
        max-width: none;
    }

    .teka-kicker {
        margin-bottom: 14px;
        font-size: 13px;
    }

    .teka-title {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.18;
    }

    .teka-text {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.55;
    }

    .teka-cta-wrap {
        margin-top: 24px;
    }

    .teka-tiles {
        gap: 14px;
        grid-template-columns: 1fr;
    }

    .teka-card {
        min-height: 170px;
        padding: 24px 20px;
    }

    .teka-section[data-teka-mobile-slider="1"] .teka-tiles-wrap {
        margin-left: -4px;
        margin-right: -4px;
    }

    .teka-section[data-teka-mobile-slider="1"] .teka-tiles {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 4px 4px 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .teka-section[data-teka-mobile-slider="1"] .teka-tiles::-webkit-scrollbar {
        display: none;
    }

    .teka-section[data-teka-mobile-slider="1"] .teka-card {
        flex: 0 0 calc(100% - 8px);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .teka-section[data-teka-mobile-slider="1"] .teka-slider-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 8px;
    }

    .teka-slider-prev,
    .teka-slider-next {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--teka-accent, #136d9b);
        box-shadow: 0 10px 28px rgba(17, 24, 39, .12);
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        transition: transform .22s ease, background .22s ease, color .22s ease;
    }

    .teka-slider-prev:hover,
    .teka-slider-next:hover,
    .teka-slider-prev:focus-visible,
    .teka-slider-next:focus-visible {
        transform: translateY(-2px);
        background: var(--teka-accent, #136d9b);
        color: #fff;
    }

    .teka-slider-dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 38px;
    }

    .teka-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--teka-accent, #136d9b) 28%, transparent);
        cursor: pointer;
        transition: width .22s ease, background .22s ease;
    }

    .teka-dot.is-active {
        width: 22px;
        background: var(--teka-accent, #136d9b);
    }
}

@supports not (background: color-mix(in srgb, red 50%, white)) {
    .teka-section::before {
        background: radial-gradient(circle, rgba(19, 109, 155, .12), transparent 68%);
    }

    .teka-card::before {
        background: var(--teka-card-bg-hover, #0d5f8d);
    }

    .teka-cta {
        box-shadow: 0 18px 40px rgba(19, 109, 155, .25);
    }

    .teka-dot {
        background: rgba(19, 109, 155, .28);
    }
}

/* Optionale Desktop-Anordnung: Kacheln links, Text rechts */
@media (min-width: 1181px) {
    .teka-section.teka-layout-tiles-left .teka-copy {
        grid-column: 2;
        justify-self: end;
    }

    .teka-section.teka-layout-tiles-left .teka-tiles-wrap {
        grid-column: 1;
        grid-row: 1;
    }

    .teka-section.teka-layout-tiles-left::before {
        inset: -24% 50% auto auto;
        transform: translateX(8%);
    }
}