:root{
    --navy:#0B2A4A;
    --navy2:#071D34;
    --blue:#0877E5;
    --cyan:#3CC7F2;
    --ice:#EDF7FC;
    --bg:#F6F9FB;
    --white:#FFFFFF;
    --text:#1B2A36;
    --muted:#647786;
    --line:#D9E4EA;
    --shadow:0 18px 55px rgba(5,32,59,.11);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--text);
    background:var(--white);
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    line-height:1.55;
}

a{
    color:inherit;
}

img{
    max-width:100%;
}

.container{
    width:min(1180px,calc(100% - 36px));
    margin:auto;
}

.topbar{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
}

.nav{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand-mini{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.12em;
    color:var(--navy);
}

.brand-symbol{
    position:relative;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.08em;
}

.brand-symbol .k{
    color:var(--blue);
}

.navlinks{
    display:flex;
    align-items:center;
    gap:24px;
}

.navlinks a{
    text-decoration:none;
    color:var(--navy);
    font-weight:600;
    font-size:14px;
}

.nav-cta{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );
    padding:11px 17px;
    border-radius:9px;
}

.hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(60,199,242,.18),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #f7fbfd 60%,
            #edf7fc 100%
        );
}

.hero::after{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-250px;
    width:520px;
    height:620px;
    transform:rotate(35deg);
    background:linear-gradient(
        180deg,
        rgba(0,119,229,.95),
        rgba(11,42,74,.97)
    );
    border-radius:32px;
}

.hero-grid{
    position:relative;
    z-index:2;
    min-height:670px;
    display:grid;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(360px,.92fr);
    align-items:center;
    gap:70px;
    padding:80px 0;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    font-weight:800;
}

.eyebrow::before{
    content:"";
    width:34px;
    height:3px;
    border-radius:99px;
    background:linear-gradient(
        90deg,
        var(--cyan),
        var(--blue)
    );
}

h1{
    margin:18px 0 20px;
    color:var(--navy);
    font-size:clamp(42px,6vw,76px);
    line-height:1.02;
    letter-spacing:-.04em;
}

.lead{
    max-width:670px;
    color:#496272;
    font-size:19px;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px;
}

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:50px;
    padding:0 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
}

.btn-primary{
    color:#fff;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );
    box-shadow:
        0 12px 30px
        rgba(0,118,229,.22);
}

.btn-secondary{
    color:var(--navy);
    background:#fff;
    border:1px solid var(--line);
}

.hero-card{
    position:relative;
    z-index:3;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(217,228,234,.9);
    border-radius:24px;
    padding:35px;
    box-shadow:var(--shadow);
}

.hero-logo{
    width:100%;
}

.hero-card p{
    color:var(--muted);
    margin:16px 0 0;
}

.section{
    padding:92px 0;
}

.section-soft{
    background:var(--bg);
}

.section-dark{
    color:#fff;
    background:
        linear-gradient(
            135deg,
            var(--navy2),
            var(--navy)
        );
}

.section-title{
    max-width:760px;
    margin-bottom:42px;
}

.section-title h2{
    margin:8px 0 13px;
    color:var(--navy);
    font-size:clamp(30px,4vw,45px);
    line-height:1.08;
}

.section-title p{
    margin:0;
    color:var(--muted);
    font-size:17px;
}

.section-dark .section-title h2,
.section-dark .section-title p{
    color:#fff;
}

.services{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:18px;
}

.service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:25px;
    box-shadow:
        0 8px 24px
        rgba(12,42,73,.05);
}

.icon{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );
    font-size:21px;
    font-weight:900;
}

.service-card h3{
    margin:0 0 8px;
    color:var(--navy);
    font-size:19px;
}

.service-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.steps{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:20px;
}

.step{
    position:relative;
    padding:27px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    background:rgba(255,255,255,.06);
}

.step-number{
    color:var(--cyan);
    font-size:13px;
    font-weight:800;
    letter-spacing:.14em;
}

.step h3{
    margin:11px 0 8px;
    font-size:21px;
}

.step p{
    margin:0;
    color:#d7e5ee;
}

.contact-grid{
    display:grid;
    grid-template-columns:
        1fr 1fr;
    gap:38px;
    align-items:center;
}

