/* ==========================================================================
   webdesigncottbus.de – Startseite (Stand Oktober 2026)
   Hell, kräftige Typografie, scroll-gesteuerte Animationen.
   Alle Effekte mit Fallback: ohne JS / bei reduzierter Bewegung statisch.
   ========================================================================== */

.home {
    --ink: #121418;
    --ink-2: #2b2f37;
    --muted: #5a6270;
    --line: #e2e5ea;
    --bg: #ffffff;
    --bg-2: #f3f4f6;
    --acc: #e8501e;
    --acc-2: #e2335a;
    --acc-text: #c2410c;
    --grad: linear-gradient(100deg, #f26522 0%, #e8501e 38%, #e2335a 100%);
    --hh: 78px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --display: 'Archivo', 'Arial Narrow', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.home main { overflow-x: clip; }

/* ---------- Grundbausteine ---------- */
.h-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.h-kicker {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted);
}
.h-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(232, 80, 30, .14); }
.h-display {
    font-family: var(--display); font-weight: 800; font-stretch: 72%;
    line-height: .94; letter-spacing: -.012em; color: var(--ink);
}
.h-display em, .h-grad {
    font-style: normal;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h-h2 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.4rem); }
.h-lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem); line-height: 1.6; color: var(--muted); max-width: 52ch; }
.h-section { padding: clamp(5rem, 11vw, 9rem) 0; position: relative; }
.h-section--grey { background: var(--bg-2); }
.h-head { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.h-head .h-lead { margin-top: 1.4rem; }
@media (max-width: 860px) { .h-head { grid-template-columns: 1fr; } }

/* Buttons */
.hbtn {
    position: relative; display: inline-flex; align-items: center; gap: .65rem;
    padding: 1.05rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1;
    background: var(--ink); color: #fff; border: 2px solid var(--ink);
    transition: transform .5s var(--ease), box-shadow .4s ease, background .3s ease, border-color .3s ease, color .3s;
    will-change: transform; isolation: isolate; overflow: hidden;
}
.hbtn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad);
    transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit;
}
.hbtn:hover { color: #fff; border-color: transparent; box-shadow: 0 18px 40px -16px rgba(226, 51, 90, .55); }
.hbtn:hover::before { transform: none; }
.hbtn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.hbtn:hover svg { transform: translateX(4px); }
.hbtn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.hbtn--ghost::before { background: var(--ink); }
.hbtn--ghost:hover { color: #fff; box-shadow: none; }

/* Browser- und Handy-Rahmen */
.win {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(18, 20, 24, .08), 0 30px 60px -24px rgba(18, 20, 24, .35), 0 12px 24px -12px rgba(18, 20, 24, .18);
}
.win__bar { display: flex; align-items: center; gap: .5rem; height: 34px; padding: 0 .8rem; background: #f1f2f4; border-bottom: 1px solid #e3e5e9; }
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.win__dots i:nth-child(2) { background: #febc2e; }
.win__dots i:nth-child(3) { background: #28c840; }
.win__url {
    flex: 1; max-width: 62%; margin: 0 auto; height: 22px; border-radius: 6px; background: #fff;
    font-size: .72rem; color: #6b7280; display: flex; align-items: center; justify-content: center; gap: .35rem;
    border: 1px solid #e5e7eb; white-space: nowrap; overflow: hidden;
}
.win__url::before { content: ""; width: 8px; height: 9px; border-radius: 2px; background: #16a34a; opacity: .8; }
.win img { display: block; width: 100%; height: auto; }
.phone {
    background: #0e0f12; border-radius: 34px; padding: 8px; position: relative;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 70px -28px rgba(18, 20, 24, .55);
}
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; width: 30%; height: 16px; transform: translateX(-50%); background: #0e0f12; border-radius: 10px; z-index: 2; }
.phone__screen { border-radius: 27px; overflow: hidden; background: #fff; aspect-ratio: 390 / 844; }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.h-hero {
    position: relative; min-height: calc(100svh - var(--hh));
    display: flex; align-items: center; padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    overflow: clip;
}
.h-hero__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 72px 72px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
    opacity: .7;
}
.h-hero__glow {
    position: absolute; z-index: 0; pointer-events: none; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
    right: -18vw; top: -12vw; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(242, 101, 34, .26), rgba(226, 51, 90, .14) 45%, transparent 70%);
    filter: blur(20px);
}
.h-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 2rem; align-items: center; }
.h-hero__text { position: relative; z-index: 3; }
.h-hero h1 { font-size: clamp(3.2rem, .8rem + 6.2vw, 7.2rem); margin: 1.2rem 0 1.4rem; }
.h-hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.h-hero h1 .ln > span { display: inline-block; }
.h-hero .h-lead { margin-bottom: 2rem; }
.h-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.h-proof { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.2rem; padding: 0; font-size: .92rem; color: var(--muted); }
.h-proof li { display: inline-flex; align-items: center; gap: .45rem; }
.h-proof strong { color: var(--ink); font-weight: 700; }
.h-proof .stars { color: #f59e0b; letter-spacing: .05em; }

/* Bühne mit schwebenden Fenstern */
.h-stage { position: relative; height: clamp(420px, 46vw, 640px); perspective: 1600px; z-index: 2; }
.h-stage__inner {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg)) rotateZ(1deg);
    transition: transform .9s var(--ease);
}
.h-it { position: absolute; transform-style: preserve-3d; will-change: transform; }
.h-it > * { animation: h-float var(--fd, 7s) ease-in-out infinite alternate; animation-delay: var(--fdl, 0s); }
@keyframes h-float { from { transform: translate3d(0, -8px, 0); } to { transform: translate3d(0, 10px, 0); } }
.h-it--a { width: 76%; left: 2%; top: 4%; --z: 0px; }
.h-it--b { width: 62%; left: 36%; top: 38%; --z: 90px; --fd: 8s; --fdl: -2s; }
.h-it--p { width: 21%; left: 80%; top: 22%; --z: 170px; --fd: 6.5s; --fdl: -4s; }
.h-it--c1 { left: 6%; top: 72%; --z: 210px; --fd: 6s; --fdl: -1s; }
.h-it--c2 { left: 52%; top: -2%; --z: 140px; --fd: 7.5s; --fdl: -3s; }
.h-chip {
    display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem .8rem .8rem; border-radius: 14px;
    background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(18,20,24,.06), 0 20px 40px -18px rgba(18,20,24,.35);
    font-size: .85rem; line-height: 1.3; white-space: nowrap; color: var(--ink);
}
.h-chip b { display: block; font-size: .9rem; }
.h-chip small { color: var(--muted); }
.h-chip__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: 0 0 auto; }
.h-chip__ic svg { width: 18px; height: 18px; }
.h-chip__ic--star { background: #fff7e6; color: #f59e0b; font-size: 1rem; }

.h-scrollhint {
    position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.h-scrollhint i { width: 1px; height: 38px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: h-hint 2s var(--ease) infinite; }
@keyframes h-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Einblenden beim Laden */
.js .h-hero h1 .ln > span { transform: translateY(108%); }
.js .h-hero .h-kicker, .js .h-hero .h-lead, .js .h-hero .h-actions, .js .h-hero .h-proof { opacity: 0; transform: translateY(18px); }
.js .h-it { opacity: 0; transform: translate3d(0, 60px, calc(var(--z) - 380px)) rotateX(18deg); }
.is-ready .h-hero h1 .ln > span { transform: none; transition: transform 1.2s var(--ease); }
.is-ready .h-hero h1 .ln:nth-child(2) > span { transition-delay: .08s; }
.is-ready .h-hero h1 .ln:nth-child(3) > span { transition-delay: .16s; }
.is-ready .h-hero h1 .ln:nth-child(4) > span { transition-delay: .24s; }
.is-ready .h-hero .h-kicker, .is-ready .h-hero .h-lead, .is-ready .h-hero .h-actions, .is-ready .h-hero .h-proof {
    opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--ease);
}
.is-ready .h-hero .h-lead { transition-delay: .45s; }
.is-ready .h-hero .h-actions { transition-delay: .55s; }
.is-ready .h-hero .h-proof { transition-delay: .65s; }
.is-ready .h-it { opacity: 1; transform: translate3d(0, var(--py, 0px), var(--z)); transition: opacity 1s ease, transform 1.6s var(--ease); }
.is-ready .h-it--b { transition-delay: .15s; }
.is-ready .h-it--p { transition-delay: .3s; }
.is-ready .h-it--c1 { transition-delay: .5s; }
.is-ready .h-it--c2 { transition-delay: .6s; }
.is-ready.is-live .h-it { transition: opacity 1s ease; }

@media (max-width: 1023px) {
    .h-hero { min-height: 0; }
    .h-hero__grid { grid-template-columns: 1fr; gap: 1rem; }
    .h-stage { height: clamp(300px, 72vw, 520px); margin: 0 -.5rem; }
    .h-stage__inner { --ry: -10deg; --rx: 6deg; }
    .h-scrollhint { display: none; }
}
@media (max-width: 560px) {
    .h-it--c2 { display: none; }
    .h-it--c1 { left: 0; top: 74%; }
    .h-chip { font-size: .75rem; padding: .55rem .75rem .55rem .55rem; }
    .h-chip b { font-size: .8rem; }
    .h-chip__ic { width: 30px; height: 30px; }
    .h-it--p { width: 25%; left: 74%; top: 18%; }
    .win__bar { height: 22px; padding: 0 .5rem; }
    .win__dots i { width: 6px; height: 6px; }
    .win__url { font-size: .55rem; height: 14px; }
    .h-actions .hbtn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   2 · SHOWCASE (gepinnt, scroll-gesteuert)
   ========================================================================== */
.sc { position: relative; height: 430vh; background: var(--bg-2); }
.sc__sticky {
    position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh));
    overflow: hidden; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 2rem;
    align-items: center; padding: 0 clamp(1rem, 3vw, 2.5rem);
    max-width: 1500px; margin: 0 auto;
}
.sc__caps { position: relative; z-index: 3; }
.sc__eyebrow { margin-bottom: 1.6rem; }
.sc__count { font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: 1rem; color: var(--muted); letter-spacing: .04em; margin-bottom: .6rem; }
.sc__count b { font-size: 3.4rem; color: var(--ink); line-height: 1; margin-right: .2rem; }
.sc__list { list-style: none; padding: 0; margin: 0; position: relative; min-height: 15rem; }
.sc__cap { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .7s var(--ease); pointer-events: none; }
.sc__cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sc__cap h3 { font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: .98; margin-bottom: 1rem; color: var(--ink); }
.sc__cap p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; max-width: 34ch; }
.sc__bar { display: flex; gap: .4rem; margin-top: 2rem; }
.sc__bar i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.sc__bar i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--f, 0)); }

