/* ==========================================================================
   Schlüsselheld — main stylesheet (prefix kh-)
   Design system: steel blue #2f5d8c + signal orange #d55e2d, Ruda / Roboto Slab
   ========================================================================== */

:root {
    --white: #ffffff;
    --mist: #a1b6cb;
    --blue: #2f5d8c;
    --text: #5a5a5a;
    --ink: #141414;
    --muted: #777777;
    --orange: #d55e2d;
    --veil: #d8d8d63b;
    --line-w: #ffffff4a;
    --line-w2: #ffffff1f;
    --line: #d8d8d6;
    --paper: #f9f9f9;

    --f-head: "Ruda", sans-serif;
    --f-body: "Roboto Slab", serif;

    --wrap: 1280px;
    --gut: 16px;
    --r: 3px;
    --pill: 9999px;
    --sh-1: 0 5px 10px rgba(0, 0, 0, .15);
    --sh-2: 0 5px 10px rgba(0, 0, 0, .25);
    --sh-3: 0 30px 60px rgba(0, 0, 0, .15);
    --t: .3s ease;

    --g-hero: radial-gradient(at 100% 0%, rgba(47, 93, 140, .45) 30%, #2f5d8c 90%);
    --g-left: radial-gradient(at 0% 0%, rgba(47, 93, 140, .45) 30%, #2f5d8c 100%);
    --g-mid: radial-gradient(at 50% 0%, rgba(47, 93, 140, .45) 30%, #2f5d8c 100%);
    --g-mist: radial-gradient(at 100% 0%, #a1b6cb 20%, #2f5d8c 100%);
    --g-foot: radial-gradient(at 0% 0%, rgba(47, 93, 140, .71) 0%, #2f5d8c 70%);
    --g-paper: linear-gradient(#ffffff 0%, #f9f9f9 100%);
    --g-dark: linear-gradient(135deg, #2f5d8c 0%, #141414 78%);

    --fs-display: 70px;
    --fs-h2: 49px;
    --fs-h3: 28px;
    --fs-lead: 20px;
    --fs-eyebrow: 18px;
    --fs-body: 16px;
    --fs-small: 15px;
    --sec: 106px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    max-width: 1920px;
    min-width: 375px;
    margin: 0 auto;
    background: var(--white);
    color: var(--text);
    font: 400 var(--fs-body)/1.5 var(--f-body);
    overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 600; line-height: 1.1; color: var(--ink); }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dd, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
button, input, select, textarea { font: inherit; color: inherit; }
[id] { scroll-margin-top: 100px; }
main { display: block; }

.kh-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.kh-sec { padding: var(--sec) 0; }

/* ---------- shared type ---------- */
.kh-eyebrow {
    font: 500 var(--fs-eyebrow)/1.2 var(--f-body);
    letter-spacing: .139em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 20px;
}
.kh-eyebrow--light { color: var(--white); }
.kh-eyebrow--orange { color: var(--orange); }
.kh-h2 { font-size: var(--fs-h2); line-height: 1.1; color: var(--ink); }
.kh-h2--light { color: var(--white); }
.kh-bar { display: block; width: 96px; height: 3px; background: var(--orange); margin: 22px auto 0; }
.kh-bar--left { margin-left: 0; }

.kh-head { max-width: 860px; margin-bottom: 48px; }
.kh-head > p:not(.kh-eyebrow) { margin-top: 22px; font-size: var(--fs-body); }
.kh-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.kh-head--light .kh-h2, .kh-head--light > p:not(.kh-eyebrow) { color: var(--white); }
.kh-head--row { max-width: none; display: flex; align-items: flex-end; gap: 30px; }
.kh-head--row > div { flex: 0 1 auto; min-width: 0; }
.kh-head--row .kh-eyebrow { margin-bottom: 14px; }
.kh-head__line { flex: 1 1 auto; height: 1px; background: var(--line); margin-bottom: 20px; }
.kh-head--row .kh-btn { flex: 0 0 auto; }

/* ---------- buttons ---------- */
.kh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 24px;
    border: 1px solid var(--orange); border-radius: var(--r);
    background: var(--orange); color: var(--white);
    font: 500 var(--fs-body)/1 var(--f-body); letter-spacing: .063em;
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), color var(--t);
}
.kh-btn:hover { background: var(--text); border-color: var(--text); color: var(--white); }
.kh-btn img { width: 18px; height: 18px; flex: 0 0 auto; }
.kh-btn--lg { padding: 15px 30px; }
.kh-btn--sm { padding: 12px 24px; font-size: var(--fs-small); }
.kh-btn--ghost { background: transparent; border-color: var(--line-w); }
.kh-btn--ghost:hover { background: transparent; border-color: var(--orange); color: var(--orange); }

.kh-chip {
    display: inline-block; padding: 6px 14px; border-radius: var(--pill);
    background: var(--veil); color: var(--blue);
    font: 500 13px/1.3 var(--f-body); letter-spacing: .067em;
}
.kh-chip--light { background: var(--line-w2); color: var(--white); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.kh-top {
    position: sticky; top: 0; z-index: 900;
    background: var(--blue);
    overflow-x: clip;
    transition: box-shadow var(--t);
}
.kh-top.is-scrolled { box-shadow: var(--sh-2); }
.kh-top__in {
    max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut);
    height: 88px; display: flex; align-items: center; gap: 30px;
}
.kh-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kh-brand img { width: 40px; height: 40px; }
.kh-brand__txt { display: flex; flex-direction: column; }
.kh-brand__txt strong { font: 700 28px/1 var(--f-head); color: var(--white); letter-spacing: -.01em; }
.kh-brand__txt small { margin-top: 4px; font: 500 12px/1.2 var(--f-body); letter-spacing: .06em; color: var(--mist); }
.kh-nav { display: flex; align-items: center; justify-content: center; gap: 28px; flex: 1 1 auto; }
.kh-nav a { font: 500 var(--fs-body)/1 var(--f-body); letter-spacing: .03em; color: var(--white); padding: 8px 0; }
.kh-nav a:hover { color: var(--orange); }
.kh-call { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--white); }
.kh-call__ico {
    width: 44px; height: 44px; border: 2px solid var(--orange); border-radius: 50%;
    position: relative; flex: 0 0 auto;
}
.kh-call__ico img { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.kh-call__txt { display: flex; flex-direction: column; }
.kh-call__txt small { font: 500 15px/1.2 var(--f-body); letter-spacing: .067em; }
.kh-call__txt strong { font: 600 20px/1.2 var(--f-head); }
.kh-call:hover strong { color: var(--orange); }
.kh-burger {
    display: none; width: 44px; height: 44px; margin-left: auto;
    background: transparent; border: 1px solid var(--line-w); border-radius: var(--r);
    cursor: pointer; position: relative;
}
.kh-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--white); }
.kh-burger span:nth-child(1) { top: 14px; }
.kh-burger span:nth-child(2) { top: 21px; }
.kh-burger span:nth-child(3) { top: 28px; }

/* drawer */
.kh-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
    width: min(340px, 88vw);
    display: flex; flex-direction: column;
    background: var(--g-left), var(--blue);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--t), visibility var(--t);
}
.kh-drawer.is-open { transform: none; visibility: visible; }
.kh-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line-w2); }
.kh-drawer__brand { display: flex; align-items: center; gap: 10px; font: 700 22px/1 var(--f-head); color: var(--white); }
.kh-drawer__brand img { width: 32px; height: 32px; }
.kh-drawer__x { width: 40px; height: 40px; background: transparent; border: 1px solid var(--line-w); border-radius: var(--r); cursor: pointer; position: relative; }
.kh-drawer__x img { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); }
.kh-drawer__nav { display: flex; flex-direction: column; padding: 10px 22px; overflow-y: auto; flex: 1 1 auto; }
.kh-drawer__nav a { padding: 13px 0; border-bottom: 1px solid var(--line-w2); font: 600 19px/1.2 var(--f-head); color: var(--white); }
.kh-drawer__nav a:hover { color: var(--orange); }
.kh-drawer__foot { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.kh-drawer__phone { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--orange); color: var(--white); font: 600 19px/1 var(--f-head); }
.kh-drawer__phone img { width: 20px; height: 20px; }
.kh-drawer__mail { text-align: center; padding: 13px; border: 1px solid var(--line-w); border-radius: var(--r); color: var(--white); font: 500 15px/1 var(--f-body); letter-spacing: .063em; }
.kh-shade { position: fixed; inset: 0; z-index: 950; background: rgba(20, 20, 20, .55); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.kh-shade.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.kh-hero { position: relative; padding: 140px 0 170px; background: var(--blue); }
.kh-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.kh-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.kh-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--g-hero); }
.kh-hero__in { position: relative; z-index: 1; }
.kh-hero__txt { max-width: 640px; }
.kh-hero__title {
    font-size: var(--fs-display); line-height: 1; letter-spacing: -.029em;
    color: var(--white);
}
.kh-hero__title span { display: block; color: var(--mist); }
.kh-hero__lead { margin-top: 30px; max-width: 590px; font-size: 17px; line-height: 1.55; color: var(--white); }
.kh-hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 15px; }
.kh-hero__card {
    position: absolute; z-index: 2; right: max(var(--gut), calc((100% - var(--wrap)) / 2)); bottom: -48px;
    width: 600px; display: grid; grid-template-columns: 1fr 1fr;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3);
}
.kh-hero__fact { position: relative; padding: 26px 22px 26px 88px; min-width: 0; }
.kh-hero__fact + .kh-hero__fact { border-left: 1px dashed var(--line); }
.kh-hero__fact img { position: absolute; left: 22px; top: 50%; width: 52px; height: 52px; transform: translateY(-50%); }
.kh-hero__fact-t { font: 600 22px/1.2 var(--f-head); color: var(--ink); margin-bottom: 8px; }
.kh-hero__fact p:not(.kh-hero__fact-t) { font-size: 14px; line-height: 1.6; color: var(--text); }

