*,*::before,*::after{box-sizing:border-box}
a,a:hover,a:focus,a:active{text-decoration:none}
html{scroll-behavior:smooth}
body{margin:0;padding:0;background:var(--bg);overflow-x:hidden}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:880px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap,.narrow{padding:0 32px}}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--kts-ice));z-index:1000;width:0;transform-origin:left;will-change:width}

/* Cursor "Kalter Atem" — vapor particles trailing cursor (desktop only) */
/* Position absolute so particles stay anchored to document, scrolling with page */
.vapor{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.82),rgba(255,255,255,0));pointer-events:none;z-index:2;will-change:transform,opacity;filter:blur(3px) drop-shadow(0 1px 5px rgba(80,115,150,.22))}
/* On dark backgrounds: lower opacity, no shadow needed → subtler */
.vapor.on-dark{background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(3px)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--border-subtle);transition:background .3s,box-shadow .3s,padding .3s}
.nav.scrolled{background:rgba(255,255,255,.92);box-shadow:0 6px 24px -10px rgba(15,30,60,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:center;gap:24px;height:84px;transition:height .3s;position:relative}
.nav.scrolled .wrap{height:72px}
.nav .brand{display:flex;align-items:center;flex-shrink:0}
.nav .brand img{height:80px;transition:height .3s;padding: 0 0 5px 0}
.nav.scrolled .brand img{height:60px}
.nav ul{list-style:none;margin:0;padding:0;display:none;gap:2px}
@media(min-width:1024px){.nav ul{display:flex}}
.nav ul a{position:relative;font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--fg-1);padding:10px 14px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.nav ul a:hover{color:var(--accent);background:var(--bg-soft)}
.nav ul a.active{color:var(--accent);font-weight:800}
.nav .right{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:10px;align-items:center}
@media(max-width:1023px){.nav .wrap{justify-content:space-between}.nav .right{position:static;transform:none}}
.hamburger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;border:1px solid var(--border-strong);background:#fff;cursor:pointer;color:var(--kts-navy)}
@media(min-width:1024px){.hamburger{display:none}}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;background:var(--kts-navy);color:#fff;z-index:80;display:flex;flex-direction:column;padding:24px 24px 32px;transform:translateX(100%);transition:transform .35s cubic-bezier(.7,.0,.2,1);visibility:hidden}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}
.mobile-menu .close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:transparent;color:#fff;cursor:pointer}
.mobile-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:22px}
.mobile-menu .ctas{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:32px}

/* Buttons */
.btn{position:relative;font-family:var(--font-display);font-weight:600;font-size:14px;padding:11px 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1;min-height:44px;transition:background .25s,color .2s,border-color .25s,transform .25s,box-shadow .3s;overflow:hidden;will-change:transform;box-shadow:0 1px 0 transparent}
.btn:hover,.btn:focus,.btn:active{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-secondary{background:#fff;color:var(--fg-1);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.30)}
.btn-on-dark:hover{background:#fff;color:var(--kts-navy);border-color:#fff}
.btn-on-dark-primary{background:#fff;color:var(--kts-navy)}
.btn-on-dark-primary:hover{background:var(--kts-ice);color:var(--kts-navy)}
.btn-lg{padding:15px 24px;font-size:15px;min-height:50px}
/* Icon nudge — only trailing arrows, not phone/leading icons */
.btn [data-lucide^="arrow-"]{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.btn:hover [data-lucide^="arrow-right"]{transform:translateX(4px)}
.btn:hover [data-lucide="arrow-down"]{transform:translateY(3px)}
.btn:hover [data-lucide="arrow-up-right"]{transform:translate(3px,-3px)}
.btn .shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:transform .65s ease;pointer-events:none}
.btn-primary:hover .shine,.btn-on-dark-primary:hover .shine{transform:translateX(100%)}

/* Hero */
.hero{position:relative;overflow:hidden;background:#fff;padding:104px 0 120px;text-align:center;border-bottom:1px solid var(--border-subtle)}
.hero-photo{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.96) 100%),url('https://images.unsplash.com/photo-1631545806845-2c4c33f48a35?auto=format&fit=crop&w=1800&q=80');background-size:cover;background-position:center;pointer-events:none;will-change:transform}
.hero-watermark{position:absolute;right:62%;bottom:50%;translate:5% 5%;width:800px;height:800px;opacity:.11;pointer-events:none;will-change:translate,rotate,scale,opacity;z-index:1}
.hero-watermark img{width:100%;height:100%;display:block}
.hero .narrow{position:relative;z-index:2}
.hero .overline{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
.hero .overline::before,.hero .overline::after{content:"";width:24px;height:1px;background:currentColor;opacity:.4}
.hero h1{font-family:var(--font-display);font-size:clamp(40px,7vw,84px);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:var(--kts-navy);margin:0 0 32px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:6px}
.hero h1 .line span{display:inline-block;will-change:transform}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:20px;line-height:1.6;color:var(--fg-2);max-width:680px;margin:0 auto 40px}
.hero .ctas{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.hero .sig{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:56px;color:var(--fg-3);font-size:13px;font-family:var(--font-display)}
.hero .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(41,121,170,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(41,121,170,.18)}50%{box-shadow:0 0 0 8px rgba(41,121,170,.05)}}


/* Process section */
section.proc{padding:80px 0 110px;background:var(--bg-soft);border-bottom:1px solid var(--border-subtle);position:relative;overflow:hidden}
.proc-head{text-align:center;margin-bottom:64px}
.proc-head .ol,.svc-head .ol,.warte-head .ol,.news-head .ol,.test-head .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.proc-head .ol::before,.proc-head .ol::after,.svc-head .ol::before,.svc-head .ol::after,.warte-head .ol::before,.warte-head .ol::after,.news-head .ol::before,.news-head .ol::after,.test-head .ol::before,.test-head .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
.proc-head h2,.svc-head h2,.warte-head h2,.test-head h2,.news-head h2{font-family:var(--font-display);font-size:clamp(28px,4.5vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--kts-navy);margin:0;max-width:680px;margin-left:auto;margin-right:auto}
.proc-head p,.svc-head p,.warte-head p{margin:14px auto 0;color:var(--fg-2);font-size:17px;max-width:620px;line-height:1.6}

.proc-rail{position:relative;max-width:920px;margin:0 auto}
.proc-rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border);transform:translateX(-1px);display:none}
@media(min-width:768px){.proc-rail::before{display:block}}
.proc-rail .fill{position:absolute;left:50%;top:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--kts-blue-700));transform:translateX(-1px);transform-origin:top;display:none;will-change:height;height:0}
@media(min-width:768px){.proc-rail .fill{display:block}}

.proc-grid{display:grid;grid-template-columns:1fr;gap:24px;position:relative}
@media(min-width:768px){.proc-grid{grid-template-columns:repeat(2,1fr);gap:40px}}
.proc-step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:36px 32px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);position:relative;will-change:transform,opacity;transition:box-shadow .25s,border-color .25s}
.proc-step:hover{box-shadow:var(--shadow-lg);border-color:var(--kts-blue-200)}
.proc-step .ic{width:50px;height:50px;border-radius:13px;background:var(--kts-blue-50);color:var(--kts-blue-700);display:flex;align-items:center;justify-content:center;position:absolute;top:30px;right:30px;transition:background .35s,color .35s,transform .4s cubic-bezier(.5,-.3,.4,1.5);transform-origin:center}
.proc-step:hover .ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.08)}
.proc-step .num{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.2em;display:flex;align-items:center;gap:10px}
.proc-step .num::before{content:"";width:24px;height:2px;background:var(--accent)}
.proc-step h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--kts-navy);margin:0;letter-spacing:-.01em}
.proc-step p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.6}

/* Bildband — full-bleed parallax */
section.band{position:relative;height:550px;overflow:hidden;background:#0a1a30}
.band-img{position:absolute;inset:-10% 0;background-size:cover;background-position:center;background-image:url('../img/consulting2.jpg');will-change:transform}
.band-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,60,.55) 0%,rgba(15,30,60,.40) 50%,rgba(15,30,60,.70) 100%);z-index:1}
.band-content{position:absolute;inset:0 0 100px 0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px;color:#fff}
.band-content .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--kts-ice);margin-bottom:20px;opacity:.9}
.band-content h2{font-family:var(--font-display);font-size:clamp(34px,5.5vw,60px);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:#fff;margin:0 0 18px;max-width:880px}
.band-content h2 em{font-style:normal;color:var(--kts-ice)}
.band-content p{font-size:18px;color:rgba(255,255,255,.82);max-width:560px;line-height:1.55;margin:0}
.band-stats{position:absolute;left:0;right:0;bottom:80px;z-index:2;display:flex;gap:48px;justify-content:center;flex-wrap:wrap;color:#fff}
.band-stats div{display:flex;flex-direction:column;align-items:center}
.band-stats .n{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.01em}
.band-stats .l{font-size:11px;color:rgba(255,255,255,.65);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}

/* Services */
section.svc{padding:80px 0 96px;background:#fff;position:relative;overflow:hidden}
/* The previous `translateY(-50%)` was always overridden by the CSS
   rotation animation, so visually the watermark has been anchored at
   top:50% (extending downward into the section's lower half) all along.
   Restore that and apply parallax via `--py` only. */
.svc-watermark{position:absolute;left:-320px;top:50%;translate:0 var(--py,0px);width:720px;height:720px;opacity:.08;pointer-events:none;z-index:0;will-change:translate}
.svc-watermark img{width:100%;height:100%;display:block}
.svc .wrap{position:relative;z-index:1}
.svc-row .thumb{display:none;width:88px;height:88px;border-radius:12px;background-size:cover;background-position:center;flex-shrink:0;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.5,.1,.2,1)}
@media(min-width:1024px){.svc-row{grid-template-columns:70px 1.4fr 1fr 88px auto !important;align-items:center}.svc-row .thumb{display:block}}
.svc-row:hover .thumb{transform:scale(1.06) rotate(2deg)}
.svc-head{text-align:center;margin-bottom:56px}
.svc-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column}
.svc-row{display:grid;grid-template-columns:1fr;gap:14px;padding:36px 0;border-top:1px solid var(--divider);text-decoration:none;color:inherit;will-change:transform,opacity;position:relative}
.svc-row:hover,.svc-row:focus,.svc-row:active{text-decoration:none}
.svc-row:hover *,.svc-row *:hover{text-decoration:none}
.svc-row:first-child{border-top:0}
@media(min-width:768px){.svc-row{grid-template-columns:70px 1.4fr 1fr auto;gap:32px;align-items:start}}
.svc-row .ic{width:56px;height:56px;border-radius:14px;background:var(--kts-blue-50);color:var(--kts-blue-700);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .25s}
.svc-row:hover .ic{background:var(--accent);color:#fff;transform:scale(1.08) rotate(-6deg)}
.svc-row h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--kts-navy);margin:0 0 8px;letter-spacing:-.01em;transition:transform .3s cubic-bezier(.4,0,.2,1);transform-origin:left center}
.svc-row:hover h3{transform:scale(1.06)}
.svc-row .tag{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.svc-row p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.6;max-width:340px}
.svc-row .arrow{align-self:center;color:var(--fg-3);transition:transform .3s,color .25s}
.svc-row:hover .arrow{color:var(--accent);transform:translateX(10px)}
.svc-row.muted{opacity:.65}
.svc-row.muted .ic{background:var(--kts-ink-150);color:var(--kts-ink-600)}