.contact-card{
    padding:30px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.contact-line{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}

.contact-line:last-child{
    border-bottom:0;
}

.contact-line small{
    color:var(--muted);
}

.contact-line a{
    color:var(--navy);
    font-weight:700;
    text-decoration:none;
}

.legal{
    max-width:900px;
    padding-top:55px;
    padding-bottom:80px;
}

.legal h1{
    font-size:42px;
}

.legal h2{
    color:var(--navy);
    margin-top:34px;
    font-size:23px;
}

.legal h3{
    color:var(--navy);
    margin-top:25px;
}

.legal p,
.legal li{
    color:#354d5d;
}

.legal-note{
    margin:22px 0;
    padding:16px;
    border-left:4px solid var(--blue);
    background:var(--ice);
}

footer{
    background:#071D34;
    color:#d6e3ec;
    padding:42px 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:
        1fr auto;
    gap:28px;
    align-items:end;
}

.footer-brand{
    color:#fff;
    font-weight:900;
    letter-spacing:.12em;
    font-size:22px;
}

.footer-slogan{
    margin-top:7px;
    color:#8ecdf2;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:18px;
}

.footer-links a{
    color:#d6e3ec;
    font-size:13px;
    text-decoration:none;
}

.copyright{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:12px;
    color:#8da2b1;
}

@media(max-width:900px){

    .navlinks a:not(.nav-cta){
        display:none;
    }

    .hero-grid{
        min-height:auto;
        grid-template-columns:1fr;
        gap:35px;
        padding:60px 0 75px;
    }

    .hero::after{
        opacity:.16;
    }

    .hero-card{
        max-width:610px;
    }

    .services,
    .steps{
        grid-template-columns:1fr 1fr;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){

    .container{
        width:min(
            100% - 26px,
            1180px
        );
    }

    .nav{
        min-height:70px;
    }

    .brand-mini{
        font-size:12px;
    }

    .nav-cta{
        padding:9px 11px;
        font-size:12px !important;
    }

    .services,
    .steps{
        grid-template-columns:1fr;
    }

    .section{
        padding:68px 0;
    }

    .hero-card{
        padding:23px;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-links{
        justify-content:flex-start;
    }
}

/* -------------------------------------------------
   NKO APPROVED MASTER LOGO
   Original artwork is displayed without redrawing,
   recoloring, cropping or changing aspect ratio.
   ------------------------------------------------- */

.brand-logo-link{
    display:flex;
    align-items:center;
    width:180px;
    height:62px;
    overflow:visible;
}

.brand-logo-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:left center;
}

.hero-logo{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

@media(max-width:620px){

    .brand-logo-link{
        width:135px;
        height:50px;
    }
}

/* NKO UNIFIED COMPACT HEADER V1 */
.topbar{
    min-height:82px;
}

.topbar .nav{
    min-height:82px;
}

.topbar .brand-logo-link{
    display:flex;
    align-items:center;
    width:150px !important;
    height:54px !important;
    overflow:hidden !important;
    flex:0 0 150px;
}

.topbar .brand-logo-image{
    display:block;
    width:150px !important;
    height:54px !important;
    max-width:150px !important;
    max-height:54px !important;
    object-fit:contain !important;
    object-position:left center !important;
}

@media(max-width:620px){
    .topbar .brand-logo-link{
        width:120px !important;
        height:44px !important;
        flex-basis:120px;
    }

    .topbar .brand-logo-image{
        width:120px !important;
        height:44px !important;
        max-width:120px !important;
        max-height:44px !important;
    }
}

/* -------------------------------------------------
   NIKO SERVICE · LEISTUNGEN V1
   Extends the existing approved visual system only.
   Brand colors, logo treatment, header and homepage
   contact anchor remain unchanged.
   ------------------------------------------------- */

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

.service-category-card{
    display:flex;
    flex-direction:column;
    min-height:290px;
    padding:32px;
}

.service-category-card h3{
    font-size:24px;
}

.service-category-card p{
    font-size:16px;
    line-height:1.65;
}

.service-card-link{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    margin-top:auto;
    padding-top:24px;
    color:var(--blue);
    text-decoration:none;
    font-size:14px;
    font-weight:800;
}

.service-card-link::after{
    content:"→";
    margin-left:8px;
}

.section-followup{
    margin-top:26px;
}

.leistungen-page-hero .hero-grid{
    min-height:560px;
}

.leistungen-hero-summary{
    display:grid;
    gap:16px;
}

.leistungen-hero-item{
    padding:18px 0;
    border-bottom:1px solid var(--line);
}

.leistungen-hero-item:last-child{
    border-bottom:0;
}

.leistungen-hero-item strong{
    display:block;
    color:var(--navy);
    font-size:20px;
}

.leistungen-hero-item span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:14px;
}

.leistungen-block{
    scroll-margin-top:105px;
}

.leistungen-layout{
    display:grid;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
    gap:56px;
    align-items:start;
}

.leistungen-intro{
    position:sticky;
    top:116px;
}

.leistungen-intro h2{
    margin:10px 0 14px;
    color:var(--navy);
    font-size:clamp(30px,4vw,44px);
    line-height:1.08;
}

.leistungen-intro p{
    margin:0;
    color:var(--muted);
    font-size:16px;
}

.leistungen-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.leistung-item{
    padding:25px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 8px 24px rgba(12,42,73,.05);
}

.leistung-item h3{
    margin:0 0 8px;
    color:var(--navy);
    font-size:18px;
}

.leistung-item p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.leistungen-question{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
    padding:34px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--navy2),var(--navy));
    color:#fff;
}