/* ==========================================================================
   2. EINSATZBEREICHE
   ========================================================================== */
.kh-fields { padding-top: calc(var(--sec) + 48px); }
.kh-fields__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kh-field { position: relative; min-height: 360px; border-radius: var(--r); overflow: hidden; display: flex; align-items: flex-end; }
.kh-field > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kh-field::before { content: ""; position: absolute; inset: 0; background: rgba(47, 93, 140, .72); z-index: 1; transition: background-color var(--t); }
.kh-field:hover > img { transform: scale(1.04); }
.kh-field:hover::before { background: rgba(47, 93, 140, .82); }
.kh-field__body { position: relative; z-index: 2; padding: 34px 34px 36px; }
.kh-field__body h3 { font-size: 37px; color: var(--white); margin-bottom: 14px; }
.kh-field__body p { color: var(--white); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }

/* ==========================================================================
   3. KONTEXT SPLIT
   ========================================================================== */
.kh-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 615px; }
.kh-split__panel {
    background-color: var(--blue);
    background-image:
        linear-gradient(45deg, var(--line-w2) 25%, transparent 25%, transparent 75%, var(--line-w2) 75%),
        linear-gradient(45deg, var(--line-w2) 25%, transparent 25%, transparent 75%, var(--line-w2) 75%),
        var(--g-mist);
    background-size: 14px 14px, 14px 14px, 100% 100%;
    background-position: 0 0, 7px 7px, 0 0;
    display: flex; align-items: center;
}
.kh-split__in { width: 100%; max-width: calc(var(--wrap) / 2 + var(--gut)); margin-left: auto; padding: 90px 80px 90px var(--gut); }
.kh-split__in .kh-h2 { margin-bottom: 26px; }
.kh-split__in p:not(.kh-eyebrow) { color: var(--white); margin-bottom: 18px; }
.kh-split__in .kh-btn { margin-top: 18px; }
.kh-split__media { position: relative; min-height: 420px; }
.kh-split__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.kh-stat {
    position: absolute; left: 20px; bottom: 20px;
    width: 220px; padding: 26px 22px; text-align: center;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1);
}
.kh-stat__num { display: block; font: 600 96px/1 var(--f-head); color: var(--orange); }
.kh-stat__txt { display: block; margin-top: 8px; font: 600 18px/1.25 var(--f-head); color: var(--ink); }

/* ==========================================================================
   4. ÜBER UNS
   ========================================================================== */
.kh-about {
    background-color: var(--paper);
    background-image: radial-gradient(at 0% 0%, rgba(255, 255, 255, .2) 0%, #ffffff 80%);
}
.kh-about__grid { display: grid; grid-template-columns: minmax(0, 492px) minmax(0, 1fr); gap: 110px; align-items: center; }
.kh-about__art { position: relative; aspect-ratio: 492 / 500; }
.kh-about__cut { position: absolute; right: -4%; bottom: -2%; width: 78%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .18)); }
.kh-about__ph {
    position: absolute; width: 58%;
    border: 8px solid var(--white); border-radius: var(--r); box-shadow: var(--sh-2);
    aspect-ratio: 4 / 3; object-fit: cover;
}
.kh-about__ph--a { top: 0; right: 4%; transform: rotate(3deg); }
.kh-about__ph--b { top: 30%; left: 0; transform: rotate(-5deg); }
.kh-about__txt .kh-h2 { margin-bottom: 26px; }
.kh-about__txt > p:not(.kh-eyebrow) { margin-bottom: 16px; }
.kh-about__feats { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0 34px; }
.kh-about__feats li { position: relative; padding: 4px 20px 4px 66px; min-width: 0; }
.kh-about__feats li + li { border-left: 1px solid var(--line); padding-left: 86px; }
.kh-about__feats li + li img { left: 20px; }
.kh-about__feats img { position: absolute; left: 0; top: 50%; width: 50px; height: 50px; transform: translateY(-50%); }
.kh-about__feats h3 { font-size: 22px; margin-bottom: 6px; }
.kh-about__feats p { font-size: 15px; }