/* ── Animated inline SVG icons (line-art) ─────────────────────────── */
.aico path,.aico line,.aico polyline,.aico polygon,.aico circle,.aico rect,.aico ellipse{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* 01 Chat — typing dots bounce on hover */
.aico-chat .dot{fill:currentColor;stroke:none;transform-origin:center;transform-box:fill-box}
.proc-step:hover .aico-chat .dot-1{animation:dotBounce .9s ease-in-out infinite}
.proc-step:hover .aico-chat .dot-2{animation:dotBounce .9s ease-in-out infinite .15s}
.proc-step:hover .aico-chat .dot-3{animation:dotBounce .9s ease-in-out infinite .30s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.7}30%{transform:translateY(-2px);opacity:1}}

/* 02 Clipboard — checkmarks draw on hover (sequential) */
.aico-clipboard .check{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .3s ease}
.proc-step:hover .aico-clipboard .check-1{stroke-dashoffset:0;transition-delay:.05s}
.proc-step:hover .aico-clipboard .check-2{stroke-dashoffset:0;transition-delay:.18s}
.proc-step:hover .aico-clipboard .check-3{stroke-dashoffset:0;transition-delay:.31s}

/* 03 Hand-Coins — coins drop in with spring on hover */
.aico-coins .coin{transform-origin:center}
@keyframes coinDrop{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:translateY(0)}}
.proc-step:hover .aico-coins .coin-1{animation:coinDrop .55s cubic-bezier(.34,1.56,.64,1) backwards}
.proc-step:hover .aico-coins .coin-2{animation:coinDrop .55s cubic-bezier(.34,1.56,.64,1) .12s backwards}

/* 04 Shield — checkmark draws on hover */
.aico-shield .check{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .4s ease}
.proc-step:hover .aico-shield .check{stroke-dashoffset:0;transition-delay:.1s}

/* SVC: Snowflake — slow rotation on hover */
.aico-snowflake{transform-origin:center;transition:transform .8s cubic-bezier(.34,1.2,.64,1)}
.svc-row:hover .aico-snowflake{transform:rotate(180deg)}

/* SVC: Wind — lines draw sequentially on hover (Lucide-style build-up) */
.aico-wind path{stroke-dasharray:35;stroke-dashoffset:0}
.svc-row:hover .aico-wind path:nth-of-type(1){animation:windDraw .45s cubic-bezier(.4,0,.2,1) backwards}
.svc-row:hover .aico-wind path:nth-of-type(2){animation:windDraw .45s cubic-bezier(.4,0,.2,1) .15s backwards}
.svc-row:hover .aico-wind path:nth-of-type(3){animation:windDraw .45s cubic-bezier(.4,0,.2,1) .30s backwards}
@keyframes windDraw{0%{stroke-dashoffset:35}100%{stroke-dashoffset:0}}

/* SVC: Car — bounce continuously + speed lines appear on hover */
.aico-car .speed-line{opacity:0;transform:translateX(5px);transition:opacity .3s,transform .35s ease}
.svc-row:hover .aico-car .line-1{opacity:.85;transform:translateX(0);transition-delay:.05s}
.svc-row:hover .aico-car .line-2{opacity:.85;transform:translateX(0);transition-delay:.12s}
.svc-row:hover .aico-car .line-3{opacity:.85;transform:translateX(0);transition-delay:.19s}
.svc-row:hover .aico-car .car-body{animation:carBounce .35s ease-in-out infinite}
@keyframes carBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* SVC: Temperature — mercury rises on hover */
.aico-temp .mercury,.aico-temp .bulb-fill{fill:currentColor;stroke:none}
.aico-temp .mercury{transform-origin:center bottom;transform-box:fill-box;transform:scaleY(.4);transition:transform .55s cubic-bezier(.34,1.2,.64,1)}
.svc-row:hover .aico-temp .mercury{transform:scaleY(1)}

/* SVC: Leaf — wobbles like a falling leaf on hover */
.aico-leaf{transform-origin:center}
.svc-row:hover .aico-leaf{animation:leafFall 2.2s ease-in-out infinite}
@keyframes leafFall{
  0%{transform:rotate(-10deg) translateY(0)}
  25%{transform:rotate(8deg) translateY(2px)}
  50%{transform:rotate(-6deg) translateY(4px)}
  75%{transform:rotate(10deg) translateY(2px)}
  100%{transform:rotate(-10deg) translateY(0)}
}
.svc-row.muted:hover .ic{background:var(--kts-ink-600);color:#fff}

/* ───────────────────────────────────────────────────────────────
   Animated icons inside .feature-card on hover
   Reuses the existing .aico-* styles + adds 6 new icons (zap, clock,
   phone, handshake, ruler, user). Triggered by .feature-card:hover
   in addition to the existing .proc-step:hover / .svc-row:hover.
   ─────────────────────────────────────────────────────────────── */

/* Extend the existing animation triggers to feature-card too */
.feature-card:hover .aico-chat .dot-1{animation:dotBounce .9s ease-in-out infinite}
.feature-card:hover .aico-chat .dot-2{animation:dotBounce .9s ease-in-out infinite .15s}
.feature-card:hover .aico-chat .dot-3{animation:dotBounce .9s ease-in-out infinite .30s}
.feature-card:hover .aico-clipboard .check-1{stroke-dashoffset:0;transition-delay:.05s}
.feature-card:hover .aico-clipboard .check-2{stroke-dashoffset:0;transition-delay:.18s}
.feature-card:hover .aico-clipboard .check-3{stroke-dashoffset:0;transition-delay:.31s}
.feature-card:hover .aico-coins .coin-1{animation:coinDrop .55s cubic-bezier(.34,1.56,.64,1) backwards}
.feature-card:hover .aico-coins .coin-2{animation:coinDrop .55s cubic-bezier(.34,1.56,.64,1) .12s backwards}
.feature-card:hover .aico-shield .check{stroke-dashoffset:0;transition-delay:.1s}

/* aico-zap: lightning bolt that pulses */
.aico-zap .bolt{fill:none;transform-origin:center;transform-box:fill-box;transition:transform .35s ease,opacity .3s ease}
.feature-card:hover .aico-zap .bolt{animation:zapPulse .85s ease-in-out infinite}
@keyframes zapPulse{
  0%,100%{transform:scale(1);opacity:1}
  45%{transform:scale(1.18);opacity:.7}
  60%{transform:scale(.95);opacity:1}
}

/* aico-clock: clock hands rotate continuously on hover */
.aico-clock .hand{transform-origin:12px 12px;transition:transform .4s ease}
.feature-card:hover .aico-clock .hand-h{animation:clockRotate 4s linear infinite}
.feature-card:hover .aico-clock .hand-m{animation:clockRotate 1s linear infinite}
@keyframes clockRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* aico-phone: receiver wiggles like ringing */
.aico-phone{transform-origin:center;transform-box:fill-box}
.feature-card:hover .aico-phone{animation:phoneRing .42s ease-in-out infinite}
@keyframes phoneRing{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-10deg)}
  75%{transform:rotate(10deg)}
}

/* aico-users: two people. Left head bobs softly */
.aico-users .head-l{transform-origin:9px 7px;transition:transform .35s ease}
.feature-card:hover .aico-users .head-l{animation:headBob 1.1s ease-in-out infinite}

/* aico-handshake: gentle warm pulse of the whole icon (no individual
   hand wiggling - that read as broken instead of expressive). */
.aico-handshake{transform-origin:center;transform-box:fill-box;transition:transform .35s ease}
.feature-card:hover .aico-handshake{animation:handshakePulse .9s ease-in-out infinite}
@keyframes handshakePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.10)}
}