.leistungen-question h2{
    margin:0 0 8px;
    color:#fff;
    font-size:clamp(25px,3vw,34px);
}

.leistungen-question p{
    margin:0;
    color:#d7e5ee;
}

.leistungen-question .btn-secondary{
    white-space:nowrap;
}

.navlinks a.nav-active{
    color:var(--blue);
}

@media(max-width:900px){
    .services-two,
    .leistungen-list{
        grid-template-columns:1fr;
    }

    .leistungen-layout{
        grid-template-columns:1fr;
        gap:30px;
    }

    .leistungen-intro{
        position:static;
    }

    .leistungen-question{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .service-category-card{
        min-height:auto;
        padding:25px;
    }

    .leistungen-page-hero .hero-grid{
        min-height:auto;
    }

    .leistungen-question{
        padding:25px;
    }
}


/* NKO BUTTON STYLE UNIFIED 2026-10-19 */

.btn{
    color:var(--navy);
    background:#fff;
    border:1px solid var(--line);
    box-shadow:none;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.btn-primary,
.btn-secondary{
    color:var(--navy);
    background:#fff;
    border:1px solid var(--line);
    box-shadow:none;
}

.btn:hover,
.btn:focus-visible{
    color:#fff;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );
    border-color:transparent;
    box-shadow:
        0 12px 30px
        rgba(0,118,229,.18);
}

.nav-cta{
    color:var(--navy) !important;
    background:#fff;
    border:1px solid var(--line);
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );
    border-color:transparent;
}

#kontakt .hero-buttons{
    flex-wrap:nowrap;
    gap:10px;
}

#kontakt .hero-buttons .btn{
    padding-left:16px;
    padding-right:16px;
    white-space:nowrap;
}

@media(max-width:900px){
    #kontakt .hero-buttons{
        flex-wrap:wrap;
    }
}


/* NKO NAV + CONTACT HOVER 2026-10-19 */

.nav-cta{
    background:transparent;
    border:0;
    box-shadow:none;
}

.nav-cta:hover,
.nav-cta:focus-visible{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );
}

.contact-line a{
    transition:
        color .18s ease,
        text-decoration-color .18s ease;
}

.contact-line a:hover,
.contact-line a:focus-visible{
    color:var(--blue);
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
}


/* NKO NAV LINKS + CLICKABLE SERVICE CARDS 2026-10-19 */

/* Header navigation: all items behave alike */
.navlinks a,
.navlinks a.nav-cta{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--navy) !important;
    transition:
        color .18s ease,
        text-decoration-color .18s ease;
}

.navlinks a:hover,
.navlinks a:focus-visible,
.navlinks a.nav-cta:hover,
.navlinks a.nav-cta:focus-visible{
    color:var(--blue) !important;
    background:transparent;
    box-shadow:none;
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:5px;
}