/* ==========================================================================
   5. TECHNIK (skills card)
   ========================================================================== */
.kh-skill {
    background-color: var(--paper);
    background-image: repeating-linear-gradient(135deg, var(--white) 0 6px, var(--line) 6px 7px);
    background-size: 100% 100%;
}
.kh-skill__card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center;
    padding: 80px; background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3);
}
.kh-skill__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r); }
.kh-skill__txt .kh-h2 { margin-bottom: 22px; }
.kh-bars { margin: 34px 0 30px; display: grid; gap: 24px; }
.kh-bars__top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 10px; font: 500 15px/1.3 var(--f-body); letter-spacing: .04em; color: var(--ink); }
.kh-bars__top span:last-child { flex: 0 0 auto; color: var(--orange); }
.kh-bars__track { height: 8px; border-radius: var(--pill); background: var(--line); overflow: hidden; }
.kh-bars__fill { display: block; height: 100%; border-radius: var(--pill); background: var(--orange); }
.kh-bars__fill--17 { width: 17%; }
.kh-bars__fill--33 { width: 33%; }
.kh-bars__fill--45 { width: 45%; }
.kh-bars__fill--100 { width: 100%; }
.kh-skill__note { font-size: 15px; line-height: 1.65; }

/* ==========================================================================
   6. VERTRAUEN BAND + COUNTS
   ========================================================================== */
.kh-band { position: relative; padding: 138px 0 0; }
.kh-band__bg { position: absolute; inset: 0 0 90px; overflow: hidden; }
.kh-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
.kh-band__bg::after { content: ""; position: absolute; inset: 0; background: var(--g-left); }
.kh-band__in { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.kh-band__txt { width: 50%; max-width: 580px; margin-right: 60px; }
.kh-band__txt .kh-h2 { margin-bottom: 22px; }
.kh-band__txt p:not(.kh-eyebrow) { color: var(--white); margin-bottom: 34px; }
.kh-counts {
    position: relative; z-index: 2; margin-top: 80px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3);
}
.kh-counts li { padding: 40px 20px 36px; text-align: center; min-width: 0; }
.kh-counts li + li { border-left: 1px dashed var(--line); }
.kh-counts__n { display: block; font: 600 70px/1 var(--f-head); color: var(--orange); }
.kh-counts__l { display: block; margin-top: 10px; font: 600 19px/1.25 var(--f-head); color: var(--ink); }

/* ==========================================================================
   7. LEISTUNGEN
   ========================================================================== */
.kh-svc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: end; margin-bottom: 50px; }
.kh-svc__head .kh-eyebrow { margin-bottom: 16px; }
.kh-svc__head > div:last-child p { margin-bottom: 26px; }
.kh-svc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kh-svc__card {
    padding: 36px 26px 34px; text-align: center; min-width: 0;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1);
    transition: box-shadow var(--t);
}
.kh-svc__card:hover { box-shadow: var(--sh-3); }
.kh-svc__card img { width: 64px; height: 64px; margin: 0 auto 22px; transition: transform var(--t); }
.kh-svc__card:hover img { transform: translateY(-8px); }
.kh-svc__card h3 { font-size: 23px; margin-bottom: 14px; }
.kh-svc__card p { font-size: 15px; line-height: 1.6; }
.kh-svc__card--dark { background: var(--g-dark); }
.kh-svc__card--dark h3, .kh-svc__card--dark p { color: var(--white); }
.kh-svc__toggle {
    display: none; width: 100%; margin-top: 20px; padding: 14px 20px;
    border: 1px solid var(--orange); border-radius: var(--r); background: var(--white);
    color: var(--orange); font: 500 15px/1 var(--f-body); letter-spacing: .063em; cursor: pointer;
}

/* ==========================================================================
   8. WARUM
   ========================================================================== */
.kh-why { position: relative; overflow: hidden; }
.kh-why::before {
    content: ""; position: absolute; left: -60px; bottom: -80px; width: 420px; height: 420px;
    background: url("/assets/icons/logo.svg") no-repeat center / contain;
    opacity: .06; filter: grayscale(1);
}
.kh-why__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.kh-why__head .kh-h2 { margin-bottom: 0; }
.kh-why__head .kh-bar { margin-top: 30px; margin-bottom: 44px; }
.kh-why__body > img { width: 100%; aspect-ratio: 620 / 190; object-fit: cover; border-radius: var(--r); margin-bottom: 26px; }
.kh-why__list { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
.kh-why__list li { position: relative; padding-left: 32px; min-width: 0; }
.kh-why__list img { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; }
.kh-why__t { display: block; font: 500 16px/1.35 var(--f-body); letter-spacing: .04em; color: var(--ink); margin-bottom: 4px; }
.kh-why__list span:not(.kh-why__t) { display: block; font-size: 14px; line-height: 1.55; }

/* ==========================================================================
   9. ERSTE HILFE BAND
   ========================================================================== */
.kh-help { position: relative; padding: 116px 0 0; margin-bottom: var(--sec); }
.kh-help__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 170px; overflow: hidden; }
.kh-help__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 30%; }
.kh-help__bg::after { content: ""; position: absolute; inset: 0; background: var(--g-mid); }
.kh-help__in { position: relative; z-index: 1; }
.kh-help .kh-head { margin-bottom: 64px; }
.kh-help__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kh-help__card {
    padding: 40px 34px; text-align: center; min-width: 0;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1);
}
.kh-help__card img { width: 64px; height: 64px; margin: 0 auto 20px; }
.kh-help__card h3 { font-size: var(--fs-h3); margin-bottom: 14px; }
.kh-help__card p { font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   10. ABLAUF
   ========================================================================== */
.kh-steps { padding-top: 0; }
.kh-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.kh-step {
    position: relative; padding: 34px 30px 30px; min-width: 0;
    background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue);
    border-radius: var(--r); transition: border-color var(--t), box-shadow var(--t);
}
.kh-step:hover { border-top-color: var(--orange); box-shadow: var(--sh-1); }
.kh-step__n { position: absolute; right: 24px; top: 18px; font: 600 56px/1 var(--f-head); color: var(--line); }
.kh-step h3 { font-size: 26px; margin-bottom: 14px; padding-right: 70px; }
.kh-step p { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.kh-step__meta { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--f-body); letter-spacing: .04em; color: var(--orange); }
.kh-step__meta img { width: 18px; height: 18px; }

/* ==========================================================================
   11. ZYLINDER
   ========================================================================== */