/* aico-ruler: tick marks pulse in sequence */
.aico-ruler .tick{transition:stroke-width .2s ease}
.feature-card:hover .aico-ruler .tick-1{animation:tickPulse 1.4s ease-in-out infinite}
.feature-card:hover .aico-ruler .tick-2{animation:tickPulse 1.4s ease-in-out infinite .1s}
.feature-card:hover .aico-ruler .tick-3{animation:tickPulse 1.4s ease-in-out infinite .2s}
.feature-card:hover .aico-ruler .tick-4{animation:tickPulse 1.4s ease-in-out infinite .3s}
@keyframes tickPulse{0%,100%{stroke-width:2}50%{stroke-width:3.5}}

/* aico-user: head bobs subtly */
.aico-user .head{transform-origin:12px 8px;transition:transform .35s ease}
.feature-card:hover .aico-user .head{animation:headBob 1s ease-in-out infinite}
@keyframes headBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* Wartung */
section.warte{padding:80px 0 96px;background:linear-gradient(180deg,var(--kts-blue-50) 0%,#fff 100%);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);position:relative;overflow:hidden}
.warte-head{text-align:center;margin-bottom:52px}
.pkgs{display:grid;gap:24px;grid-template-columns:1fr;max-width:1080px;margin:0 auto}
@media(min-width:768px){.pkgs{grid-template-columns:repeat(3,1fr);align-items:start}.pkg{min-height:480px}}
.pkg{background:#fff;border:1px solid var(--border);border-radius:16px;padding:36px 32px;display:flex;flex-direction:column;position:relative;will-change:transform,opacity;transition:box-shadow .3s,border-color .3s,transform .3s cubic-bezier(.4,0,.2,1)}
.pkg:hover{box-shadow:var(--shadow-lg);border-color:var(--kts-blue-200);transform:scale(1.02)}
.pkg.popular{border:2px solid var(--accent);padding:35px 31px}
.pkg.popular:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.pkg .pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.pkg .pkg-name{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--kts-navy);margin:0 0 6px;letter-spacing:-.015em}
.pkg .pkg-sub{font-size:14px;color:var(--fg-2);margin:0 0 24px;line-height:1.5}
.pkg ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px}
.pkg li{display:flex;gap:10px;font-size:14.5px;color:var(--fg-1);line-height:1.5;align-items:flex-start}
.pkg li i{color:var(--accent);flex-shrink:0;margin-top:2px;background:var(--kts-blue-50);border-radius:50%;padding:3px;width:22px;height:22px;box-sizing:border-box}
.pkg .pkg-cta{margin-top:auto}
.pkg .pkg-foot{margin-top:14px;font-size:11.5px;color:var(--fg-3)}
/* Premium pkg has footnote — shrink padding-bottom so CTA aligns with other cards */
.pkg:has(.pkg-foot){padding-bottom:6px}
/* Collapsible benefit lists — cap to first 6 items until "Mehr anzeigen" */
.pkg ul.collapsible.collapsed li:nth-child(n+7){display:none}
.pkg ul.collapsible.collapsed{margin-bottom:16px}
.pkg-toggle{appearance:none;background:none;border:0;cursor:pointer;margin:0 0 24px;padding:0;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--accent)}
.pkg-toggle:hover{text-decoration:underline}
.pkg-toggle i,.pkg-toggle svg{width:16px;height:16px;transition:transform .3s}
.pkg-toggle[aria-expanded="true"] i,.pkg-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.warte-after{max-width:1080px;margin:44px auto 0;background:var(--kts-navy);color:#fff;border-radius:18px;padding:44px 40px;display:grid;gap:24px;grid-template-columns:1fr;align-items:center;position:relative;overflow:hidden;will-change:transform,opacity}
.warte-after::after{content:"";position:absolute;right:-100px;top:-100px;width:380px;height:380px;background:url('../../kts-design-system/assets/logo-mark.svg') center/contain no-repeat;opacity:.06;will-change:transform}
@media(min-width:768px){.warte-after{grid-template-columns:1fr auto;padding:56px 48px}}
.warte-after .body{position:relative;z-index:1}
.warte-after h3{font-family:var(--font-display);font-size:24px;color:#fff;margin:0 0 10px;line-height:1.25}
.warte-after p{margin:0;color:rgba(255,255,255,.78);font-size:15.5px;max-width:560px;line-height:1.55}
.warte-after .cta{position:relative;z-index:1}

/* Partners */
section.partners{padding:52px 0 32px;background:#fff;border-top:1px solid var(--border-subtle)}

/* V3 — Editorial divider below Partners */
.editorial-divider{display:flex;align-items:center;justify-content:center;gap:24px;padding:20px 0;background:#fff}
.editorial-divider .ed-line{flex:1;height:1px;background:var(--border-subtle)}
.editorial-divider .ed-icon{flex-shrink:0;width:28px;height:28px;color:var(--accent);opacity:.65}
.editorial-divider .ed-icon svg{width:100%;height:100%;display:block}

/* V8 — Diagonal + snowflake accent before News */
.diag-accent-wrap{position:relative;line-height:0;font-size:0;overflow:visible;height:80px;margin-top:-1px}
.diag-accent-wrap > svg{display:block;width:100%;height:100%}
.diag-accent-mark{position:absolute;left:5%;top:-22px;width:88px;height:88px;color:var(--accent);opacity:.55;pointer-events:none;z-index:5}
.diag-accent-mark svg{width:100%;height:100%;display:block}
section.partners .wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center}
section.partners .lbl{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--fg-3);text-transform:uppercase}
section.partners .logos{display:flex;gap:48px;flex-wrap:wrap;align-items:center}
section.partners .l{display:inline-flex;align-items:center;cursor:default}
section.partners .l img{height:28px;width:auto;display:block;filter:grayscale(1) brightness(0.6) contrast(0.9);opacity:.6;transition:filter .25s,opacity .25s,transform .25s;will-change:transform}
section.partners .l:hover img{filter:none;opacity:1;transform:scale(1.05)}

/* Referenzen Teaser */
section.refs{padding:60px 0 96px;background:#fff;position:relative;overflow:hidden}
.refs-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.refs-head .t{max-width:560px}
.refs-head .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.refs-head .ol::before,.refs-head .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
.refs-head h2{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--kts-navy);margin:14px 0 0}
.refs-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:768px){.refs-grid{grid-template-columns:repeat(3,1fr)}}
.ref-card{position:relative;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;aspect-ratio:4/5;display:block;box-shadow:var(--shadow-md);will-change:transform;transition:box-shadow .3s,transform .3s cubic-bezier(.4,0,.2,1)}
.ref-card:hover{box-shadow:var(--shadow-xl);transform:scale(1.02)}
.ref-card .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.4,.0,.2,1);will-change:transform}
.ref-card:hover .img{transform:scale(1.08)}
.ref-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,60,0) 30%,rgba(15,30,60,.85) 100%);z-index:1}
.ref-card .body{position:absolute;left:0;right:0;bottom:0;padding:28px 26px;z-index:2;color:#fff}
.ref-card .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--kts-ice);background:rgba(255,255,255,.10);backdrop-filter:blur(6px);padding:6px 10px;border-radius:999px;margin-bottom:14px}
.ref-card h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.25;letter-spacing:-.01em}
.ref-card .loc{font-size:13px;color:rgba(255,255,255,.78);display:inline-flex;align-items:center;gap:6px}
.refs-foot{margin-top:48px;text-align:center}

/* News */
section.news{padding:36px 0 104px;background:var(--bg-soft);position:relative;overflow:hidden}
.news-head{text-align:center;margin-bottom:44px}
.news-card{max-width:1080px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);display:grid;grid-template-columns:1fr;will-change:transform,opacity;transition:box-shadow .3s,border-color .3s,transform .3s cubic-bezier(.4,0,.2,1);text-decoration:none;color:inherit}
.news-card,.news-card:hover,.news-card:focus,.news-card:active{text-decoration:none}
.news-card:hover *,.news-card *:hover{text-decoration:none}
.news-card:hover{box-shadow:var(--shadow-lg);border-color:var(--kts-blue-200);transform:scale(1.02)}
@media(min-width:768px){.news-card{grid-template-columns:1fr 1fr}}
.news-img{position:relative;overflow:hidden;background:#0a1a30}
.news-img .bg{position:absolute;inset:-10%;background-image:url('../img/placeholder.jpg');background-size:cover;background-position:center;will-change:transform}
.news-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,60,.10) 0%,rgba(15,30,60,.50) 100%);z-index:1}
.news-img .floater{position:absolute;left:24px;top:24px;width:64px;height:64px;opacity:.85;z-index:2;will-change:transform}
.news-body{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.news-body .pill{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--kts-blue-50);padding:7px 14px;border-radius:999px;align-self:flex-start;margin-bottom:20px;display:inline-flex;align-items:center;gap:6px}
.news-body h3{font-family:var(--font-display);font-size:clamp(24px,3.2vw,32px);font-weight:700;color:var(--kts-navy);margin:0 0 14px;line-height:1.2;letter-spacing:-.015em}
.news-body p{font-size:15.5px;color:var(--fg-2);line-height:1.6;margin:0 0 28px}
.news-body .meta{display:flex;gap:18px;font-size:13px;color:var(--fg-3);margin-bottom:24px}
.news-body .meta span{display:inline-flex;gap:6px;align-items:center}