/* Homepage service cards are full clickable areas */
.service-category-link{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.service-category-link:hover,
.service-category-link:focus-visible{
    transform:translateY(-3px);
    border-color:rgba(0,118,229,.45);
    box-shadow:
        0 14px 34px
        rgba(12,42,73,.11);
    outline:none;
}

.service-category-link:hover .service-card-link,
.service-category-link:focus-visible .service-card-link{
    color:var(--blue);
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
}


/* NKO FOOTER LINK HOVER 2026-10-19 */

.footer-links a{
    transition:
        color .18s ease,
        text-decoration-color .18s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible{
    color:var(--cyan);
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
}


/* NKO HERO CARD CONTENT HEIGHT 2026-10-19 */

.hero-card{
    align-self:center;
    height:fit-content;
}


/* NKO HERO CAPTION CENTER 2026-10-19 */

.hero-card p{
    text-align:center;
}


/* Leistungen visual slideshow */
.leistung-item--visual{
    overflow:hidden;
}

.leistung-preview{
    position:relative;
    aspect-ratio:16 / 9;
    margin:-25px -25px 20px;
    overflow:hidden;
    background:#eef2f4;
    border-radius:15px 15px 0 0;
}

.leistung-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
}

.leistung-slide:first-child{
    opacity:1;
}

.leistung-item--visual:focus-visible{
    outline:2px solid var(--navy);
    outline-offset:3px;
}

@media (hover:hover) and (pointer:fine){
    .leistung-item--visual:hover .leistung-slide:nth-child(1),
    .leistung-item--visual:focus .leistung-slide:nth-child(1){
        animation:leistung-slide-1 10s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(2),
    .leistung-item--visual:focus .leistung-slide:nth-child(2){
        animation:leistung-slide-2 10s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(3),
    .leistung-item--visual:focus .leistung-slide:nth-child(3){
        animation:leistung-slide-3 10s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(4),
    .leistung-item--visual:focus .leistung-slide:nth-child(4){
        animation:leistung-slide-4 10s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(5),
    .leistung-item--visual:focus .leistung-slide:nth-child(5){
        animation:leistung-slide-5 10s linear infinite;
    }
}

@keyframes leistung-slide-1{
    0%,17%{opacity:1}
    20%,96%{opacity:0}
    100%{opacity:1}
}

@keyframes leistung-slide-2{
    0%,17%{opacity:0}
    20%,37%{opacity:1}
    40%,100%{opacity:0}
}

@keyframes leistung-slide-3{
    0%,37%{opacity:0}
    40%,57%{opacity:1}
    60%,100%{opacity:0}
}

@keyframes leistung-slide-4{
    0%,57%{opacity:0}
    60%,77%{opacity:1}
    80%,100%{opacity:0}
}

@keyframes leistung-slide-5{
    0%,77%{opacity:0}
    80%,97%{opacity:1}
    100%{opacity:0}
}

/* NKO LEISTUNGEN TRUE SOFT CROSSFADE 2026-10-20 */

/* Первый кадр всегда остаётся непрозрачной основой */
.leistung-slide:nth-child(1){
    opacity:1;
}

@media (hover:hover) and (pointer:fine){

    .leistung-item--visual:hover .leistung-slide:nth-child(1),
    .leistung-item--visual:focus .leistung-slide:nth-child(1){
        animation:none;
        opacity:1;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(2),
    .leistung-item--visual:focus .leistung-slide:nth-child(2){
        animation:nko-soft-slide-2 30s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(3),
    .leistung-item--visual:focus .leistung-slide:nth-child(3){
        animation:nko-soft-slide-3 30s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(4),
    .leistung-item--visual:focus .leistung-slide:nth-child(4){
        animation:nko-soft-slide-4 30s linear infinite;
    }

    .leistung-item--visual:hover .leistung-slide:nth-child(5),
    .leistung-item--visual:focus .leistung-slide:nth-child(5){
        animation:nko-soft-slide-5 30s linear infinite;
    }
}

/* 1 -> 2: второй кадр медленно проявляется поверх первого */
@keyframes nko-soft-slide-2{
    0%,12%{opacity:0}
    20%,40%{opacity:1}
    40.1%,100%{opacity:0}
}

/* Пока третий проявляется, второй остаётся полностью видимым */
@keyframes nko-soft-slide-3{
    0%,32%{opacity:0}
    40%,60%{opacity:1}
    60.1%,100%{opacity:0}
}

/* 3 -> 4 */
@keyframes nko-soft-slide-4{
    0%,52%{opacity:0}
    60%,80%{opacity:1}
    80.1%,100%{opacity:0}
}

/* 4 -> 5, затем пятый мягко растворяется обратно в первый */
@keyframes nko-soft-slide-5{
    0%,72%{opacity:0}
    80%,92%{opacity:1}
    100%{opacity:0}
}


/* NKO 4-SLIDE SOFT CROSSFADE */
@media (hover:hover) and (pointer:fine){
    .leistung-item--visual--4:hover .leistung-slide:nth-child(2),
    .leistung-item--visual--4:focus .leistung-slide:nth-child(2){
        animation:nko-soft4-slide-2 24s linear infinite;
    }

    .leistung-item--visual--4:hover .leistung-slide:nth-child(3),
    .leistung-item--visual--4:focus .leistung-slide:nth-child(3){
        animation:nko-soft4-slide-3 24s linear infinite;
    }

    .leistung-item--visual--4:hover .leistung-slide:nth-child(4),
    .leistung-item--visual--4:focus .leistung-slide:nth-child(4){
        animation:nko-soft4-slide-4 24s linear infinite;
    }
}

@keyframes nko-soft4-slide-2{
    0%,12%{opacity:0}
    22%,46%{opacity:1}
    46.1%,100%{opacity:0}
}

@keyframes nko-soft4-slide-3{
    0%,36%{opacity:0}
    46%,70%{opacity:1}
    70.1%,100%{opacity:0}
}

@keyframes nko-soft4-slide-4{
    0%,60%{opacity:0}
    70%,88%{opacity:1}
    100%{opacity:0}
}


/* NKO FASTER SOFT CROSSFADE OVERRIDE 2026-10-20 */

/* 5 slides: immediate start, faster 15s cycle */
@media (hover:hover) and (pointer:fine){

    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):hover .leistung-slide:nth-child(2),
    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):focus .leistung-slide:nth-child(2){
        animation:nko-fast5-slide-2 15s linear infinite;
    }

    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):hover .leistung-slide:nth-child(3),
    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):focus .leistung-slide:nth-child(3){
        animation:nko-fast5-slide-3 15s linear infinite;
    }

    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):hover .leistung-slide:nth-child(4),
    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):focus .leistung-slide:nth-child(4){
        animation:nko-fast5-slide-4 15s linear infinite;
    }

    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):hover .leistung-slide:nth-child(5),
    .leistung-item--visual:not(.leistung-item--visual--4):not(.leistung-item--visual--6):focus .leistung-slide:nth-child(5){
        animation:nko-fast5-slide-5 15s linear infinite;
    }

    /* 4 slides: immediate start, faster 12s cycle */
    .leistung-item--visual--4:hover .leistung-slide:nth-child(2),
    .leistung-item--visual--4:focus .leistung-slide:nth-child(2){
        animation:nko-fast4-slide-2 12s linear infinite;
    }

    .leistung-item--visual--4:hover .leistung-slide:nth-child(3),
    .leistung-item--visual--4:focus .leistung-slide:nth-child(3){
        animation:nko-fast4-slide-3 12s linear infinite;
    }

    .leistung-item--visual--4:hover .leistung-slide:nth-child(4),
    .leistung-item--visual--4:focus .leistung-slide:nth-child(4){
        animation:nko-fast4-slide-4 12s linear infinite;
    }
}

/* 5 slides */
@keyframes nko-fast5-slide-2{
    0%{opacity:0}
    8%,28%{opacity:1}
    28.1%,100%{opacity:0}
}

@keyframes nko-fast5-slide-3{
    0%,20%{opacity:0}
    28%,48%{opacity:1}
    48.1%,100%{opacity:0}
}

@keyframes nko-fast5-slide-4{
    0%,40%{opacity:0}
    48%,68%{opacity:1}
    68.1%,100%{opacity:0}
}

@keyframes nko-fast5-slide-5{
    0%,60%{opacity:0}
    68%,88%{opacity:1}
    100%{opacity:0}
}

/* 4 slides */
@keyframes nko-fast4-slide-2{
    0%{opacity:0}
    10%,35%{opacity:1}
    35.1%,100%{opacity:0}
}

@keyframes nko-fast4-slide-3{
    0%,25%{opacity:0}
    35%,60%{opacity:1}
    60.1%,100%{opacity:0}
}

@keyframes nko-fast4-slide-4{
    0%,50%{opacity:0}
    60%,82%{opacity:1}
    92%,100%{opacity:0}
}


/* NKO HANDYMAN 3-WIDE CARDS 2026-10-21 */
.leistungen-list--handyman{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
}

.leistungen-list--handyman .leistung-item h3{
    font-size:22px;
}

.leistungen-list--handyman .leistung-item p{
    font-size:15px;
    line-height:1.55;
}

/* NKO MOSAIC SOFT FADE 2026-10-22 */
.leistung-mosaic{
    display:none;
}

@media (hover:hover) and (pointer:fine){

    /* Override old instant grid transformation */
    .leistung-item--visual--mosaic:not(:hover):not(:focus-within) .leistung-preview,
    .leistung-item--visual--mosaic .leistung-preview{
        display:block;
        padding:0;
    }

    .leistung-item--visual--mosaic:not(:hover):not(:focus-within) .leistung-slide,
    .leistung-item--visual--mosaic .leistung-slide{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .leistung-item--visual--mosaic:not(:hover):not(:focus-within) .leistung-slide{
        opacity:0;
    }

    .leistung-item--visual--mosaic:not(:hover):not(:focus-within) .leistung-slide:first-child{
        opacity:1;
    }

    /* Separate mosaic layer above slideshow */
    .leistung-item--visual--mosaic .leistung-mosaic{
        position:absolute;
        inset:0;
        z-index:10;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-template-rows:repeat(2,minmax(0,1fr));
        gap:3px;
        padding:3px;
        background:#fff;
        opacity:1;
        transition:opacity .8s linear;
        pointer-events:none;
    }

    .leistung-item--visual--mosaic .leistung-mosaic-thumb{
        display:block;
        width:100%;
        height:100%;
        min-width:0;
        min-height:0;
        object-fit:cover;
    }

    .leistung-item--visual--mosaic:hover .leistung-mosaic,
    .leistung-item--visual--mosaic:focus-within .leistung-mosaic{
        opacity:0;
    }
}


/* NKO 6-SLIDE 1S HOLD + 2S CROSSFADE 2026-10-22 */
/*
   6 scenes:
   1 s fully visible
   2 s crossfade
   18 s total cycle
   0.8 s delay allows mosaic fade to finish first
*/
@media (hover:hover) and (pointer:fine){

    .leistung-item--visual--6.leistung-item--visual--mosaic:hover .leistung-slide:nth-child(1),
    .leistung-item--visual--6.leistung-item--visual--mosaic:focus-within .leistung-slide:nth-child(1){
        animation:nko-sales6-1 18s .8s linear infinite;
    }

    .leistung-item--visual--6.leistung-item--visual--mosaic:hover .leistung-slide:nth-child(2),
    .leistung-item--visual--6.leistung-item--visual--mosaic:focus-within .leistung-slide:nth-child(2){
        animation:nko-sales6-2 18s .8s linear infinite;
    }

    .leistung-item--visual--6.leistung-item--visual--mosaic:hover .leistung-slide:nth-child(3),
    .leistung-item--visual--6.leistung-item--visual--mosaic:focus-within .leistung-slide:nth-child(3){
        animation:nko-sales6-3 18s .8s linear infinite;
    }

    .leistung-item--visual--6.leistung-item--visual--mosaic:hover .leistung-slide:nth-child(4),
    .leistung-item--visual--6.leistung-item--visual--mosaic:focus-within .leistung-slide:nth-child(4){
        animation:nko-sales6-4 18s .8s linear infinite;
    }

    .leistung-item--visual--6.leistung-item--visual--mosaic:hover .leistung-slide:nth-child(5),
    .leistung-item--visual--6.leistung-item--visual--mosaic:focus-within .leistung-slide:nth-child(5){
        animation:nko-sales6-5 18s .8s linear infinite;
    }

    .leistung-item--visual--6.leistung-item--visual--mosaic:hover .leistung-slide:nth-child(6),
    .leistung-item--visual--6.leistung-item--visual--mosaic:focus-within .leistung-slide:nth-child(6){
        animation:nko-sales6-6 18s .8s linear infinite;
    }
}

/* 1: show 1s -> crossfade to 2 for 2s -> return during 6 -> 1 */
@keyframes nko-sales6-1{
    0%,5.56%{opacity:1}
    16.67%,88.89%{opacity:0}
    100%{opacity:1}
}

/* 2 */
@keyframes nko-sales6-2{
    0%,5.56%{opacity:0}
    16.67%,22.22%{opacity:1}
    33.33%,100%{opacity:0}
}

/* 3 */
@keyframes nko-sales6-3{
    0%,22.22%{opacity:0}
    33.33%,38.89%{opacity:1}
    50%,100%{opacity:0}
}

/* 4 */
@keyframes nko-sales6-4{
    0%,38.89%{opacity:0}
    50%,55.56%{opacity:1}
    66.67%,100%{opacity:0}
}

/* 5 */
@keyframes nko-sales6-5{
    0%,55.56%{opacity:0}
    66.67%,72.22%{opacity:1}
    83.33%,100%{opacity:0}
}

/* 6 */
@keyframes nko-sales6-6{
    0%,72.22%{opacity:0}
    83.33%,88.89%{opacity:1}
    100%{opacity:0}
}