.kh-cyl { background: var(--g-paper); }
.kh-cyl__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kh-cyl__card {
    display: flex; flex-direction: column; align-items: flex-start; padding: 34px 28px; min-width: 0;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1);
}
.kh-cyl__card img { width: 60px; height: 60px; margin-bottom: 20px; }
.kh-cyl__card h3 { font-size: 23px; margin-bottom: 12px; }
.kh-cyl__card p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; flex: 1 1 auto; }
.kh-cyl__card--dark { background: var(--g-dark); }
.kh-cyl__card--dark h3, .kh-cyl__card--dark p { color: var(--white); }
.kh-cyl__norms { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.kh-cyl__norms > div { padding: 40px 50px 0 0; min-width: 0; }
.kh-cyl__norms > div + div { padding: 40px 0 0 50px; border-left: 1px solid var(--line); }
.kh-cyl__norms h3 { font-size: var(--fs-h3); margin-bottom: 16px; }

/* ==========================================================================
   12. PREISE
   ========================================================================== */
.kh-price__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.kh-price__table { background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.kh-price__table table { width: 100%; border-collapse: collapse; }
.kh-price__table th {
    padding: 18px 24px; text-align: left; background: var(--blue); color: var(--white);
    font: 500 14px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
}
.kh-price__table th:last-child, .kh-price__table td:last-child { text-align: right; white-space: nowrap; }
.kh-price__table td { padding: 15px 24px; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.kh-price__table tbody tr:nth-child(even) { background: var(--paper); }
.kh-price__table tbody tr:last-child td { border-bottom: 0; }
.kh-price__table td:first-child { color: var(--ink); }
.kh-price__table td:nth-child(2) { color: var(--muted); white-space: nowrap; }
.kh-price__table td:last-child { font: 600 17px/1.4 var(--f-head); color: var(--orange); }
.kh-price__side { position: sticky; top: 110px; padding: 36px 32px; border-radius: var(--r); background: var(--g-left), var(--blue); color: var(--white); }
.kh-price__side h3 { font-size: 24px; color: var(--white); margin-bottom: 18px; }
.kh-price__side h3 + .kh-price__sur { margin-bottom: 16px; }
.kh-price__side p { font-size: 14px; line-height: 1.6; margin-bottom: 30px; color: var(--white); }
.kh-price__sur li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-w2); font-size: 15px; }
.kh-price__sur li:last-child { border-bottom: 0; }
.kh-price__val { flex: 0 0 auto; font: 600 18px/1.3 var(--f-head); color: var(--white); }

.kh-price__note { margin-top: 30px; padding: 36px 40px 38px; background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1); border-left: 3px solid var(--orange); }
.kh-price__note-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.kh-price__note-head img { width: 52px; height: 52px; flex: 0 0 auto; }
.kh-price__note-head h3 { font-size: var(--fs-h3); }
.kh-price__note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.kh-price__note-grid > div { padding: 0 30px; min-width: 0; }
.kh-price__note-grid > div:first-child { padding-left: 0; }
.kh-price__note-grid > div:last-child { padding-right: 0; }
.kh-price__note-grid > div + div { border-left: 1px dashed var(--line); }
.kh-price__note-grid h4 { font-size: 20px; margin-bottom: 10px; }
.kh-price__note-grid p { font-size: 15px; line-height: 1.65; }

/* ==========================================================================
   13. KOSTENFAKTOREN
   ========================================================================== */
.kh-cost { padding-top: 0; }
.kh-cost__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 80px; align-items: start; }
.kh-cost__head { position: sticky; top: 120px; }
.kh-cost__head .kh-bar { margin-top: 26px; margin-bottom: 26px; }
.kh-cost__list li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.kh-cost__list li:first-child { padding-top: 0; }
.kh-cost__n {
    width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--orange);
    display: flex; align-items: center; justify-content: center;
    font: 600 26px/1 var(--f-head); color: var(--orange);
}
.kh-cost__list h3 { font-size: 24px; margin-bottom: 10px; }
.kh-cost__list p { font-size: 15px; line-height: 1.65; }

/* ==========================================================================
   14. RECHNER
   ========================================================================== */
.kh-calc { padding: var(--sec) 0; background: var(--g-mid), var(--blue); }
.kh-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; align-items: center; }
.kh-calc__txt .kh-h2 { margin-bottom: 22px; }
.kh-calc__txt p:not(.kh-eyebrow) { color: var(--white); }
.kh-calc__card { padding: 40px; background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3); }
.kh-calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kh-calc__field { margin-bottom: 18px; min-width: 0; }
.kh-calc__field label { display: block; margin-bottom: 8px; font: 500 14px/1.3 var(--f-body); letter-spacing: .067em; color: var(--ink); }
.kh-calc__field select, .kh-calc__field input {
    width: 100%; min-width: 0; height: 48px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
    font-size: 15px; color: var(--ink);
}
.kh-calc__field select:focus, .kh-calc__field input:focus { outline: none; border-color: var(--blue); }
.kh-calc__field input:disabled { background: var(--paper); color: var(--muted); }
.kh-calc__out { margin: 8px 0 22px; padding: 22px 24px; border-radius: var(--r); background: var(--veil); border-left: 3px solid var(--orange); }
.kh-calc__out span { display: block; font: 500 14px/1.3 var(--f-body); letter-spacing: .067em; color: var(--muted); }
.kh-calc__out output { display: block; margin: 6px 0 8px; font: 600 42px/1.1 var(--f-head); color: var(--orange); }
.kh-calc__out small { display: block; font-size: 13px; line-height: 1.5; color: var(--text); }
.kh-calc__cta { width: 100%; }

/* ==========================================================================
   15. VORHER / NACHHER
   ========================================================================== */
.kh-ba__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kh-ba__card { background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; min-width: 0; }
.kh-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--white); }
.kh-ba__pair figure { position: relative; }
.kh-ba__pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kh-ba__pair figcaption {
    position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: var(--r);
    background: var(--ink); color: var(--white); font: 500 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
}
.kh-ba__pair figure + figure figcaption { background: var(--orange); }
.kh-ba__body { padding: 26px 26px 30px; }
.kh-ba__body h3 { font-size: 22px; margin-bottom: 12px; }
.kh-ba__body p { font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   16. EINSÄTZE
   ========================================================================== */
.kh-cases { background: var(--g-paper); }
.kh-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kh-case {
    display: flex; flex-direction: column; padding: 34px 32px 30px; min-width: 0;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1);
    border-bottom: 3px solid var(--blue);
}
.kh-case__meta { font-size: 15px; color: var(--orange); margin-bottom: 12px; }
.kh-case h3 { font-size: 23px; margin-bottom: 14px; }
.kh-case > p:not(.kh-case__meta) { font-size: 15px; line-height: 1.65; margin-bottom: 22px; flex: 1 1 auto; }
.kh-case__facts { display: grid; gap: 8px; padding-top: 18px; border-top: 1px dashed var(--line); }
.kh-case__facts div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.kh-case__facts dt { color: var(--muted); }
.kh-case__facts dd { font-weight: 700; color: var(--ink); text-align: right; }

/* ==========================================================================
   17. OBJEKT
   ========================================================================== */