/* Testimonials */
section.test{padding:70px 0;background:#fff;position:relative;overflow:hidden}
.test-head{text-align:center;margin-bottom:36px}
.test-card{max-width:780px;margin:0 auto;text-align:center;position:relative}
.test-card .quote-mark{font-family:var(--font-display);font-size:200px;line-height:.8;color:var(--kts-blue-100);font-weight:800;display:block;margin-bottom:-32px;will-change:transform;transform:scale(0)}
.test-card .skl{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--bg-soft) 0%,var(--kts-blue-50) 50%,var(--bg-soft) 100%);background-size:200% 100%;margin:10px auto;max-width:560px;animation:shimmer 2.4s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.test-card .stars{display:flex;justify-content:center;gap:8px;color:var(--kts-ink-200);margin:32px 0 16px}
.test-card .stars i{transition:color .2s,transform .2s}
.test-card .stars i:hover{color:var(--accent);transform:scale(1.2)}
.test-card .note{font-size:14px;color:var(--fg-3);margin-top:28px;font-style:italic}

/* CTA */
section.ctaBand{padding:96px 0;background:var(--kts-navy);color:#fff;position:relative;overflow:hidden;text-align:center}
/* The translate offsets the old CSS used (`-50% -100%` / `-32% -40%`)
   were always overridden by the rotation animation's `transform`, so
   visually the watermarks have been anchored at left:62%/top:50% (down-
   right area) and left:0/top:0 (top-left) all along. Keeping the same
   visual position - only the `--py` parallax is applied via translate. */
/* `transform-origin` shifts the rotation pivot slightly off-center -
   the watermark visibly orbits a point a bit upper-left of its visual
   centre while spinning. Same value for `.mark` and `.mark-corner` so
   the wobble feels consistent. */
section.ctaBand .mark{position:absolute;left:62%;top:50%;translate:0 var(--py,0px);width:680px;height:680px;opacity:.06;transform-origin:32% 38%;will-change:translate}
section.ctaBand .mark-corner{position:absolute;left:0;top:0;translate:0 var(--py,0px);width:520px;height:520px;opacity:.06;pointer-events:none;transform-origin:32% 38%;will-change:translate}
section.ctaBand .glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(144,211,229,.20),rgba(144,211,229,0) 60%);will-change:transform;pointer-events:none}
section.ctaBand .glow.g1{left:-10%;top:-30%}
section.ctaBand .glow.g2{right:-10%;bottom:-30%}
section.ctaBand .wrap{position:relative;z-index:2}
section.ctaBand .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--kts-ice);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
section.ctaBand .ol::before,section.ctaBand .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
section.ctaBand h2{font-family:var(--font-display);font-size:clamp(32px,5vw,52px);font-weight:800;color:#fff;margin:0;letter-spacing:-.025em;line-height:1.1;max-width:760px;margin-left:auto;margin-right:auto}
section.ctaBand p{color:rgba(255,255,255,.78);margin:20px auto 36px;font-size:18px;max-width:560px;line-height:1.55}
section.ctaBand .acts{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{background:var(--kts-ink-900);color:rgba(255,255,255,.7);padding:64px 0 32px}
footer .grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h4{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14.5px;transition:color .2s}
footer a:hover{color:#fff}
footer .brand img{height:64px;opacity:.95;margin-bottom:14px}
footer .brand p{margin:0;font-size:14px;line-height:1.55}
footer .bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(255,255,255,.55)}
footer .bottom a{font-size:13px}
footer .soc{display:flex;gap:10px;margin-top:14px}
footer .soc a{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
footer .soc a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30)}

/* Scroll-to-Top button (right edge, above WhatsApp FAB — same size for visual consistency) */
.scroll-top{position:fixed;right:22px;bottom:92px;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--kts-navy);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(15,30,60,.18);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,background .2s,color .2s,border-color .2s,transform .2s,box-shadow .25s;z-index:60;padding:0}
.scroll-top.shown{opacity:1;visibility:visible}
.scroll-top:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.05);box-shadow:0 10px 22px rgba(15,30,60,.28)}
.scroll-top svg{width:24px;height:24px;display:block}
@media(max-width:767px){.scroll-top{bottom:162px}}

/* WhatsApp FAB */
.fab{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 16px rgba(15,30,60,.18);z-index:60;transform:scale(0);will-change:transform;transition:box-shadow .25s,transform .25s}
.fab:hover{box-shadow:0 10px 22px rgba(15,30,60,.28);transform:scale(1.05)}
.fab svg{width:30px;height:30px;display:block}
@media(max-width:767px){.fab{bottom:92px}}

/* Sticky mobile bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);padding:10px 12px env(safe-area-inset-bottom);display:none;gap:8px;z-index:55;transform:translateY(100%);transition:transform .35s cubic-bezier(.7,.0,.2,1);box-shadow:0 -10px 24px -8px rgba(15,30,60,.10)}
@media(max-width:767px){.mobile-bar{display:flex}}
.mobile-bar.shown{transform:translateY(0)}
.mobile-bar .btn{flex:1;justify-content:center}

/* ───────────────────────────────────────────────────────────────
   JS-animation fallbacks
   Every element below is hidden by CSS so motion.dev can fade it in.
   If motion fails to load (CDN blocked, network issue, file:// CORS),
   these CSS keyframes auto-reveal the content after a short delay so
   the page is never permanently blank.
   When site.js runs successfully, it adds `js-revealed` (generic) or
   `js-anim-ready` on <html> (hero/staggered groups) to cancel them.
   ─────────────────────────────────────────────────────────────── */

/* Watermark slow rotations — CSS-driven so they never depend on motion's
   CDN. Motion still adds scroll-driven scale/opacity on top via inline
   styles, which compose with the CSS rotation. */
/* Use the INDIVIDUAL `rotate` transform property (not the `transform`
   shorthand) so the rotation animation composes cleanly with each
   element's positioning translate AND any scroll-driven parallax we
   may layer on top via a CSS variable. */
@keyframes ktsRotate{from{rotate:0deg}to{rotate:360deg}}
@keyframes ktsRotateRev{from{rotate:0deg}to{rotate:-360deg}}
@media(prefers-reduced-motion: no-preference){
  #heroWatermark img{animation:ktsRotate 120s linear infinite;will-change:transform}
  #procBgMark img{animation:ktsRotate 95s linear infinite;will-change:transform}
  #svcWatermark img{animation:ktsRotateRev 130s linear infinite;will-change:transform}
  #ctaMark{animation:ktsRotate 95s linear infinite;will-change:transform}
  #ctaMarkCorner{animation:ktsRotateRev 120s linear infinite;will-change:transform}
  #svcCtaMark{animation:ktsRotate 95s linear infinite;will-change:transform}
  #svcCtaMarkCorner{animation:ktsRotateRev 120s linear infinite;will-change:transform}
  #wartCtaMark{animation:ktsRotate 95s linear infinite;will-change:transform}
  #wartCtaMarkCorner{animation:ktsRotateRev 120s linear infinite;will-change:transform}
  .page-hero-watermark img{animation:ktsRotate 110s linear infinite;will-change:transform}
}

/* Generic reveal — pure CSS transition, triggered by JS adding `.is-in`.
   No CSS animation fallback: IntersectionObserver is built into the browser
   and runs in Phase 1 of site.js (BEFORE the motion CDN import), so
   reveal-on-scroll never depends on network latency. Phase 1 also handles
   the no-IO and reduced-motion fallbacks by adding `.is-in` to all
   `.reveal` elements directly. */
/* ───────────────────────────────────────────────────────────────
   Reveal-on-scroll: progressive enhancement.
   Content is visible by default. The IntersectionObserver in site.js
   sets `.is-pre` (which hides) the moment it observes each element,
   then `.is-in` (which un-hides via the CSS transition) when it enters
   the viewport. If site.js never runs, nothing is ever hidden — the
   page works without any JS at all.
   ─────────────────────────────────────────────────────────────── */
.reveal{will-change:transform,opacity;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-pre{opacity:0;transform:translateY(28px)}
.reveal.is-in{opacity:1;transform:none}

/* ───────────────────────────────────────────────────────────────
   Generic page sections (for non-index pages)
   ─────────────────────────────────────────────────────────────── */

/* Page hero — overline + h1 + lead, light background with watermark */
section.page-hero{position:relative;overflow:hidden;background:#fff;padding:120px 0 80px;border-bottom:1px solid var(--border-subtle)}
section.page-hero .page-hero-watermark{position:absolute;left:62%;top:50%;translate:-5% -82%;width:680px;height:680px;opacity:.11;pointer-events:none;will-change:translate,rotate,scale,opacity;z-index:1}
section.page-hero .page-hero-watermark img{width:100%;height:100%;display:block}
section.page-hero .wrap{position:relative;z-index:2}
section.page-hero .breadcrumb{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--fg-3);text-transform:uppercase;margin-bottom:18px}
section.page-hero .breadcrumb a{color:var(--fg-3);transition:color .2s}
section.page-hero .breadcrumb a:hover{color:var(--accent)}
section.page-hero .breadcrumb span{margin:0 8px;opacity:.5}
section.page-hero .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
section.page-hero .ol::before,section.page-hero .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
section.page-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,5.5vw,60px);letter-spacing:-.025em;line-height:1.05;color:var(--kts-navy);margin:0 0 22px;max-width:780px}
section.page-hero .lead{font-size:19px;line-height:1.6;color:var(--fg-2);max-width:680px;margin:0}

