/* TwoPixels JTL-Connector-Seite , alles unter .cx gescopt, keine globalen Kollisionen */
.cx{
  --cx-rust:#9a3412; --cx-rust-hi:#c2410c; --cx-rust-soft:#fbeae2;
  --cx-ink:#1A202C; --cx-graphite:#2D3748; --cx-slate:#4A5568; --cx-muted:#718096;
  --cx-bg:#F7FAFC; --cx-paper:#ffffff; --cx-line:#E2E8F0; --cx-line-soft:#eef2f6;
  --cx-dark:#0F172A; --cx-dark-2:#1e293b;
  --cx-bad:#CF004F; --cx-bad-soft:#fdecf2;
  --cx-good:#0E9F6E; --cx-good-soft:#e7f7f0;
  --cx-r-sm:10px; --cx-r-md:14px; --cx-r-lg:20px; --cx-r-xl:28px;
  --cx-sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --cx-sh-md:0 10px 30px -12px rgba(16,24,40,.18);
  --cx-sh-lg:0 30px 60px -24px rgba(16,24,40,.28);
  --cx-sh-rust:0 18px 40px -16px rgba(154,52,18,.45);
  --cx-container:1180px;
  color:var(--cx-graphite);hyphens:none;word-break:normal;
}
.cx *{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.cx *{animation:none!important;transition:none!important}}
.cx .wrap{max-width:var(--cx-container);margin:0 auto;padding:0 24px}
.cx h1,.cx h2,.cx h3{margin:0;line-height:1.12;color:var(--cx-ink);text-wrap:balance;letter-spacing:-.02em}
.cx p{margin:0;line-height:1.6}
.cx a{color:inherit}
.cx .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cx-rust)}
.cx .eyebrow::before{content:"";width:26px;height:2px;background:var(--cx-rust);border-radius:2px}
.cx .eyebrow.on-dark{color:#f0a58a}
.cx .eyebrow.on-dark::before{background:#f0a58a}

/* HERO */
.cx .hero{position:relative;overflow:hidden;color:#e6ebf3;padding:96px 0 88px;background:
    radial-gradient(120% 90% at 85% -10%,rgba(154,52,18,.34),transparent 55%),
    radial-gradient(90% 70% at 8% 110%,rgba(92,188,246,.14),transparent 60%),
    linear-gradient(180deg,var(--cx-dark),var(--cx-dark-2))}
.cx .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.cx .hero h1{color:#fff!important;-webkit-text-fill-color:#fff;background:none!important;opacity:1!important;animation:none!important;transform:none!important;font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800;margin:22px 0 0}
.cx .hero h1 .mark{color:#f6a07f!important;-webkit-text-fill-color:#f6a07f}
.cx .hero .lead{margin-top:20px;font-size:1.13rem;color:#c2cbdb;max-width:35em}
.cx .hero .lead b{color:#fff;font-weight:650}
.cx .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cx .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s}
.cx .btn-primary{background:linear-gradient(180deg,var(--cx-rust-hi),var(--cx-rust));color:#fff;box-shadow:var(--cx-sh-rust)}
.cx .btn-primary:hover{transform:translateY(-2px)}
.cx .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22)}
.cx .btn-ghost:hover{background:rgba(255,255,255,.12)}
.cx .trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.cx .trust span{font-size:.92rem;color:#9fb0c9;display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.cx .trust b{color:#fff;font-weight:700}
.cx .trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cx-good)}
.cx .flow{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);border-radius:var(--cx-r-xl);padding:26px;box-shadow:var(--cx-sh-lg)}
.cx .flow-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.cx .flow-head .t{font-weight:700;color:#fff;font-size:.98rem}
.cx .flow-head .s{font-size:.76rem;color:#8fa0ba;letter-spacing:.05em}
.cx .node{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--cx-r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.cx .node .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;font-weight:800;color:#fff;font-size:.9rem}
.cx .node .ic.jtl{background:linear-gradient(135deg,#F68B25,#CF004F)}
.cx .node .ic.shop{background:linear-gradient(135deg,#95BF47,#5CBCF6)}
.cx .node .nm{font-weight:700;color:#fff;font-size:.98rem}
.cx .node .ds{font-size:.8rem;color:#93a3bd}
.cx .pipe{position:relative;height:52px;margin:6px 0}
.cx .pipe::before{content:"";position:absolute;left:36px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#CF004F,#5CBCF6)}
.cx .packet{position:absolute;left:29px;width:16px;height:16px;border-radius:50%;background:#f6a07f;box-shadow:0 0 0 5px rgba(246,160,127,.2);animation:cxdrop 2.4s ease-in-out infinite}
@keyframes cxdrop{0%{top:-4px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:48px;opacity:0}}
.cx .flow-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.cx .flow-tags .tg{font-size:.72rem;font-weight:600;color:#cdd7e6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:5px 10px;border-radius:999px}

/* SECTION SHELL */
.cx .sec{padding:80px 0}
.cx .sec-head{max-width:760px;margin-bottom:44px}
.cx .sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;margin:16px 0 0}
.cx .sec-head p{margin-top:16px;font-size:1.1rem;color:var(--cx-slate)}

/* PROBLEM BAND */
.cx .band-problem{background:linear-gradient(180deg,#fff,#fbfcfe)}
.cx .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cx .prob{background:var(--cx-paper);border:1px solid var(--cx-line);border-left:4px solid var(--cx-bad);
  border-radius:var(--cx-r-lg);padding:24px 22px;box-shadow:var(--cx-sh-sm);transition:transform .18s,box-shadow .18s}
.cx .prob:hover{transform:translateY(-3px);box-shadow:var(--cx-sh-md)}
.cx .prob .ic{width:44px;height:44px;border-radius:12px;background:var(--cx-bad-soft);color:var(--cx-bad);display:grid;place-items:center;margin-bottom:14px}
.cx .prob h3{font-size:1.16rem;font-weight:750}
.cx .prob p{margin-top:8px;color:var(--cx-slate);font-size:.98rem}
.cx .prob .src{margin-top:14px;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--cx-muted);text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.cx .prob .src::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cx-bad)}

/* COMPARISON TABLE */
.cx .band-compare{background:var(--cx-bg)}
.cx .cmp{overflow-x:auto;border-radius:var(--cx-r-xl);box-shadow:var(--cx-sh-lg);background:var(--cx-paper);border:1px solid var(--cx-line)}
.cx table.compare{width:100%;border-collapse:collapse;min-width:720px;font-size:1rem}
.cx table.compare thead th{text-align:left;padding:0}
.cx .th-inner{padding:22px 22px}
.cx .th-topic{width:34%;background:var(--cx-paper)}
.cx .th-topic .k{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-muted);font-weight:700}
.cx .th-std{background:#fbfcfe;border-left:1px solid var(--cx-line)}
.cx .th-tp{background:linear-gradient(180deg,#fff7f3,#fdeee7);border-left:2px solid var(--cx-rust)}
.cx .th-std .co,.cx .th-tp .co{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.06rem;color:var(--cx-ink)}
.cx .th-tp .co{color:var(--cx-rust)}
.cx .logo-dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:800;flex:none}
.cx .logo-dot.std{background:#94a3b8}
.cx .logo-dot.tp{background:linear-gradient(135deg,var(--cx-rust-hi),var(--cx-rust))}
.cx .th-std .sub,.cx .th-tp .sub{font-size:.8rem;font-weight:600;color:var(--cx-muted);margin-top:3px}
.cx tr.cat-row td{background:var(--cx-dark);color:#dbe3ef;padding:11px 22px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cx table.compare tbody tr.row td{padding:17px 22px;border-top:1px solid var(--cx-line-soft);vertical-align:top}
.cx tr.row .topic{font-weight:700;color:var(--cx-graphite)}
.cx tr.row .std{color:var(--cx-slate);background:#fcfdfe;border-left:1px solid var(--cx-line)}
.cx tr.row .tp{background:#fffaf7;border-left:2px solid var(--cx-rust);color:var(--cx-graphite);font-weight:600}
.cx .mk{display:inline-flex;align-items:flex-start;gap:9px}
.cx .mk .x{color:var(--cx-bad);flex:none;margin-top:2px;font-weight:800}
.cx .mk .v{color:var(--cx-good);flex:none;margin-top:2px;font-weight:800}
.cx tr.row:hover .std{background:#f8fafc}
.cx tr.row:hover .tp{background:#fff4ee}

/* PROBLEM -> SOLUTION */
.cx .band-fix{background:linear-gradient(180deg,#fbfcfe,#fff)}
.cx .fix-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cx .fix{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border:1px solid var(--cx-line);border-radius:var(--cx-r-lg);overflow:hidden;background:var(--cx-paper);box-shadow:var(--cx-sh-sm)}
.cx .fix .p{padding:22px;background:var(--cx-bad-soft)}
.cx .fix .s{padding:22px;background:var(--cx-good-soft)}
.cx .fix .lbl{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.cx .fix .p .lbl{color:var(--cx-bad)}
.cx .fix .s .lbl{color:var(--cx-good)}
.cx .fix .p p{color:#7a2540;font-size:.96rem}
.cx .fix .s p{color:#0b6b4a;font-size:.96rem;font-weight:600}
.cx .fix .arrow{display:grid;place-items:center;background:var(--cx-paper);padding:0 6px;color:var(--cx-rust)}

/* B2B COST */
.cx .band-b2b{background:linear-gradient(180deg,var(--cx-dark),var(--cx-dark-2));color:#e6ebf3}
.cx .band-b2b h2{color:#fff}
.cx .band-b2b .sec-head p{color:#b7c2d5}
.cx .b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cx .cost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--cx-r-xl);padding:28px}
.cx .cost h3{color:#fff;font-size:1.15rem;margin-bottom:20px}
.cx .bar{margin-bottom:22px}
.cx .bar .bl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:10px}
.cx .bar .bl .n{font-weight:700;color:#fff}
.cx .bar .bl .amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx .bar .track{height:16px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.cx .bar .fill{height:100%;border-radius:999px}
.cx .bar.plus .amt{color:#f6a07f}
.cx .bar.plus .fill{width:100%;background:linear-gradient(90deg,#CF004F,#f6a07f)}
.cx .bar.tp .amt{color:#7ee0b4}
.cx .bar.tp .fill{width:16%;background:linear-gradient(90deg,#0E9F6E,#7ee0b4)}
.cx .cost .note{font-size:.82rem;color:#93a3bd;margin-top:4px}
.cx .b2b-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.cx .b2b-list li{display:flex;gap:13px;align-items:flex-start;color:#cdd7e6}
.cx .b2b-list .v{color:#7ee0b4;flex:none;margin-top:3px;font-weight:800}
.cx .b2b-list b{color:#fff;font-weight:700}

/* CAPABILITIES */
.cx .band-cap{background:var(--cx-bg)}
.cx .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cx .cap{display:flex;gap:13px;align-items:flex-start;background:var(--cx-paper);border:1px solid var(--cx-line);border-radius:var(--cx-r-md);padding:18px;box-shadow:var(--cx-sh-sm);transition:transform .16s,box-shadow .16s}
.cx .cap:hover{transform:translateY(-2px);box-shadow:var(--cx-sh-md);border-color:#f0c9b8}
.cx .cap .v{width:26px;height:26px;border-radius:8px;background:var(--cx-rust-soft);color:var(--cx-rust);display:grid;place-items:center;flex:none;margin-top:1px;font-weight:800}
.cx .cap p{font-size:.96rem;color:var(--cx-graphite);font-weight:600}
.cx .cap p span{display:block;font-weight:400;color:var(--cx-muted);font-size:.86rem;margin-top:2px}

/* HONESTY */
.cx .fair{padding:26px 28px;background:var(--cx-paper);border:1px dashed var(--cx-line);border-radius:var(--cx-r-lg);display:flex;gap:16px;align-items:flex-start;margin-top:34px}
.cx .fair .ic{width:40px;height:40px;border-radius:10px;background:#eef4ff;color:#2b6cb0;display:grid;place-items:center;flex:none}
.cx .fair p{font-size:.94rem;color:var(--cx-slate)}
.cx .fair b{color:var(--cx-graphite)}

/* CTA */
.cx .band-cta{color:#fff;text-align:center;background:
    radial-gradient(100% 120% at 90% 0%,rgba(154,52,18,.4),transparent 55%),
    linear-gradient(180deg,var(--cx-dark-2),var(--cx-dark))}
.cx .band-cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cx .band-cta p{color:#c2cbdb;max-width:44em;margin:16px auto 0;font-size:1.1rem}
.cx .band-cta .cta-row{justify-content:center}
.cx .addr{margin-top:26px;font-size:.92rem;color:#8fa0ba}

@media (max-width:900px){
  .cx .hero-grid{grid-template-columns:1fr;gap:34px}
  .cx .prob-grid{grid-template-columns:1fr}
  .cx .fix-grid{grid-template-columns:1fr}
  .cx .b2b-grid{grid-template-columns:1fr;gap:30px}
  .cx .cap-grid{grid-template-columns:1fr}
  .cx .sec{padding:58px 0}
  .cx .hero{padding:70px 0 60px}
}

/* Vergleichstabelle auf Mobil: gestapelte Karten statt Seitwärts-Scrollen */
@media (max-width:720px){
  .cx .cmp{overflow-x:visible;border:0;border-radius:0;box-shadow:none;background:transparent}
  .cx table.compare{min-width:0;display:block;font-size:.98rem}
  .cx table.compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cx table.compare tbody{display:block}
  .cx tr.cat-row{display:block;margin:22px 0 12px}
  .cx tr.cat-row td{display:block;border-radius:10px}
  .cx tr.row{display:block;background:var(--cx-paper);border:1px solid var(--cx-line);
    border-radius:14px;margin-bottom:14px;box-shadow:var(--cx-sh-sm);overflow:hidden}
  .cx table.compare tbody tr.row td{display:block;border:0;padding:0}
  .cx tr.row .topic{padding:15px 18px 8px;font-size:1.08rem;font-weight:750;color:var(--cx-ink);
    border-bottom:1px solid var(--cx-line-soft)}
  .cx tr.row .std,.cx tr.row .tp{background:transparent!important;border-left:0!important;padding:13px 18px}
  .cx tr.row .tp{background:#fffaf7!important;border-top:1px solid var(--cx-line-soft)}
  .cx tr.row:hover .std,.cx tr.row:hover .tp{background:#fffaf7}
  .cx tr.row:hover .std{background:transparent}
  .cx tr.row .std::before,.cx tr.row .tp::before{display:block;font-size:.68rem;font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px}
  .cx tr.row .std::before{content:var(--cx-std-label,"Standard");color:var(--cx-muted)}
  .cx tr.row .tp::before{content:var(--cx-tp-label,"TwoPixels");color:var(--cx-rust)}
}