.kh-obj__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kh-obj__card {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 24px; padding: 36px 34px;
    background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--orange);
    border-radius: var(--r); transition: box-shadow var(--t);
}
.kh-obj__card:hover { box-shadow: var(--sh-1); }
.kh-obj__ico { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--veil); }
.kh-obj__ico img { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.kh-obj__card h3 { font-size: 24px; margin-bottom: 12px; }
.kh-obj__card p { font-size: 15px; line-height: 1.65; }

/* ==========================================================================
   18. FEHLER
   ========================================================================== */
.kh-err { background: var(--g-left), var(--blue); }
.kh-err__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kh-err__card { padding: 34px 30px; border: 1px solid var(--line-w); border-radius: var(--r); min-width: 0; transition: background-color var(--t); }
.kh-err__card:hover { background: var(--line-w2); }
.kh-err__n { display: block; font: 600 44px/1 var(--f-head); color: var(--orange); margin-bottom: 18px; }
.kh-err__card h3 { font-size: 23px; color: var(--white); margin-bottom: 12px; }
.kh-err__card p { font-size: 15px; line-height: 1.65; color: var(--white); }

/* ==========================================================================
   19. RATGEBER
   ========================================================================== */
.kh-guide__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: start; }
.kh-guide__main .kh-h2 { margin-bottom: 22px; }
.kh-check { margin-top: 30px; display: grid; gap: 14px; }
.kh-check li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.kh-check img { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; }
.kh-check--two { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.kh-guide__warn { padding: 40px 36px; background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3); border-top: 3px solid var(--orange); }
.kh-guide__warn > img { width: 56px; height: 56px; margin-bottom: 18px; }
.kh-guide__warn h3 { font-size: var(--fs-h3); margin-bottom: 20px; }
.kh-guide__warn ul { display: grid; gap: 14px; margin-bottom: 24px; }
.kh-guide__warn li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.55; }
.kh-guide__warn li img { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; }
.kh-guide__warn > p { padding-top: 20px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.65; }

/* ==========================================================================
   20. GEWÄHRLEISTUNG
   ========================================================================== */
.kh-warr { background: var(--g-paper); }
.kh-warr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: center; }
.kh-warr__txt .kh-h2 { margin-bottom: 22px; }
.kh-warr__card { padding: 42px 38px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); position: relative; }
.kh-warr__card::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--line); border-radius: var(--r); pointer-events: none; }
.kh-warr__card > img { width: 64px; height: 64px; margin-bottom: 16px; }
.kh-warr__card h3 { font-size: var(--fs-h3); margin-bottom: 20px; }
.kh-warr__card dl { display: grid; gap: 0; margin-bottom: 20px; }
.kh-warr__card dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kh-warr__card dt { color: var(--muted); }
.kh-warr__card dd { color: var(--ink); font-weight: 500; }
.kh-warr__card > p { font-size: 14px; line-height: 1.6; }

/* ==========================================================================
   21. EINSATZGEBIET
   ========================================================================== */
.kh-geo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.kh-geo__txt .kh-bar { margin: 26px 0 28px; }
.kh-geo__txt > p:not(.kh-eyebrow) { margin-bottom: 16px; }
.kh-geo__chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.kh-geo__chips li {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
    border: 1px solid var(--line); border-radius: var(--pill); background: var(--white);
    font: 500 14px/1 var(--f-body); letter-spacing: .03em; color: var(--ink);
}
.kh-geo__chips img { width: 14px; height: 14px; }
.kh-geo__acc { display: grid; gap: 12px; }
.kh-geo__grp { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.kh-geo__grp summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px; list-style: none; cursor: pointer;
    font: 600 20px/1.2 var(--f-head); color: var(--ink);
}
.kh-geo__grp summary::-webkit-details-marker { display: none; }
.kh-geo__grp summary img { width: 18px; height: 18px; transition: transform var(--t); }
.kh-geo__grp[open] summary img { transform: rotate(180deg); }
.kh-geo__grp p { padding: 0 22px 20px; font-size: 15px; line-height: 1.7; }
.kh-geo__acc.is-locked summary { cursor: default; }
.kh-geo__acc.is-locked summary img { display: none; }

/* ==========================================================================
   22. TEAM
   ========================================================================== */
.kh-team { background: var(--g-paper); }
.kh-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kh-member { background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; border-bottom: 3px solid var(--blue); min-width: 0; transition: border-color var(--t); }
.kh-member:hover { border-bottom-color: var(--orange); }
.kh-member img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.kh-member__body { padding: 24px 24px 28px; }
.kh-member__body h3 { font-size: 23px; margin-bottom: 6px; }
.kh-member__role { font: 500 14px/1.4 var(--f-body); letter-spacing: .05em; color: var(--orange); margin-bottom: 12px; }
.kh-member__body p:last-child { font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   23. BEWERTUNGEN
   ========================================================================== */
.kh-rev__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.kh-rev__media { position: relative; padding-right: 110px; }
.kh-rev__media > img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; border-radius: var(--r); }
.kh-rev__box {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 420px; padding: 56px 40px 30px;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3);
    text-align: center;
}
.kh-rev__quote { position: absolute; left: -20px; top: -46px; width: 84px; height: 84px; }
.kh-rev__track { display: grid; }
.kh-rev__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; }
.kh-rev__slide.is-active, .kh-rev__track:not(.is-ready) .kh-rev__slide:first-child { opacity: 1; visibility: visible; }
.kh-rev__stars { display: block; color: var(--orange); font-size: 18px; letter-spacing: .15em; margin-bottom: 14px; }
.kh-rev__slide blockquote { font: italic 400 18px/1.6 var(--f-body); color: var(--text); margin-bottom: 24px; }
.kh-rev__slide figcaption { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.kh-rev__ava {
    width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue); color: var(--white); font: 600 22px/1 var(--f-head);
}
.kh-rev__who { display: flex; flex-direction: column; min-width: 0; }
.kh-rev__who strong { font: 500 15px/1.4 var(--f-body); letter-spacing: .067em; color: var(--ink); }
.kh-rev__who em { font-style: normal; font-size: 14px; color: var(--blue); }
.kh-rev__dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.kh-rev__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background-color var(--t); }
.kh-rev__dots button.is-active { background: var(--orange); }
.kh-rev__txt .kh-h2 { margin-bottom: 22px; }
.kh-rev__txt > p:not(.kh-eyebrow) { margin-bottom: 34px; }

/* ==========================================================================
   24. BLOG
   ========================================================================== */
.kh-blog { background: var(--g-paper); }
.kh-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kh-post {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden;
    border-bottom: 3px solid var(--blue); transition: box-shadow var(--t);
}
.kh-post:hover { box-shadow: var(--sh-3); }
.kh-post__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kh-post__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 30px 30px; }
.kh-post__tag { font-size: 14px; color: var(--orange); margin-bottom: 10px; }
.kh-post h3 { font-size: 23px; line-height: 1.2; margin-bottom: 14px; transition: color var(--t); }
.kh-post:hover h3 { color: var(--orange); }
.kh-post p { font-size: 15px; line-height: 1.65; margin-bottom: 22px; flex: 1 1 auto; }
.kh-post__more { font: 700 16px/1 var(--f-body); color: var(--ink); }

/* ==========================================================================
   25. FAQ
   ========================================================================== */