/* Generic page section */
section.page{padding:96px 0;background:#fff;position:relative;overflow:hidden}
section.page > .wrap{position:relative;z-index:1}
section.page.alt{background:var(--bg-soft)}
section.page.dark{background:var(--kts-navy);color:#fff}
/* Wartungspakete-Section uses the same soft blue → white gradient as the
   `Wartung` section on the index. */
section.page#pakete{background:linear-gradient(180deg,var(--kts-blue-50) 0%,#fff 100%)}
section.page.dark h1,section.page.dark h2,section.page.dark h3,section.page.dark h4{color:#fff}
section.page.dark p{color:rgba(255,255,255,.78)}
.page-head{margin-bottom:48px;max-width:780px}
.page-head.center{margin-left:auto;margin-right:auto;text-align:center}
.page-head .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.page-head .ol::before,.page-head .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
.page-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.5vw,40px);letter-spacing:-.02em;line-height:1.15;color:var(--kts-navy);margin:0}
.page-head p{margin:14px 0 0;color:var(--fg-2);font-size:17px;line-height:1.6;max-width:620px}
.page-head.center p{margin-left:auto;margin-right:auto}

/* Content block — 2-column layout (text + bullets/extra) */
.block-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:64px}
@media(min-width:768px){.block-grid{grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}}
.block-grid:last-child{margin-bottom:0}
.block-grid .block-head .ic{width:50px;height:50px;border-radius:13px;background:var(--kts-blue-50);color:var(--kts-blue-700);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.block-grid h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.02em;line-height:1.15;color:var(--kts-navy);margin:0 0 18px}
.block-grid p{margin:0 0 14px;color:var(--fg-2);font-size:16px;line-height:1.65}
.block-grid p:last-child{margin-bottom:0}
.block-grid ul.bullets{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.block-grid ul.bullets li{display:flex;gap:12px;font-size:15px;color:var(--fg-1);line-height:1.5}
.block-grid ul.bullets li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px}
.block-grid .actions{display:flex;gap:14px;flex-wrap:wrap}

/* Dividers between content blocks */
.block-grid + .block-grid{padding-top:64px;border-top:1px solid var(--border-subtle)}

/* ───────────────────────────────────────────────────────────────
   Leistungen page — editorial multi-section layout
   ─────────────────────────────────────────────────────────────── */

/* Hero variant: full-bleed photo background + snowflake brand stamp
   (Variante 5 aus mockups/snowflake-treatments.html) */