.sc__view { position: relative; height: 100%; min-height: 0; }
.sc__canvas { position: absolute; left: 50%; top: 50%; width: 1100px; height: 700px; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center; perspective: 1800px; }
.sc__canvas > * { position: absolute; will-change: transform, opacity; }

.sc-ed { width: 560px; height: 420px; left: 270px; top: 120px; border-radius: 14px; overflow: hidden; background: #0f1218; box-shadow: 0 40px 80px -30px rgba(15, 18, 24, .6), 0 0 0 1px rgba(255,255,255,.04) inset; z-index: 2; }
.sc-ed .win__bar { background: #171b23; border-color: #232834; }
.sc-ed .win__url { background: #0f1218; border-color: #232834; color: #8b93a3; }
.sc-ed .win__url::before { display: none; }
.sc-ed__body { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 34px); }
.sc-ed__tree { background: #121620; border-right: 1px solid #1f2430; padding: .9rem .8rem; font: 12px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #7e8798; }
.sc-ed__tree span { display: block; white-space: nowrap; }
.sc-ed__tree .on { color: #e6e9ef; background: #1f2633; margin: 0 -.8rem; padding: 0 .8rem; }
.sc-ed__code { margin: 0; padding: .9rem 1rem; font: 12.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9d1dd; white-space: pre; overflow: hidden; counter-reset: ln; }
.sc-ed__code .t { color: #f2777a; } .sc-ed__code .a { color: #f6c177; } .sc-ed__code .s { color: #9ece6a; } .sc-ed__code .c { color: #5c6577; } .sc-ed__code .p { color: #7dcfff; }
.sc-ed__caret { display: inline-block; width: 7px; height: 15px; background: #f26522; vertical-align: -3px; animation: sc-blink 1s steps(1) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }

.sc-br { width: 760px; left: 300px; top: 60px; z-index: 1; }
.sc-br .win__bar { height: 38px; }
.sc-br__vp { position: relative; height: 470px; overflow: hidden; background: #fff; }
.sc-br__wire { position: absolute; inset: 0; padding: 28px 34px; display: grid; gap: 14px; align-content: start; background: #fff; }
.sc-br__wire i { display: block; height: 14px; border-radius: 7px; background: #e9ecf1; }
.sc-br__wire .w-nav { height: 18px; width: 100%; background: linear-gradient(90deg, #e9ecf1 0 16%, transparent 16% 52%, #eef0f4 52% 60%, transparent 60% 63%, #eef0f4 63% 71%, transparent 71% 74%, #eef0f4 74% 82%, transparent 82% 86%, #dfe3ea 86%); }
.sc-br__wire .w-hero { height: 170px; border-radius: 12px; margin-top: 10px; }
.sc-br__wire .w-h { height: 30px; width: 70%; }
.sc-br__wire .w-t { width: 56%; } .sc-br__wire .w-t2 { width: 44%; }
.sc-br__wire .w-btn { width: 150px; height: 38px; border-radius: 19px; background: #dfe3ea; }
.sc-br__shot { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.sc-br__shot img { width: 100%; height: auto; transform: translateY(0); will-change: transform; }

.sc-ph { width: 210px; left: 860px; top: 190px; z-index: 3; opacity: 0; }
.sc-serp { width: 540px; left: 40px; top: 400px; z-index: 4; opacity: 0; border-radius: 16px; background: #fff; padding: 18px 20px; box-shadow: 0 0 0 1px rgba(18,20,24,.06), 0 40px 80px -30px rgba(18,20,24,.45); }
.sc-serp__q { display: flex; align-items: center; gap: .7rem; height: 44px; border-radius: 22px; padding: 0 1rem; border: 1px solid #dfe1e5; font-size: 15px; color: #202124; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(32,33,36,.12); }
.sc-serp__q svg { width: 18px; height: 18px; color: #9aa0a6; flex: 0 0 auto; }
.sc-serp__q .sc-ed__caret { background: #1a73e8; width: 1.5px; height: 18px; }
.sc-serp__r { display: grid; grid-template-columns: 34px 1fr; gap: .2rem .8rem; padding: 10px 8px; border-radius: 10px; }
.sc-serp__r + .sc-serp__r { opacity: .45; }
.sc-serp__r.is-top { background: linear-gradient(90deg, rgba(242,101,34,.09), rgba(226,51,90,.05)); }
.sc-serp__no { grid-row: span 3; font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: 26px; line-height: 1; color: var(--acc-text); padding-top: 2px; }
.sc-serp__url { font-size: 12px; color: #4d5156; }
.sc-serp__t { font-size: 17px; color: #1a0dab; line-height: 1.3; }
.sc-serp__d { font-size: 12.5px; color: #4d5156; line-height: 1.45; }
.sc-serp__badge { position: absolute; right: -16px; top: -16px; padding: .5rem .8rem; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 12px 24px -10px rgba(226,51,90,.6); }

@media (max-width: 1023px) {
    .sc { height: 380vh; }
    .sc__sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding-top: 1.4rem; gap: 0; }
    .sc__eyebrow, .sc__bar { display: none; }
    .sc__count b { font-size: 2.2rem; }
    .sc__list { min-height: 8.6rem; }
    .sc__cap h3 { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.4rem); margin-bottom: .5rem; }
    .sc__cap p { font-size: .95rem; max-width: 46ch; }
}

/* ==========================================================================
   3 · LOGOS
   ========================================================================== */
.h-logos { padding: clamp(2.6rem, 5vw, 3.6rem) 0; border-bottom: 1px solid var(--line); background: #fff; }
.h-logos p { text-align: center; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 1.6rem; }
.h-logos .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* ==========================================================================
   4 · STATEMENT (Wörter füllen sich beim Scrollen)
   ========================================================================== */
.st__text { font-family: var(--display); font-weight: 750; font-stretch: 78%; font-size: clamp(2rem, 1rem + 3.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.01em; max-width: 22ch; }
.st__text .w { color: var(--ink); transition: color .25s linear; }
.js .st__text .w { color: #c9cdd4; }
.js .st__text .w.on { color: var(--ink); }
.js .st__text .w.acc.on { color: var(--acc-text); }
.st__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); }
.st__item { padding: 2rem 1.8rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform .6s var(--ease), box-shadow .5s; }
.st__item:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(18,20,24,.28); }
.st__item b { font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: 1rem; color: var(--acc-text); letter-spacing: .06em; }
.st__item h3 { font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 1.7rem; line-height: 1.05; margin: .8rem 0 .7rem; color: var(--ink); }
.st__item p { color: var(--muted); font-size: .98rem; line-height: 1.6; }
@media (max-width: 860px) { .st__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   5 · REFERENZEN (horizontal, gepinnt auf großen Bildschirmen)
   ========================================================================== */
.rf { position: relative; background: #fff; }
.rf__sticky { padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4rem); }
.rf__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.rf__top .h-lead { max-width: 40ch; }
.rf__nav { display: flex; align-items: center; gap: 1rem; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.rf__nav b { font-family: var(--display); font-stretch: 72%; font-size: 1.6rem; color: var(--ink); }
.rf__track { display: flex; gap: clamp(1rem, 2vw, 1.6rem); padding: 0 clamp(1rem, 3vw, 2rem) 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rf__track::-webkit-scrollbar { display: none; }
.rf-card { flex: 0 0 clamp(290px, 36vw, 600px); scroll-snap-align: start; color: var(--ink); display: block; }
.rf-card__media { position: relative; padding: 0 9% 9% 0; }
.rf-card .win { transition: transform .8s var(--ease), box-shadow .6s; }
.rf-card:hover .win { transform: translateY(-8px) rotate(-.6deg); }
.rf-card__ph { position: absolute; right: 0; bottom: 0; width: 22%; transition: transform .8s var(--ease); }
.rf-card:hover .rf-card__ph { transform: translateY(-14px) rotate(2deg); }
.rf-card .phone { border-radius: 20px; padding: 4px; }
.rf-card .phone::before { top: 8px; height: 8px; }
.rf-card .phone__screen { border-radius: 16px; }
.rf-card__meta { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: .8rem; }
.rf-card h3 { font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); line-height: 1.05; color: var(--ink); }
.rf-card__sub { color: var(--muted); font-size: .92rem; margin-top: .3rem; }
.rf-card__res { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .45rem .8rem; border-radius: 999px; background: var(--bg-2); font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.rf-card__res::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.rf-card__new { flex: 0 0 auto; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 6px; background: var(--grad); color: #fff; }
.rf-card--more { flex-basis: clamp(260px, 26vw, 380px); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 2.4rem; border-radius: 18px; background: var(--ink); color: #fff; min-height: 300px; align-self: stretch; margin-bottom: 9%; }
.rf-card--more h3 { color: #fff; font-size: 2.2rem; }
.rf-card--more p { color: rgba(255,255,255,.7); }
.rf-card--more .hbtn { background: #fff; color: var(--ink); border-color: #fff; align-self: flex-start; }
.rf-card--more .hbtn:hover { color: #fff; }

@media (min-width: 1024px) {
    .rf.is-pinned .rf__sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0; }
    .rf.is-pinned .rf__track { overflow: visible; scroll-snap-type: none; padding-left: max(clamp(1rem, 3vw, 2rem), calc((100vw - 1320px) / 2 + 2rem)); will-change: transform; }
    .rf.is-pinned .rf-card { flex-basis: clamp(420px, 34vw, 580px); }
}

/* ==========================================================================
   6 · LEISTUNGEN (Karten stapeln sich)
   ========================================================================== */
.sv__stack { display: grid; gap: 1.2rem; }
.sv-card {
    position: sticky; top: calc(var(--hh) + 1.5rem + var(--i, 0) * 16px);
    display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 2.5rem; align-items: start;
    padding: clamp(1.8rem, 3.5vw, 3rem); border-radius: 22px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 -10px 40px -24px rgba(18,20,24,.25);
    transform-origin: 50% 0; will-change: transform;
}
.sv-card:nth-child(2n) { background: #fbfbfc; }
.sv-card__no { font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: .85; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-card h3 { font-family: var(--display); font-stretch: 76%; font-weight: 800; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1; color: var(--ink); }
.sv-card p { color: var(--muted); line-height: 1.65; }
.sv-card ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.sv-card li { font-size: .82rem; font-weight: 600; padding: .4rem .7rem; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.sv__more { margin-top: 2.5rem; }
@media (max-width: 860px) {
    .sv-card { grid-template-columns: 1fr; gap: .8rem; top: calc(var(--hh) + .8rem + var(--i, 0) * 10px); }
}

/* ==========================================================================
   7 · KENNZAHLEN
   ========================================================================== */
.kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kz__i { padding: clamp(1.8rem, 4vw, 3rem) clamp(1rem, 2vw, 1.8rem); border-right: 1px solid var(--line); }
.kz__i:last-child { border-right: 0; }
.kz__n { font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: clamp(3rem, 1.6rem + 4vw, 6rem); line-height: .9; color: var(--ink); white-space: nowrap; }
.kz__n small { font-size: .45em; margin-left: .08em; }
.kz__i:nth-child(2) .kz__n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kz__l { margin-top: .8rem; color: var(--muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 860px) {
    .kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kz__i:nth-child(2) { border-right: 0; }
    .kz__i:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   8 · ABLAUF (Linie zeichnet sich)
   ========================================================================== */
.ab { position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); padding-left: 0; max-width: 1000px; margin: 0 auto; }
.ab::before, .ab__fill { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.ab__fill { background: var(--grad); transform-origin: top; transform: scaleY(var(--f, 0)); }
.ab__step { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ab__dot { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: border-color .4s, box-shadow .4s, background .4s; z-index: 1; }
.ab__step.on .ab__dot { border-color: var(--acc); background: var(--acc); box-shadow: 0 0 0 6px rgba(232,80,30,.15); }
.ab__no { font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: clamp(4rem, 3rem + 4vw, 7.5rem); line-height: .8; color: #e6e8ec; text-align: right; transition: color .6s; }
.ab__step.on .ab__no { color: var(--ink); }
.ab__step--alt .ab__no { order: 2; text-align: left; }
.ab__box h3 { font-family: var(--display); font-stretch: 76%; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.05; margin-bottom: .6rem; color: var(--ink); }
.ab__box p { color: var(--muted); line-height: 1.65; }
@media (max-width: 760px) {
    .ab { padding-left: 2.2rem; }
    .ab::before, .ab__fill { left: 8px; }
    .ab__step { grid-template-columns: 1fr; gap: .6rem; }
    .ab__dot { left: -2.2rem; margin-left: -1px; top: .6rem; margin-top: 0; }
    .ab__no, .ab__step--alt .ab__no { order: 0; text-align: left; font-size: 3.4rem; }
}

/* ==========================================================================
   9 · PERSON, FÖRDERUNG, FAQ, SEO, CTA
   ========================================================================== */
.home .person__photo { border-radius: 22px; }
.home .person__quote { font-family: var(--display); font-stretch: 80%; font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem); line-height: 1.15; color: var(--ink); }
.home .person__quote em { font-style: normal; color: var(--acc-text); }

.fd { position: relative; overflow: hidden; border-radius: 28px; background: var(--ink); color: #fff; padding: clamp(2.2rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; isolation: isolate; }
.fd::before { content: ""; position: absolute; z-index: -1; width: 680px; height: 680px; right: -200px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(242,101,34,.5), rgba(226,51,90,.25) 45%, transparent 70%); filter: blur(10px); }
.fd .h-display { color: #fff; }
.fd p { color: rgba(255,255,255,.72); line-height: 1.65; margin-top: 1.2rem; }
.fd__big { font-family: var(--display); font-stretch: 68%; font-weight: 800; font-size: clamp(6rem, 3rem + 10vw, 13rem); line-height: .8; text-align: right; }
.fd__big small { display: block; font-size: 1rem; font-stretch: 100%; font-weight: 600; color: rgba(255,255,255,.7); margin-top: 1rem; letter-spacing: .02em; }
.fd .pills { margin-top: 1.4rem; }
.fd .pill { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16); }
.fd .hbtn { background: #fff; color: var(--ink); border-color: #fff; margin-top: 1.8rem; }
.fd .hbtn:hover { color: #fff; }
@media (max-width: 860px) { .fd { grid-template-columns: 1fr; } .fd__big { text-align: left; } }

.home .faq summary { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 1.2rem; }

.seo { max-width: 900px; }
.seo h2 { font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.02; margin: 1rem 0 1.6rem; color: var(--ink); }
.seo h3 { font-family: var(--display); font-stretch: 85%; font-weight: 750; font-size: 1.35rem; margin: 2rem 0 .7rem; color: var(--ink); }
.seo p { color: var(--muted); line-height: 1.75; margin-bottom: 1.1rem; }
.seo a { color: var(--acc-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.seo__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; list-style: none; padding: 0; }
.seo__links a { display: inline-block; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; transition: border-color .3s, background .3s; }
.seo__links a:hover { border-color: var(--ink); background: var(--bg-2); }

.fin { padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 7vw, 5rem); overflow: hidden; text-align: center; background: #fff; }
.fin__word { font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(2.6rem, 12.2vw, 15rem); line-height: .82; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); display: flex; justify-content: center; }
.fin__word span { display: inline-block; will-change: transform; }
.fin__word .acc { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fin p { max-width: 52ch; margin: 2rem auto; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.fin .h-actions { justify-content: center; }

/* ==========================================================================
   Einblenden allgemein
   ========================================================================== */
.js [data-rv] { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-rv].in { opacity: 1; transform: none; }
.js [data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(12% 12% 12% 12% round 22px); transition: clip-path 1.4s var(--ease); }
.js [data-rv="clip"].in { clip-path: inset(0 0 0 0 round 22px); }

/* ==========================================================================
   Reduzierte Bewegung: alles statisch, nichts gepinnt
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .h-it > *, .h-scrollhint i, .sc-ed__caret { animation: none !important; }
    .sc { height: auto; }
    .sc__sticky { position: relative; top: 0; height: auto; padding-top: 3rem; padding-bottom: 3rem; }
    .sc__list { min-height: 0; }
    .sc__cap { position: static; opacity: 1; transform: none; margin-bottom: 1.5rem; }
    .sc__view { height: 560px; }
    .js [data-rv], .js [data-rv="clip"] { opacity: 1; transform: none; clip-path: none; transition: none; }
    .sv-card { position: relative; top: auto; }
}

/* Showcase im Hochformat (Handy) */
@media (max-width: 760px) {
    .sc__canvas { width: 600px; height: 840px; }
    .sc-ed { width: 540px; height: 380px; left: 30px; top: 30px; }
    .sc-br { width: 560px; left: 20px; top: 250px; }
    .sc-br__vp { height: 440px; }
    .sc-ph { width: 180px; left: 400px; top: 420px; }
    .sc-serp { width: 540px; left: 30px; top: 560px; }
    .sc-ed__code { font-size: 13.5px; }
}

/* ==========================================================================
   Landingpages (Branchen & Orte)
   ========================================================================== */
.lp-hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); overflow: clip; }
.lp-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.lp-hero h1 { font-size: clamp(2.8rem, 1rem + 4.6vw, 6rem); margin: 1.2rem 0 1.4rem; }
.lp-hero .h-lead { margin-bottom: 2rem; }
.lp-photo { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -40px rgba(18,20,24,.45); }
.lp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-stack { position: relative; aspect-ratio: 5 / 4; }
.lp-stack__a { position: absolute; width: 84%; left: 0; top: 4%; transform: rotate(-2deg); }
.lp-stack__b { position: absolute; width: 62%; right: 6%; bottom: 4%; transform: rotate(2.5deg); }
.lp-stack__p { position: absolute; width: 20%; right: 0; top: 18%; }
.lp-stack > * { animation: h-float 7s ease-in-out infinite alternate; }
.lp-stack > *:nth-child(2) { animation-duration: 8s; animation-delay: -3s; }
.lp-stack > *:nth-child(3) { animation-duration: 6s; animation-delay: -1s; }
.lp-body h2 { margin-top: 2.6rem; }
.lp-body h2:first-child { margin-top: 0; }
.rf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
.rf-grid .rf-card { flex: none; }
@media (max-width: 1023px) { .lp-hero__grid { grid-template-columns: 1fr; } .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rf-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lp-stack > * { animation: none; } }

/* ==========================================================================
   Einsatzgebiet: Karte + Orte
   ========================================================================== */
.rg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.karte { position: relative; height: clamp(380px, 46vw, 600px); border-radius: 22px; overflow: hidden; background: #e9edf1; border: 1px solid var(--line); box-shadow: 0 40px 80px -48px rgba(18,20,24,.45); z-index: 0; }
.karte .leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.04); }
.k-pin i { position: absolute; inset: 4px; border-radius: 50%; background: var(--grad, #e8501e); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(226,51,90,.45); transition: transform .3s; }
.k-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(232,80,30,.35); animation: k-pulse 2.4s ease-out infinite; }
.k-pin.is-hl i, .k-pin:hover i { transform: scale(1.35); }
.k-pin--sitz i { background: #121418; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e8501e, 0 6px 14px rgba(18,20,24,.4); }
@keyframes k-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.k-ref i { position: absolute; inset: 2px; border-radius: 50%; background: #121418; box-shadow: 0 0 0 2px #fff; }
.k-label { background: rgba(255,255,255,.94); border: 0; border-radius: 7px; box-shadow: 0 4px 12px rgba(18,20,24,.16); padding: 3px 8px; font: 700 12px/1.2 'Archivo', sans-serif; color: #121418; }
.k-label::before { display: none; }
.k-label.is-hl { background: #121418; color: #fff; }
.karte.k-far .k-label:not(.k-label--big) { display: none; }
.karte .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(18,20,24,.4); }
.karte .leaflet-popup-content { margin: 12px 14px; font: 14px/1.4 'Archivo', sans-serif; display: grid; gap: 3px; }
.karte .leaflet-popup-content small { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #5a6270; }
.karte .leaflet-popup-content span { color: #5a6270; font-size: 13px; }
.karte .leaflet-popup-content a { color: #c2410c; font-weight: 700; margin-top: 4px; }
.karte .leaflet-control-attribution { font-size: 10px; }
.k-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 500; background: rgba(18,20,24,.82); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.rg__lists { display: grid; gap: 2rem; }
.rg__group h3 { font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 1.5rem; color: var(--ink); margin-bottom: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rg__group h3 a { font-family: 'Archivo', sans-serif; font-stretch: 100%; font-size: .85rem; font-weight: 700; color: var(--acc-text); white-space: nowrap; }
.rg__links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.rg__links a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 650; font-size: .95rem; transition: border-color .3s, transform .4s var(--ease), box-shadow .3s; min-height: 48px; }
.rg__links a::after { content: "→"; color: var(--acc-text); transition: transform .3s var(--ease); }
.rg__links a:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(18,20,24,.4); }
.rg__links a:hover::after { transform: translateX(3px); }
.rg__links small { display: block; font-weight: 500; font-size: .75rem; color: var(--muted); }
.rg__links .is-sitz { border-color: var(--ink); }
.rg__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-size: .82rem; color: var(--muted); }
.rg__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.rg__legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.rg__legend i.ref { background: #121418; width: 9px; height: 9px; }
.rg__legend i.sitz { background: #121418; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e8501e; }
.orte-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.ort-card { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; color: #fff; isolation: isolate; }
.ort-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.ort-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(12,14,18,.82)); }
.ort-card:hover img { transform: scale(1.06); }
.ort-card span { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 1.6rem; line-height: 1.05; }
.ort-card small { display: block; font-family: 'Archivo', sans-serif; font-stretch: 100%; font-weight: 500; font-size: .85rem; opacity: .85; margin-top: .25rem; }
@media (max-width: 1023px) { .rg { grid-template-columns: 1fr; } .orte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rg__links { grid-template-columns: 1fr; } .orte-grid { grid-template-columns: 1fr; } .karte { height: 420px; } }
@media (prefers-reduced-motion: reduce) { .k-pin::before { animation: none; } }
.lp-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lp-split .seo { max-width: none; }
.lp-split__map { position: sticky; top: calc(var(--hh) + 2rem); }
.lp-split__map .karte { height: clamp(360px, 38vw, 520px); margin-top: 1rem; }
.karte--hero { height: clamp(380px, 40vw, 560px); }
@media (max-width: 1023px) { .lp-split { grid-template-columns: 1fr; } .lp-split__map { position: static; } }
@media (max-width: 560px) { .rg__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg__links a { padding: .7rem .75rem; font-size: .88rem; } .karte, .lp-split__map .karte, .karte--hero { height: 400px; } }

/* Handy-Feinschliff (24.10.2026): gleichmäßige Ränder */
.fin { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }
.rf__track { scroll-padding-left: clamp(1rem, 3vw, 2rem); scroll-padding-right: clamp(1rem, 3vw, 2rem); }
.rf__track::after { content: ""; flex: 0 0 1px; }
@media (max-width: 1023px) {
    .h-stage { margin: 0; }
    .rf__top { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .rf-card { flex-basis: 84%; }
    .rf-card--more { flex-basis: 70%; }
}
@media (max-width: 560px) {
    .h-it--c1 { left: 2%; top: 76%; }
    .h-it--p { left: 72%; }
    .h-kicker { letter-spacing: .14em; font-size: .72rem; }
    .fd { border-radius: 22px; }
    .kz__i { padding-left: 1rem; padding-right: 1rem; }
    .fin__word { padding: 0 .1em; }
}
@media (max-width: 760px) {
    .site-footer { padding-bottom: 96px; }
}
.home .check__text h2 { font-family: var(--display); font-stretch: 76%; font-weight: 800; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -.01em; max-width: 14ch; margin: 1rem 0 1.2rem; color: var(--ink); }
.home .check__text .hero__badge { color: var(--muted); }
.sc__cap { transition: opacity .35s ease, transform .6s var(--ease); }
.sc__cap:not(.is-on) { transform: translateY(-14px); transition-duration: .2s; }