.kh-faq__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 80px; align-items: start; }
.kh-faq__head { position: sticky; top: 120px; }
.kh-faq__head .kh-bar { margin: 26px 0; }
.kh-faq__ask { margin-top: 34px; display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--r); background: var(--g-left), var(--blue); }
.kh-faq__ask > img { width: 28px; height: 28px; flex: 0 0 auto; }
.kh-faq__ask span { display: block; font-size: 14px; color: var(--white); }
.kh-faq__ask a { font: 600 22px/1.2 var(--f-head); color: var(--white); }
.kh-faq__ask a:hover { color: var(--orange); }
.kh-faq__list { display: grid; gap: 12px; }
.kh-faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow var(--t); }
.kh-faq__item[open] { box-shadow: var(--sh-1); border-color: var(--white); }
.kh-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 24px; list-style: none; cursor: pointer;
    font: 600 20px/1.3 var(--f-head); color: var(--ink);
}
.kh-faq__item summary::-webkit-details-marker { display: none; }
.kh-faq__item summary img { width: 20px; height: 20px; flex: 0 0 auto; transition: transform var(--t); }
.kh-faq__item[open] summary { color: var(--blue); }
.kh-faq__item[open] summary img { transform: rotate(45deg); }
.kh-faq__item p { padding: 0 24px 22px; font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   26. KONTAKT
   ========================================================================== */
.kh-contact { background: var(--g-left), var(--blue); }
.kh-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 80px; align-items: start; }
.kh-contact__info .kh-h2 { margin-bottom: 22px; }
.kh-contact__info > p:not(.kh-eyebrow) { color: var(--white); }
.kh-contact__list { margin: 30px 0; display: grid; gap: 16px; }
.kh-contact__list li { display: flex; align-items: flex-start; gap: 14px; color: var(--white); font-size: 16px; min-width: 0; }
.kh-contact__list img { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.kh-contact__list a, .kh-contact__list span { overflow-wrap: anywhere; }
.kh-contact__list a:hover { color: var(--orange); }
.kh-contact__note { padding: 18px 20px; border: 1px solid var(--line-w); border-radius: var(--r); font-size: 14px; line-height: 1.6; }
.kh-contact__panel { padding: 40px; background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3); }
.kh-form__title { font-size: var(--fs-h3); margin-bottom: 22px; }
.kh-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kh-form__field { margin-bottom: 14px; min-width: 0; }
.kh-form__input, .kh-form__textarea {
    width: 100%; min-width: 0; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
    font-size: 15px; color: var(--ink);
}
.kh-form__textarea { resize: vertical; min-height: 120px; }
.kh-form__input:focus, .kh-form__textarea:focus { outline: none; border-color: var(--blue); }
.kh-form__input::placeholder, .kh-form__textarea::placeholder { color: var(--muted); }
.kh-form__error { margin-top: 6px; font-size: 13px; color: var(--orange); }
.kh-form__submit {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px; border: 0; border-radius: var(--r); background: var(--orange); color: var(--white);
    font: 500 16px/1 var(--f-body); letter-spacing: .063em; cursor: pointer; transition: background-color var(--t);
}
.kh-form__submit:hover { background: var(--text); }
.kh-form__submit img { width: 18px; height: 18px; }
.kh-form__success { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--veil); color: var(--blue); font-size: 15px; }

/* ==========================================================================
   27. SEO
   ========================================================================== */
.kh-seo__h2 { max-width: 900px; margin-bottom: 40px; }
.kh-seo__cols { column-count: 2; column-gap: 64px; }
.kh-seo__cols h3 { font-size: 24px; margin: 0 0 12px; break-after: avoid; }
.kh-seo__cols p { font-size: 15px; line-height: 1.75; margin-bottom: 26px; }
.kh-seo__cols a { color: var(--orange); font-weight: 500; }
.kh-seo__cols a:hover { color: var(--blue); }

/* ==========================================================================
   28. CTA
   ========================================================================== */