section.page-hero.svc-hero{background:#0a1a30;padding:160px 0 130px;border-bottom:0;color:#fff}
section.page-hero.svc-hero .svc-hero-photo{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?auto=format&fit=crop&w=1800&q=80');background-size:cover;background-position:center;will-change:transform;z-index:0}
section.page-hero.svc-hero .svc-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,26,48,.92) 0%,rgba(10,26,48,.78) 55%,rgba(10,26,48,.55) 100%)}
section.page-hero.svc-hero .svc-hero-stamp{position:absolute;right:-90px;bottom:-130px;width:560px;height:560px;pointer-events:none;z-index:1;will-change:transform,opacity}
section.page-hero.svc-hero .svc-hero-stamp img{width:100%;height:100%;display:block;filter:brightness(0) invert(1);opacity:.10;mix-blend-mode:overlay}
section.page-hero.svc-hero .wrap{position:relative;z-index:2}
section.page-hero.svc-hero h1{color:#fff}
section.page-hero.svc-hero .lead{color:rgba(255,255,255,.82)}
section.page-hero.svc-hero .ol{color:var(--kts-ice)}
section.page-hero.svc-hero .breadcrumb{color:rgba(255,255,255,.55)}
section.page-hero.svc-hero .breadcrumb a{color:rgba(255,255,255,.55)}
section.page-hero.svc-hero .breadcrumb a:hover{color:#fff}

/* Sticky jump-nav with section chips */
.svc-jump{position:sticky;top:72px;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--border-subtle);padding:8px 0 8px 0}
.svc-jump-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:1140px;margin:0 auto;padding:6px 24px}
.svc-jump-list::-webkit-scrollbar{display:none}
.svc-jump-chip{font-family:var(--font-display);font-weight:600;font-size:13px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--border);color:var(--fg-2);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s;flex-shrink:0}
.svc-jump-chip:hover{background:var(--kts-blue-50);color:var(--kts-blue-700);border-color:var(--kts-blue-200);transform:translateY(-1px)}
.svc-jump-chip.active{background:var(--kts-navy);color:#fff;border-color:var(--kts-navy)}

/* Service section — alternating backgrounds + decorations */
section.svc-section{position:relative;padding:120px 0;overflow:hidden;background:#fff;scroll-margin-top:120px}
section.svc-section.alt{background:var(--bg-soft);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
section.svc-section.dark{background:var(--kts-navy);color:#fff}
section.svc-section.dark h2,section.svc-section.dark h3{color:#fff}
section.svc-section.dark p,section.svc-section.dark li{color:rgba(255,255,255,.85)}

/* Giant numeral in the background */
.svc-numeral{position:absolute;font-family:var(--font-display);font-weight:800;font-size:clamp(220px,32vw,440px);line-height:.78;color:var(--kts-navy);opacity:.045;pointer-events:none;z-index:0;user-select:none;letter-spacing:-.04em;will-change:transform}
.svc-numeral.right{right:-3vw;top:50%;translate:0 -50%}
.svc-numeral.left{left:-3vw;top:50%;translate:0 -50%}
section.svc-section.dark .svc-numeral{color:#fff;opacity:.065}

/* Background watermark (rotating snowflake/logo silhouette) */
.svc-bg-mark{position:absolute;width:560px;height:560px;opacity:.05;pointer-events:none;z-index:0;will-change:transform}
.svc-bg-mark.right{right:-160px;top:50%;translate:0 -50%}
.svc-bg-mark.left{left:-200px;top:50%;translate:0 -50%}
.svc-bg-mark img{width:100%;height:100%;display:block}
section.svc-section.dark .svc-bg-mark{filter:brightness(0) invert(1);opacity:.055}
section.page.dark .svc-bg-mark{filter:brightness(0) invert(1);opacity:.06}
@media(prefers-reduced-motion: no-preference){
  .svc-bg-mark img{animation:ktsRotate 90s linear infinite}
  .svc-bg-mark.left img{animation:ktsRotateRev 105s linear infinite}
}

/* Two-column block layout — text on one side, body-card on the other */
.svc-block{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:920px){
  .svc-block{grid-template-columns:1.15fr 1fr;gap:80px;align-items:start}
  .svc-block.flip > .svc-block-head{order:2}
  .svc-block.flip > .svc-block-body{order:1}
}

/* Head: overline + big icon + title + paragraphs + CTA */
.svc-block-head .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.svc-block-head .ol::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
section.svc-section.dark .svc-block-head .ol{color:var(--kts-ice)}
.svc-block-head .ic-big{width:80px;height:80px;border-radius:20px;background:var(--kts-blue-50);color:var(--kts-blue-700);display:flex;align-items:center;justify-content:center;margin-bottom:28px;border:1px solid var(--kts-blue-100)}
.svc-block-head .ic-big svg{width:40px;height:40px}
section.svc-section.dark .svc-block-head .ic-big{background:rgba(255,255,255,.06);color:var(--kts-ice);border-color:rgba(255,255,255,.12)}

/* Looping icon animations on .svc-block once the section is in view.
   The IntersectionObserver adds `.is-in` to every `.reveal` element;
   we trigger the animations from there so they don't run while the
   section is off-screen. Continuous loops so the motion is clearly
   noticeable when the user scrolls into the section. */
.svc-block.is-in .ic-big .aico-snowflake{animation:svcSnowSpin 9s linear infinite}
@keyframes svcSnowSpin{from{rotate:0deg}to{rotate:360deg}}

.svc-block .ic-big .aico-wind path{stroke-dasharray:35;stroke-dashoffset:0}
.svc-block.is-in .ic-big .aico-wind path:nth-of-type(1){animation:svcWindPulse 2.2s ease-in-out infinite}
.svc-block.is-in .ic-big .aico-wind path:nth-of-type(2){animation:svcWindPulse 2.2s ease-in-out infinite .25s}
.svc-block.is-in .ic-big .aico-wind path:nth-of-type(3){animation:svcWindPulse 2.2s ease-in-out infinite .50s}
@keyframes svcWindPulse{
  0%{stroke-dashoffset:35}
  40%, 60%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-35}
}

.svc-block .ic-big .aico-car .speed-line{opacity:0}
.svc-block.is-in .ic-big .aico-car .line-1{animation:svcSpeed 1.4s ease-in-out infinite}
.svc-block.is-in .ic-big .aico-car .line-2{animation:svcSpeed 1.4s ease-in-out infinite .15s}
.svc-block.is-in .ic-big .aico-car .line-3{animation:svcSpeed 1.4s ease-in-out infinite .30s}
@keyframes svcSpeed{
  0%{opacity:0;transform:translateX(10px)}
  35%, 55%{opacity:.85;transform:translateX(0)}
  100%{opacity:0;transform:translateX(-12px)}
}

.svc-block .ic-big .aico-temp .mercury{transform-origin:center bottom;transform-box:fill-box;transform:scaleY(.3)}
.svc-block.is-in .ic-big .aico-temp .mercury{animation:svcMercury 2.4s ease-in-out infinite}
@keyframes svcMercury{
  0%, 100%{transform:scaleY(.3)}
  50%{transform:scaleY(1)}
}

.svc-block .ic-big .aico-leaf{transform-origin:center top;transform-box:fill-box}
.svc-block.is-in .ic-big .aico-leaf{animation:svcLeafSway 3.2s ease-in-out infinite}
@keyframes svcLeafSway{
  0%, 100%{transform:rotate(-6deg) translateY(0)}
  25%{transform:rotate(5deg) translateY(-1px)}
  50%{transform:rotate(-4deg) translateY(1px)}
  75%{transform:rotate(6deg) translateY(-1px)}
}
.svc-block-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4.5vw,46px);letter-spacing:-.025em;line-height:1.05;color:var(--kts-navy);margin:0 0 22px}
.svc-block-head p{margin:0 0 16px;color:var(--fg-2);font-size:17px;line-height:1.7}
.svc-block-head p:last-of-type{margin-bottom:30px}
.svc-block-head .actions{display:flex;gap:14px;flex-wrap:wrap}

/* Body: card with photo header + checklist inside */
.svc-block-body{position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.svc-block-body .body-img{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.svc-block-body .body-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,60,0) 60%,rgba(15,30,60,.18) 100%);pointer-events:none}
.svc-block-body .body-inner{padding:32px 32px 34px}
section.svc-section.alt .svc-block-body{background:#fff}
section.svc-section.dark .svc-block-body{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.svc-block-body h3{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 22px;display:flex;align-items:center;gap:10px}
.svc-block-body h3::before{content:"";width:24px;height:2px;background:var(--accent);border-radius:1px}
section.svc-section.dark .svc-block-body h3{color:rgba(255,255,255,.55)}
section.svc-section.dark .svc-block-body h3::before{background:var(--kts-ice)}
.svc-block-body ul.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.svc-block-body ul.checklist li{display:flex;gap:14px;font-size:15px;color:var(--fg-1);line-height:1.5;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.svc-block-body ul.checklist li:last-child{border-bottom:0;padding-bottom:0}
.svc-block-body ul.checklist li:first-child{padding-top:0}
.svc-block-body ul.checklist li::before{content:"";flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--kts-blue-50);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230076CD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-repeat:no-repeat;background-position:center;margin-top:1px;transition:transform .3s}
.svc-block-body ul.checklist li:hover::before{transform:scale(1.15)}
section.svc-section.dark .svc-block-body ul.checklist li{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.08)}
section.svc-section.dark .svc-block-body ul.checklist li::before{background-color:rgba(144,211,229,.16);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2390D3E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}

/* Diagonal divider between sections */
.svc-divider{position:relative;height:80px;overflow:hidden;line-height:0;font-size:0;margin-top:-1px;margin-bottom:-1px;z-index:1;pointer-events:none}
.svc-divider svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* fills for transitions */
/* Each divider's BG matches the section ABOVE; polygon fills the slanted
   portion in the color of the section BELOW. Required for any transition
   that involves navy, because the body's white default would otherwise
   bleed through the un-filled triangle. */
.svc-divider.white-to-soft{background:#fff}
.svc-divider.white-to-soft polygon{fill:var(--bg-soft)}
.svc-divider.soft-to-white{background:var(--bg-soft)}
.svc-divider.soft-to-white polygon{fill:#fff}
.svc-divider.white-to-navy{background:#fff}
.svc-divider.white-to-navy polygon{fill:var(--kts-navy)}
.svc-divider.navy-to-soft{background:var(--kts-navy)}
.svc-divider.navy-to-soft polygon{fill:var(--bg-soft)}
.svc-divider.soft-to-navy{background:var(--bg-soft)}
.svc-divider.soft-to-navy polygon{fill:var(--kts-navy)}
.svc-divider.navy-to-white{background:var(--kts-navy)}
.svc-divider.navy-to-white polygon{fill:#fff}
/* Tighten the space between a section and a diagonal divider. Scoped to
   .page / .cmp / .page-hero next to a .svc-divider, so leistungen's
   svc-sections and the index .diag-accent-wrap transitions are unaffected. */
section.page:has(+ .svc-divider),
section.cmp:has(+ .svc-divider),
section.page-hero:has(+ .svc-divider){padding-bottom:60px}
.svc-divider + section.page,
.svc-divider + section.cmp{padding-top:60px}

/* CTA band — slightly nicer than the generic page-cta */
section.page-cta.svc-cta{padding:110px 0}
section.page-cta.svc-cta::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:240px;height:3px;background:linear-gradient(90deg,transparent,var(--kts-ice),transparent);opacity:.5}

/* CTA band — slightly nicer than the generic page-cta */
/* (deduped below in the original page-cta block) */

/* CTA band shared style */
section.page-cta{padding:96px 0 100px;background:var(--kts-navy);color:#fff;position:relative;overflow:hidden;text-align:center}
/* Default (shared) decorative snowflake stamp - V2 cutout, kept for
   sub-pages that aren't `.svc-cta`. */
section.page-cta:not(.svc-cta)::after{content:"";position:absolute;right:4%;top:-260px;width:620px;height:620px;background:url('../../kts-design-system/assets/logo-mark.svg') center/contain no-repeat;opacity:.08;transform:rotate(22deg);transform-origin:center;filter:brightness(0) invert(1);pointer-events:none;mix-blend-mode:screen}

/* Leistungen variant matches the index #ctaBand visual: 2 cyan glows
   and a big rotating logo-mark in the center + a small one at the
   top-left corner. */
section.page-cta.svc-cta{padding:120px 0}
section.page-cta.svc-cta .glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(144,211,229,.20),rgba(144,211,229,0) 60%);will-change:transform;pointer-events:none;z-index:0}
section.page-cta.svc-cta .glow.g1{left:-10%;top:-30%}
section.page-cta.svc-cta .glow.g2{right:-10%;bottom:-30%}
/* Matches the index #ctaBand .mark / .mark-corner exactly - same
   anchor, same off-center rotation pivot, identical wobble effect. */
section.page-cta.svc-cta .mark{position:absolute;left:62%;top:50%;translate:0 var(--py,0px);width:680px;height:680px;opacity:.06;pointer-events:none;z-index:0;transform-origin:32% 38%;will-change:translate}
section.page-cta.svc-cta .mark-corner{position:absolute;left:0;top:0;translate:0 var(--py,0px);width:520px;height:520px;opacity:.06;pointer-events:none;z-index:0;transform-origin:32% 38%;will-change:translate}
section.page-cta.svc-cta h2{font-size:clamp(32px,5vw,52px);max-width:760px;margin-left:auto;margin-right:auto;line-height:1.1}
section.page-cta.svc-cta p{font-size:18px;max-width:560px}
section.page-cta.svc-cta .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--kts-ice);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
section.page-cta.svc-cta .ol::before,section.page-cta.svc-cta .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
section.page-cta .wrap{position:relative;z-index:1}
section.page-cta h2{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:800;color:#fff;margin:0 0 14px;letter-spacing:-.02em;line-height:1.15}
section.page-cta p{color:rgba(255,255,255,.78);margin:0 auto 28px;font-size:17px;max-width:520px;line-height:1.55}
section.page-cta .acts{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}

/* ───────────────────────────────────────────────────────────────
   "So arbeiten wir" - parallax background watermark
   ─────────────────────────────────────────────────────────────── */
.proc-bg-mark{position:absolute;right:-12%;top:-5%;width:780px;height:780px;opacity:.05;pointer-events:none;z-index:0;will-change:transform;user-select:none}
.proc-bg-mark img{width:100%;height:100%;display:block}
section.proc .wrap{position:relative;z-index:1}

/* ───────────────────────────────────────────────────────────────
   Wartungs-Vergleichstabelle (Comparison Table)
   ─────────────────────────────────────────────────────────────── */
section.cmp{background:var(--kts-navy);color:#fff;padding:110px 0;position:relative;overflow:hidden}
section.cmp .wrap{position:relative;z-index:1}
/* Decorative glows behind the comparison table.
   Positioned fully inside the section's vertical bounds so they aren't
   sliced off straight by the diagonal dividers above and below; the
   horizontal -15 % keeps them peeking from the section's side edges. */
section.cmp .cmp-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(144,211,229,.20),rgba(144,211,229,0) 65%);pointer-events:none;z-index:0;filter:blur(10px)}
section.cmp .cmp-glow.g1{left:-18%;top:8%}
section.cmp .cmp-glow.g2{right:-18%;bottom:8%}
/* svc-bg-mark inverted on dark sections so it stays visible */
.svc-bg-mark.dark-mode img{filter:brightness(0) invert(1);opacity:.7}
/* Two watermarks in .cmp: one upper-left, one lower-right, so the tall
   comparison table has balanced decoration without fighting the head text. */
section.cmp .svc-bg-mark.left{top:36%}
section.cmp .svc-bg-mark.right{top:72%}
section.cmp .cmp-head{max-width:780px;margin:0 auto 48px;text-align:center;position:relative;z-index:1}
section.cmp .cmp-head .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--kts-ice);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
section.cmp .cmp-head .ol::before,section.cmp .cmp-head .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.5}
section.cmp .cmp-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.5vw,42px);letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0 0 14px}
section.cmp .cmp-head p{margin:0;color:rgba(255,255,255,.78);font-size:17px;line-height:1.6}
.cmp-table{max-width:1080px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md)}
.cmp-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;transition:background .2s}
.cmp-row.head{background:var(--kts-blue-50)}
.cmp-row:not(.head):not(.cta-row):hover{background:rgba(0,120,205,.04)}
/* Each cell is a flex container — guarantees vertical centring AND that
   every row has the SAME height (defined by tallest column). */
.cmp-row > div{padding:14px 20px;min-height:60px;border-top:1px solid var(--divider);font-size:14.5px;color:var(--fg-2);line-height:1.4;display:flex;align-items:center;box-sizing:border-box}
.cmp-row > div:first-child{font-family:var(--font-display);font-weight:600;color:var(--fg-1);border-right:1px solid var(--divider);justify-content:flex-start}
.cmp-row > div:not(:first-child){justify-content:center;text-align:center}
.cmp-row.head > div{border-top:0;padding:22px 20px;min-height:96px;flex-direction:column;justify-content:center;text-align:left}
.cmp-row.head > div:first-child{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);align-items:flex-start}
.cmp-row.head > div:not(:first-child){font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--kts-navy);text-align:center;align-items:center}
.cmp-row.head .pkg-sub{display:block;font-size:12px;font-weight:500;color:var(--fg-3);margin-top:4px;letter-spacing:0;text-transform:none;font-family:var(--font-body);line-height:1.35}
.cmp-row.head .pop-mini{display:inline-block;background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.16em;padding:3px 8px;border-radius:999px;margin-top:8px;text-transform:uppercase}
.cmp-row .yes{color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.cmp-row .yes svg,.cmp-row .yes i{width:20px;height:20px;display:block}
.cmp-row .no{color:var(--kts-ink-200);display:inline-flex;align-items:center;justify-content:center}
.cmp-row .no svg,.cmp-row .no i{width:20px;height:20px;display:block}
.cmp-row .pop-col{position:relative}
.cmp-row.head .pop-col{background:rgba(0,120,205,.08)}
.cmp-row:not(.head):not(.cta-row) .pop-col{background:rgba(0,120,205,.025)}
.cmp-row.cta-row > div{padding:22px 20px;min-height:80px;border-top:1px solid var(--divider)}
.cmp-row.cta-row > div:first-child{border-right:0;font-family:var(--font-body);font-weight:500;color:var(--fg-3);font-size:12px;font-style:italic;justify-content:flex-start;text-align:left}
@media(max-width:767px){
  .cmp-table{overflow-x:auto}
  .cmp-row{grid-template-columns:200px 130px 130px 130px;min-width:590px}
}
.cmp-after{max-width:1080px;margin:36px auto 0;display:grid;gap:24px;grid-template-columns:1fr;align-items:center;background:var(--kts-navy);color:#fff;padding:36px 40px;border-radius:18px;position:relative;overflow:hidden}
@media(min-width:768px){.cmp-after{grid-template-columns:1fr auto;padding:44px 48px}}
.cmp-after::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;background:url('../../kts-design-system/assets/logo-mark.svg') center/contain no-repeat;opacity:.05;filter:brightness(0) invert(1);pointer-events:none}
.cmp-after > div{position:relative;z-index:1}
.cmp-after h3{font-family:var(--font-display);font-size:22px;color:#fff;margin:0 0 10px;line-height:1.25;letter-spacing:-.01em}
.cmp-after p{margin:0;color:rgba(255,255,255,.78);font-size:15.5px;max-width:580px;line-height:1.55}
.cmp-after .btn{position:relative;z-index:1}

/* Skip link (a11y) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--kts-navy);color:#fff;padding:10px 16px;z-index:9999}
.skip-link:focus{left:0}

/* ───────────────────────────────────────────────────────────────
   Shared card grids / highlights for sub-pages
   ─────────────────────────────────────────────────────────────── */

/* Three-column small icon cards (values, features, …) */
.cards-3{display:grid;gap:24px;grid-template-columns:1fr;max-width:1080px;margin:0 auto}
@media(min-width:768px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.feature-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);transition:box-shadow .3s,border-color .3s;will-change:box-shadow}
.feature-card:hover{box-shadow:var(--shadow-lg);border-color:var(--kts-blue-200)}
.feature-card .ic{width:50px;height:50px;border-radius:13px;background:var(--kts-blue-50);color:var(--kts-blue-700);display:flex;align-items:center;justify-content:center;margin-bottom:6px;transition:background .35s,color .35s,transform .4s cubic-bezier(.5,-.3,.4,1.5);transform-origin:center;will-change:transform}
.feature-card:hover .ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.08)}
.feature-card h3{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--kts-navy);margin:0;letter-spacing:-.01em;line-height:1.25}
.feature-card p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.6}

/* Highlight band (e.g. Meisterbetrieb seal) — dark navy with icon */
.highlight-band{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.highlight-band .seal{width:64px;height:64px;border-radius:50%;background:var(--kts-blue-50);display:flex;align-items:center;justify-content:center;color:var(--kts-blue-700);flex-shrink:0;margin-bottom:20px}
.highlight-band .body{position:relative}
.highlight-band .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.highlight-band .ol::before,.highlight-band .ol::after{content:"";width:20px;height:1px;background:currentColor;opacity:.4}
.highlight-band h3{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.5vw,40px);color:var(--kts-navy);margin:0 0 14px;line-height:1.15;letter-spacing:-.02em}
.highlight-band p{margin:0 auto;color:var(--fg-2);font-size:15.5px;max-width:560px;line-height:1.65}

/* Map embed */
.map-wrap{position:relative;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/9;max-width:1080px;margin:0 auto;background:var(--bg-soft)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.map-wrap:hover iframe{pointer-events:auto}

/* Filter pills (e.g. project filter) */
.filter-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.filter-pill{font-family:var(--font-display);font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;border:1px solid var(--border-strong);background:#fff;color:var(--fg-1);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;line-height:1;min-height:38px;display:inline-flex;align-items:center}
.filter-pill:hover{border-color:var(--accent);color:var(--accent)}
.filter-pill[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Projects grid (referenzen) */
.projects-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:680px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.projects-grid{grid-template-columns:repeat(3,1fr)}}
.project-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .3s,border-color .3s,transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}
.project-card:hover{box-shadow:var(--shadow-lg);border-color:var(--kts-blue-200);transform:translateY(-3px)}
.project-card.is-hidden{display:none}
.project-card .image{aspect-ratio:4/3;background:linear-gradient(135deg,var(--kts-blue-50),var(--kts-blue-100));position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.project-card .image::before{content:"";position:absolute;inset:0;background:url('../../kts-design-system/assets/logo-mark.svg') center/40% no-repeat;opacity:.18}
.project-card .image.photo{background:center/cover no-repeat}
.project-card .image.photo::before{display:none}
.project-card .placeholder-note{position:relative;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--kts-blue-700);padding:8px 14px;background:rgba(255,255,255,.85);border-radius:6px;text-align:center;z-index:1}
.project-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.project-card .badge{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--kts-blue-50);padding:5px 10px;border-radius:6px;align-self:flex-start;margin-bottom:6px}
.project-card h3{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.35;color:var(--kts-navy);margin:0;letter-spacing:-.01em}
.project-card .loc{display:flex;align-items:center;gap:6px;color:var(--fg-3);font-size:13px;margin:6px 0 0}
.project-card .loc i{flex-shrink:0}

/* Legal documents (Impressum, Datenschutz) */
.legal-doc{max-width:780px;margin:0 auto}
.legal-doc h2{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--kts-navy);margin:36px 0 12px;letter-spacing:-.01em;line-height:1.25}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--kts-navy);margin:24px 0 10px;letter-spacing:-.005em}
.legal-doc p,.legal-doc address,.legal-doc ul,.legal-doc ol{margin:0 0 14px;color:var(--fg-1);font-size:15.5px;line-height:1.65}
.legal-doc address{font-style:normal}
.legal-doc ul,.legal-doc ol{padding-left:22px}
.legal-doc li{margin-bottom:6px}
.legal-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{text-decoration-thickness:2px}
.legal-doc strong{color:var(--kts-navy)}
.legal-doc em{color:var(--fg-3);font-style:italic}

/* Contact grid: form + info aside */
.contact-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:980px){.contact-grid{grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}}

/* Form card */
.form-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:36px 32px;box-shadow:var(--shadow-md)}
@media(min-width:680px){.form-card{padding:44px 40px}}
.form-grid{display:flex;flex-direction:column;gap:20px}
.form-grid.two{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:560px){.form-grid.two{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--kts-navy);letter-spacing:.02em}
.field label .req{color:var(--accent);font-weight:700}
.field label .hint{color:var(--fg-3);font-weight:500;font-size:12px;margin-left:6px}
.field.is-prefilled label{color:var(--accent)}
.field.is-prefilled select{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,120,205,.12)}
.field input,.field select,.field textarea{font-family:var(--font-text);font-size:15px;color:var(--fg-1);padding:11px 14px;border:1px solid var(--border-strong);border-radius:8px;background:#fff;transition:border-color .2s,box-shadow .2s;width:100%;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,120,205,.12)}
.field textarea{resize:vertical;min-height:120px;font-family:var(--font-text);line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230076CD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;cursor:pointer}
.field select::-ms-expand{display:none}
.field select option{background-color:#fff;color:#0F1E3C}
.checkbox-field{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fg-2);line-height:1.5}
.checkbox-field input{margin-top:4px;flex-shrink:0;accent-color:var(--accent)}
.checkbox-field label{cursor:pointer}
.checkbox-field a{color:var(--accent);text-decoration:underline}
.form-success{display:none;margin-top:20px;padding:16px 20px;background:var(--kts-blue-50);border:1px solid var(--kts-blue-200);border-radius:8px;color:var(--kts-blue-700);font-size:15px}
.form-success.is-visible{display:block}

/* Custom validation tooltips (replace the unstyleable native bubble) */
.field,.checkbox-field{position:relative}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,120,205,.14)}
.field-error{position:absolute;top:100%;left:0;margin-top:8px;z-index:6;display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:600;font-size:12.5px;line-height:1.25;padding:8px 12px;border-radius:9px;box-shadow:0 12px 26px -8px rgba(15,30,60,.5);max-width:300px;animation:fieldErr .22s cubic-bezier(.22,1,.36,1)}
.field-error::before{content:"";position:absolute;bottom:100%;left:18px;border:6px solid transparent;border-bottom-color:var(--accent)}
.field-error svg{width:15px;height:15px;flex-shrink:0}
@keyframes fieldErr{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* Info cards (contact aside) */
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px;box-shadow:var(--shadow-sm)}
.contact-info-card h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--kts-navy);margin:0 0 16px;letter-spacing:-.005em}
.contact-info-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.contact-info-card li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--fg-1);line-height:1.5}
.contact-info-card li .icon{color:var(--accent);flex-shrink:0;margin-top:2px}
.contact-info-card a{color:var(--fg-1);text-decoration:none;transition:color .2s}
.contact-info-card a:hover{color:var(--accent)}