.kh-cta { position: relative; padding: 84px 0 83px; }
.kh-cta__bg { position: absolute; inset: 0; overflow: hidden; }
.kh-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.kh-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #2f5d8c 0%, #2f5d8c 38%, rgba(47, 93, 140, .45) 100%); }
.kh-cta__in { position: relative; z-index: 1; }
.kh-cta__in .kh-h2 { max-width: 610px; margin-bottom: 26px; }
.kh-cta__phone { display: inline-flex; align-items: center; gap: 22px; color: var(--white); font: 600 37px/1.1 var(--f-head); }
.kh-cta__phone:hover { color: var(--orange); }
.kh-cta__ico { position: relative; width: 60px; height: 60px; flex: 0 0 auto; border: 2px solid var(--orange); border-radius: 50%; }
.kh-cta__ico img { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kh-foot {
    position: relative; color: var(--white);
    border-top: 5px solid var(--orange);
    background-color: var(--blue);
    background-image:
        repeating-linear-gradient(135deg, var(--line-w2) 0 2px, transparent 2px 22px),
        var(--g-foot);
    padding: 100px 0 0;
}
.kh-foot__in { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.kh-foot__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 50px; }
.kh-foot__brand { padding: 40px 40px 36px; border: 1px solid var(--line-w); border-radius: var(--r); box-shadow: var(--sh-2); background: var(--blue); min-width: 0; }
.kh-foot__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.kh-foot__logo img { width: 42px; height: 42px; }
.kh-foot__logo strong { font: 700 30px/1 var(--f-head); color: var(--white); }
.kh-foot__brand p { font-size: 16px; line-height: 1.65; color: var(--white); }
.kh-foot__slogan { margin-top: 18px; font: 500 14px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.kh-foot__col { min-width: 0; padding-top: 40px; }
.kh-foot__col h4 { font-size: 28px; color: var(--white); margin-bottom: 26px; }
.kh-foot__links { display: grid; gap: 14px; }
.kh-foot__links a, .kh-foot__links span { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--white); overflow-wrap: anywhere; min-width: 0; }
.kh-foot__links a:hover { color: var(--orange); }
.kh-foot__links img { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 0; }
.kh-foot__regions { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line-w2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.kh-foot__regions-label { font: 500 14px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin-right: 6px; }
.kh-foot__region { padding: 7px 14px; border: 1px solid var(--line-w); border-radius: var(--pill); font-size: 14px; color: var(--white); }
.kh-foot__region:hover { border-color: var(--orange); color: var(--orange); }
.kh-foot__bottom { margin-top: 40px; padding: 30px 0 34px; border-top: 1px solid var(--line-w2); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.kh-foot__copy { font-size: 14px; color: var(--white); }
.kh-foot__legal { display: flex; align-items: center; gap: 18px; }
.kh-foot__legal a { font-size: 14px; color: var(--white); }
.kh-foot__legal a + a { padding-left: 18px; border-left: 1px solid var(--line-w); }
.kh-foot__legal a:hover { color: var(--orange); }

/* fixed call button */
.kh-fab { position: fixed; right: 24px; bottom: 24px; z-index: 9999; }
.kh-fab__btn {
    position: relative; display: block; width: 65px; height: 65px; border-radius: 50%;
    background: var(--orange); box-shadow: var(--sh-2);
    animation: kh-pulse 2s infinite;
}
.kh-fab__btn img { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }
@keyframes kh-pulse {
    0% { box-shadow: 0 0 0 0 rgba(213, 94, 45, .55); }
    70% { box-shadow: 0 0 0 18px rgba(213, 94, 45, 0); }
    100% { box-shadow: 0 0 0 0 rgba(213, 94, 45, 0); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    :root { --fs-display: 60px; --fs-h2: 43px; --fs-h3: 26px; --sec: 90px; }
    .kh-nav { gap: 20px; }
    .kh-nav a { font-size: 15px; }
    .kh-call__txt small { display: none; }
    .kh-top__in { gap: 22px; }
    .kh-hero__card { width: 560px; }
    .kh-split__in { padding: 80px 50px 80px var(--gut); }
    .kh-about__grid { gap: 70px; }
    .kh-skill__card { padding: 60px; gap: 56px; }
    .kh-svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kh-cyl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-price__grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .kh-cost__grid, .kh-faq__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; }
    .kh-calc__grid, .kh-contact__grid, .kh-warr__grid { gap: 56px; }
    .kh-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-rev__media { padding-right: 80px; }
    .kh-rev__box { width: 380px; padding: 50px 32px 26px; }
    .kh-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
    .kh-foot__brand { grid-column: 1 / -1; }
    .kh-foot__col { padding-top: 0; }
}

@media (max-width: 1024px) {
    :root { --fs-display: 48px; --fs-h2: 36px; --fs-h3: 23px; --fs-lead: 18px; --fs-eyebrow: 16px; --fs-body: 15px; --fs-small: 14px; --sec: 70px; }
    .kh-nav, .kh-call { display: none; }
    .kh-burger { display: block; }
    .kh-top__in { height: 74px; }
    [id] { scroll-margin-top: 86px; }

    .kh-hero { padding: 85px 0 55px; }
    .kh-hero__txt { max-width: 620px; }
    .kh-hero__card { position: relative; right: auto; bottom: auto; width: 100%; max-width: 680px; margin-top: 50px; }
    .kh-fields { padding-top: var(--sec); }
    .kh-fields__grid { grid-template-columns: 1fr 1fr; }
    .kh-fields__grid .kh-field:last-child { grid-column: 1 / -1; min-height: 320px; }
    .kh-field { min-height: 320px; }
    .kh-field__body h3 { font-size: 30px; }

    .kh-split { grid-template-columns: 1fr; }
    .kh-split__in { max-width: none; padding: 70px var(--gut); }
    .kh-split__media { min-height: 520px; }

    .kh-about__grid { grid-template-columns: 1fr; gap: 60px; }
    .kh-about__art { max-width: 520px; width: 100%; margin: 0 auto; }

    .kh-skill__card { grid-template-columns: 1fr; padding: 40px; gap: 40px; }

    .kh-band { padding-top: 85px; }
    .kh-band__txt { width: 100%; max-width: 620px; margin-right: 0; }
    .kh-band__in { justify-content: flex-start; }
    .kh-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 60px; }
    .kh-counts li:nth-child(3) { border-left: 0; }
    .kh-counts li:nth-child(n+3) { border-top: 1px dashed var(--line); }
    .kh-counts__n { font-size: 56px; }

    .kh-svc__head, .kh-why__grid { grid-template-columns: 1fr; gap: 26px; }
    .kh-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-why__head .kh-bar { margin-bottom: 30px; }

    .kh-help { padding-top: 65px; margin-bottom: 70px; }
    .kh-help__cards { grid-template-columns: 1fr 1fr; }
    .kh-help__cards .kh-help__card:last-child { grid-column: 1 / -1; }
    .kh-help__bg { bottom: 45%; }

    .kh-steps__list { grid-template-columns: 1fr 1fr; }
    .kh-cyl__norms { grid-template-columns: 1fr; }
    .kh-cyl__norms > div { padding: 32px 0 0; }
    .kh-cyl__norms > div + div { padding: 32px 0 0; border-left: 0; }

    .kh-price__grid { grid-template-columns: 1fr; }
    .kh-price__side { position: static; }
    .kh-price__note-grid { grid-template-columns: 1fr; }
    .kh-price__note-grid > div, .kh-price__note-grid > div:first-child, .kh-price__note-grid > div:last-child { padding: 18px 0; }
    .kh-price__note-grid > div:first-child { padding-top: 0; }
    .kh-price__note-grid > div:last-child { padding-bottom: 0; }
    .kh-price__note-grid > div + div { border-left: 0; border-top: 1px dashed var(--line); }
    .kh-cost__grid, .kh-faq__grid, .kh-guide__grid, .kh-warr__grid, .kh-geo__grid, .kh-calc__grid, .kh-contact__grid, .kh-rev__grid { grid-template-columns: 1fr; gap: 44px; }
    .kh-cost__head, .kh-faq__head { position: static; }
    .kh-calc__card { max-width: 640px; }

    .kh-ba__grid, .kh-cases__grid, .kh-blog__grid { grid-template-columns: 1fr 1fr; }
    .kh-ba__grid .kh-ba__card:last-child, .kh-cases__grid .kh-case:last-child { grid-column: 1 / -1; }
    .kh-obj__grid { grid-template-columns: 1fr; }
    .kh-err__grid { grid-template-columns: 1fr 1fr; }

    .kh-rev__media { padding-right: 0; }
    .kh-rev__box { position: relative; top: auto; right: auto; transform: none; width: min(520px, calc(100% - 40px)); margin: -110px auto 0; }

    .kh-seo__cols { column-count: 1; }
    .kh-cta__phone { font-size: 30px; }

    .kh-foot { padding-top: 70px; }
    .kh-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 30px; }
    .kh-foot__col h4 { font-size: 24px; margin-bottom: 18px; }
    .kh-foot__grid > .kh-foot__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    :root { --sec: 58px; }
    .kh-head { margin-bottom: 36px; }
    .kh-head--row { flex-wrap: wrap; align-items: flex-start; gap: 18px; }
    .kh-head__line { display: none; }
    .kh-hero__card { grid-template-columns: 1fr; }
    .kh-hero__fact + .kh-hero__fact { border-left: 0; border-top: 1px dashed var(--line); }
    .kh-fields__grid { grid-template-columns: 1fr; }
    .kh-fields__grid .kh-field:last-child { grid-column: auto; }
    .kh-field, .kh-fields__grid .kh-field:last-child { min-height: 300px; }
    .kh-split__media { min-height: 440px; }

    .kh-about__feats { grid-template-columns: 1fr; gap: 22px; }
    .kh-about__feats li + li { border-left: 0; padding-left: 66px; }
    .kh-about__feats li + li img { left: 0; }

    .kh-svc__grid { grid-template-columns: 1fr; }
    .kh-svc__grid:not(.is-open) .kh-svc__card:nth-child(n+9) { display: none; }
    .kh-svc__toggle { display: block; }
    .kh-svc__card { text-align: left; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 18px; padding: 26px 22px; }
    .kh-svc__card img { width: 52px; height: 52px; margin: 0; grid-row: 1 / span 2; }
    .kh-svc__card h3 { font-size: 21px; margin-bottom: 4px; }
    .kh-svc__card:hover img { transform: none; }

    .kh-why__list { grid-template-columns: 1fr; }
    .kh-help__cards { grid-template-columns: 1fr; }
    .kh-help__cards .kh-help__card:last-child { grid-column: auto; }
    .kh-help__bg { bottom: 62%; }
    .kh-steps__list { grid-template-columns: 1fr; }
    .kh-cyl__grid { grid-template-columns: 1fr; }

    .kh-price__table thead { display: none; }
    .kh-price__table table, .kh-price__table tbody { display: block; }
    .kh-price__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
    .kh-price__table tbody tr:last-child { border-bottom: 0; }
    .kh-price__table td { padding: 0; border: 0; }
    .kh-price__table td:first-child { grid-column: 1 / -1; font-weight: 500; }
    .kh-price__table td:nth-child(2) { font-size: 14px; }

    .kh-ba__grid, .kh-cases__grid, .kh-err__grid, .kh-blog__grid { grid-template-columns: 1fr; }
    .kh-ba__grid .kh-ba__card:last-child, .kh-cases__grid .kh-case:last-child { grid-column: auto; }
    .kh-check--two { grid-template-columns: 1fr; }
    .kh-team__grid { gap: 14px; }
    .kh-geo__acc:not(.is-locked) summary { cursor: pointer; }
    .kh-calc__row, .kh-form__row { grid-template-columns: 1fr; gap: 0; }
    .kh-calc__card, .kh-contact__panel { padding: 30px 24px; }
}

@media (max-width: 480px) {
    :root { --fs-display: 38px; --fs-h2: 28px; --fs-h3: 20px; --fs-lead: 16px; --fs-eyebrow: 15px; --fs-body: 14px; --fs-small: 13px; --sec: 44px; --gut: 14px; }
    .kh-brand__txt strong { font-size: 23px; }
    .kh-brand__txt small { font-size: 11px; }
    .kh-brand img { width: 34px; height: 34px; }
    .kh-top__in { height: 66px; }

    .kh-hero { padding: 60px 0 40px; }
    .kh-hero__lead { font-size: 15px; margin-top: 22px; }
    .kh-hero__cta { margin-top: 28px; }
    .kh-hero__cta .kh-btn { width: 100%; }
    .kh-hero__card { margin-top: 34px; }
    .kh-hero__fact { padding: 20px 18px 20px 76px; }
    .kh-hero__fact img { left: 18px; width: 42px; height: 42px; }
    .kh-hero__fact-t { font-size: 19px; }
    .kh-bar { margin-top: 16px; }

    .kh-field, .kh-fields__grid .kh-field:last-child { min-height: 280px; }
    .kh-field__body { padding: 26px 22px 28px; }
    .kh-field__body h3 { font-size: 26px; }
    .kh-split__in { padding: 50px var(--gut); }
    .kh-split__media { min-height: 380px; }
    .kh-stat { width: 180px; padding: 18px 16px; left: 14px; bottom: 14px; }
    .kh-stat__num { font-size: 70px; }
    .kh-stat__txt { font-size: 15px; }

    .kh-about__ph { border-width: 5px; }
    .kh-skill__card { padding: 26px 20px; gap: 30px; }
    .kh-bars__top { font-size: 13px; }

    .kh-band { padding-top: 60px; }
    .kh-counts li { padding: 26px 12px 22px; }
    .kh-counts__n { font-size: 42px; }
    .kh-counts__l { font-size: 15px; }

    .kh-help { padding-top: 50px; margin-bottom: 50px; }
    .kh-help__card { padding: 30px 22px; }
    .kh-step { padding: 28px 22px 24px; }
    .kh-step h3 { font-size: 22px; }
    .kh-step__n { font-size: 44px; }
    .kh-cyl__card, .kh-case, .kh-err__card { padding: 28px 22px; }
    .kh-price__side { padding: 28px 22px; }
    .kh-price__note { padding: 28px 22px 30px; }
    .kh-price__note-head img { width: 42px; height: 42px; }
    .kh-price__note-grid h4 { font-size: 18px; }
    .kh-cost__list li { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
    .kh-cost__n { width: 46px; height: 46px; font-size: 20px; }
    .kh-cost__list h3 { font-size: 20px; }
    .kh-calc__out output { font-size: 32px; }
    .kh-ba__body { padding: 22px 20px 24px; }
    .kh-obj__card { grid-template-columns: 1fr; padding: 28px 22px; gap: 16px; }
    .kh-guide__warn { padding: 30px 22px; }
    .kh-warr__card { padding: 32px 22px; }
    .kh-warr__card dl div { grid-template-columns: 90px minmax(0, 1fr); }
    .kh-team__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .kh-member__body { padding: 16px 14px 20px; }
    .kh-member__body h3 { font-size: 18px; }
    .kh-member__role { font-size: 12px; }
    .kh-member__body p:last-child { font-size: 13px; }
    .kh-rev__box { width: calc(100% - 24px); margin-top: -70px; padding: 44px 22px 22px; }
    .kh-rev__quote { width: 64px; height: 64px; top: -34px; left: -6px; }
    .kh-rev__slide blockquote { font-size: 15px; }
    .kh-faq__item summary { font-size: 17px; padding: 18px 18px; }
    .kh-faq__item p { padding: 0 18px 18px; }
    .kh-geo__grp summary { font-size: 18px; padding: 16px 18px; }
    .kh-geo__grp p { padding: 0 18px 18px; }
    .kh-cta { padding: 50px 0; }
    .kh-cta__phone { font-size: 24px; gap: 14px; }
    .kh-cta__ico { width: 48px; height: 48px; }
    .kh-cta__ico img { width: 24px; height: 24px; }

    .kh-foot { padding-top: 50px; }
    .kh-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
    .kh-foot__grid > .kh-foot__brand, .kh-foot__grid > .kh-foot__col--contact { grid-column: 1 / -1; }
    .kh-foot__brand { padding: 28px 22px; }
    .kh-foot__links a, .kh-foot__links span { font-size: 14px; gap: 8px; }
    .kh-foot__links img { width: 18px; height: 18px; }
    .kh-foot__col h4 { font-size: 21px; }
    .kh-fab { right: 16px; bottom: 16px; }
    .kh-fab__btn { width: 55px; height: 55px; }
    .kh-fab__btn img { width: 24px; height: 24px; }
}

@media (max-width: 375px) {
    :root { --fs-display: 34px; --fs-h2: 26px; --gut: 12px; }
    .kh-brand__txt small { display: none; }
    .kh-hero__fact { padding-left: 66px; }
    .kh-hero__fact img { width: 36px; height: 36px; }
    .kh-counts__n { font-size: 36px; }
    .kh-stat { width: 160px; }
    .kh-team__grid { grid-template-columns: 1fr 1fr; }
}