/* Contact form on a dark (navy) section — glassy transparent cards and
   light form controls. Mirrors the leistungen Wärmepumpen dark treatment. */
section.page.dark .form-card,
section.page.dark .contact-info-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
section.page.dark .contact-info-card h3{color:#fff}
section.page.dark .field label{color:rgba(255,255,255,.92)}
section.page.dark .field label .hint{color:rgba(255,255,255,.5)}
section.page.dark .field input,
section.page.dark .field select,
section.page.dark .field textarea{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
section.page.dark .field input::placeholder,
section.page.dark .field textarea::placeholder{color:rgba(255,255,255,.45)}
section.page.dark .field input:focus,
section.page.dark .field select:focus,
section.page.dark .field textarea:focus{border-color:var(--kts-ice);box-shadow:0 0 0 3px rgba(144,211,229,.18)}
section.page.dark .field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2390D3E5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
section.page.dark .field select option{background-color:#0F1E3C;color:#fff}
section.page.dark .field.is-prefilled label{color:var(--kts-ice)}
section.page.dark .field.is-prefilled select{border-color:var(--kts-ice);box-shadow:0 0 0 3px rgba(144,211,229,.18)}
section.page.dark .checkbox-field{color:rgba(255,255,255,.8)}
section.page.dark .checkbox-field a{color:var(--kts-ice)}
section.page.dark .contact-info-card li{color:rgba(255,255,255,.88)}
section.page.dark .contact-info-card li .icon{color:var(--kts-ice)}
section.page.dark .contact-info-card a{color:rgba(255,255,255,.88)}
section.page.dark .contact-info-card a:hover{color:var(--kts-ice)}
section.page.dark .form-success{background:rgba(144,211,229,.10);border-color:rgba(144,211,229,.30);color:var(--kts-ice)}

/* News list grid (news.html index) */
.news-list-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:680px){.news-list-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.news-list-grid{grid-template-columns:repeat(3,1fr)}}
.news-tile{background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:box-shadow .3s,border-color .3s,transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}
.news-tile:hover{box-shadow:var(--shadow-lg);border-color:var(--kts-blue-200);transform:translateY(-3px)}
.news-tile.is-hidden{display:none}
.news-tile .meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.news-tile .category{color:var(--accent)}
.news-tile .date{color:var(--fg-3)}
.news-tile h3{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;color:var(--kts-navy);margin:0;letter-spacing:-.01em}
.news-tile p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.55}
.news-tile .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--accent);padding-top:6px}
.news-tile:hover .more i{transform:translateX(3px)}
.news-tile .more i{transition:transform .25s}

/* Article body (news-1, news-2) */
.article-body{max-width:760px;margin:0 auto}
.article-body p{font-size:17px;line-height:1.75;color:var(--fg-1);margin:0 0 22px}
.article-body h2{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,28px);line-height:1.25;letter-spacing:-.015em;color:var(--kts-navy);margin:40px 0 16px}
.article-body h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.3;color:var(--kts-navy);margin:32px 0 12px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px;color:var(--fg-1);font-size:17px;line-height:1.7}
.article-body ul li,.article-body ol li{margin-bottom:8px}
.article-body blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:24px 0;color:var(--fg-2);font-style:italic;font-size:17px;line-height:1.6}
.article-body strong{color:var(--kts-navy)}
.article-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.article-meta .category{color:var(--accent)}
.article-meta .date{color:var(--fg-3)}

/* Two-column simple grid for stories/intro pairs */
.two-col{display:grid;gap:40px;grid-template-columns:1fr;margin-bottom:64px}
@media(min-width:880px){.two-col{grid-template-columns:1fr 1fr;gap:64px}}
.two-col .ol{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:14px}
.two-col h2{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,28px);letter-spacing:-.015em;line-height:1.2;color:var(--kts-navy);margin:0 0 16px}
.two-col p{margin:0 0 14px;color:var(--fg-2);font-size:16px;line-height:1.65}
.two-col p:last-child{margin-bottom:0}

/* ─── Mobile refinements (phones ≤767px) — desktop layout untouched ──────
   Desktop section paddings (96–160px) leave large empty bands on a narrow
   phone column. These rules only tighten vertical rhythm and scale down
   purely decorative elements; layout, colours and behaviour are unchanged. */
@media(max-width:767px){
  section.page{padding:60px 0}
  section.svc-section{padding:64px 0}
  section.cmp{padding:60px 0}
  section.warte{padding:56px 0 64px}
  section.ctaBand{padding:64px 0}
  section.page-cta{padding:64px 0 68px}
  section.page-cta.svc-cta{padding:68px 0}
  section.page-hero{padding:80px 0 48px}
  section.page-hero.svc-hero{padding:100px 0 68px}
  .page-head{margin-bottom:32px}
  /* Big section numerals read as faint background texture — smaller on phones */
  .svc-numeral{font-size:150px}
  /* Diagonal transition bands look oversized on a narrow column */
  .svc-divider{height:52px}
  .diag-accent-wrap{height:56px}
}

/* ─── Mobile header: keep hamburger square, declutter + tame logo on phones ── */
.hamburger{flex-shrink:0}
@media(max-width:600px){
  .nav .right .btn{display:none}
  .nav .brand img{height:60px}
  .nav.scrolled .brand img{height:50px}
}

/* ─── Mobile slide-in menu: branded, animated watermark, cleaner links/buttons ── */
.mobile-menu{overflow:hidden}
.mobile-menu::before{content:"";position:absolute;right:-90px;bottom:-80px;width:380px;height:380px;background:url('../../kts-design-system/assets/logo-mark.svg') center/contain no-repeat;opacity:.06;filter:brightness(0) invert(1);pointer-events:none;z-index:0}
@media(prefers-reduced-motion:no-preference){.mobile-menu.open::before{animation:ktsRotate 120s linear infinite}}
.mobile-menu .top,.mobile-menu ul,.mobile-menu .ctas{position:relative;z-index:1}
.mobile-menu .top img{height:52px;width:auto;display:block}
.mobile-menu ul a svg,.mobile-menu ul a i{display:none}
.mobile-menu ul a{border-bottom-color:rgba(255,255,255,.10);transition:color .2s}
.mobile-menu ul a:hover,.mobile-menu ul a.active{color:var(--kts-ice)}
.mobile-menu .ctas{gap:12px}
.mobile-menu .ctas .btn{width:100%;justify-content:center}
.mobile-menu .ctas .btn-on-dark-primary{color:var(--kts-navy)}
.mobile-menu .ctas .btn-on-dark-primary:hover{color:var(--kts-navy)}
/* Phone CTA: glassy surface like the leistungen Wärmepumpen (04) dark card */
.mobile-menu .ctas .btn-on-dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mobile-menu .ctas .btn-on-dark:hover{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.18)}

/* ─── Mobile: avoid two overlapping CTA watermarks — drop the right one ── */
@media(max-width:767px){
  section.ctaBand .mark,
  section.page-cta.svc-cta .mark,
  section.page-cta:not(.svc-cta)::after{display:none}
}

/* ─── Mobile: shrink the footer (hide nav columns that the menu already covers) ── */
@media(max-width:767px){
  footer{padding:44px 0 28px}
  footer .grid{gap:26px}
  footer .brand img{height:52px}
  footer .grid > div:nth-child(2),
  footer .grid > div:nth-child(3){display:none}
  footer .bottom{margin-top:26px;flex-direction:column;gap:8px;text-align:center;justify-content:center}
}

/* ─── Mobile: "So arbeiten wir" steps ──────────────────────────────────────
   1. The icon is absolutely positioned top-right on desktop; on narrow cards
      the wrapping heading runs underneath it. On mobile we drop it back into
      normal flow (stacked on top) so nothing overlaps.
   2. There is no hover on touch, so the per-icon micro-animations never play.
      We re-trigger them off a `.is-in` class that JS adds when the step
      scrolls into view (mirrors the desktop :hover keyframes). */
@media(max-width:767px){
  .proc-step{padding-top:32px}
  .proc-step .ic{position:static;top:auto;right:auto}
  .proc-step.is-in .ic{background:var(--accent);color:#fff}

  .proc-step.is-in .aico-chat .dot-1{animation:dotBounce .9s ease-in-out 3 .10s}
  .proc-step.is-in .aico-chat .dot-2{animation:dotBounce .9s ease-in-out 3 .25s}
  .proc-step.is-in .aico-chat .dot-3{animation:dotBounce .9s ease-in-out 3 .40s}
  .proc-step.is-in .aico-clipboard .check-1{stroke-dashoffset:0;transition-delay:.15s}
  .proc-step.is-in .aico-clipboard .check-2{stroke-dashoffset:0;transition-delay:.28s}
  .proc-step.is-in .aico-clipboard .check-3{stroke-dashoffset:0;transition-delay:.41s}
  .proc-step.is-in .aico-coins .coin-1{animation:coinDrop .55s cubic-bezier(.34,1.56,.64,1) .10s backwards}
  .proc-step.is-in .aico-coins .coin-2{animation:coinDrop .55s cubic-bezier(.34,1.56,.64,1) .22s backwards}
  .proc-step.is-in .aico-shield .check{stroke-dashoffset:0;transition-delay:.20s}
}