/* ══════════════════════════════════════════════════════
   Ion One Platform — module.css
   Prefix: px- (no conflicts with fruitcore theme)
   Architecture: mirrors HORST Konfigurator (proven)
══════════════════════════════════════════════════════ */

:root {
  --px-bg:      #001214;
  --px-card:    #ffffff;
  --px-card2:   #f5f7f6;
  --px-border:  #e8eceb;
  --px-ink:     #1a1a1a;
  --px-dim:     #6b7280;
  --px-faint:   #9ca3af;
  --px-teal:    #008692;
  --px-teal-lt: #43e1db;
  --px-lime:    #dff469;
  --px-green:   #22c55e;
  --px-amber:   #f59e0b;
  --px-blue:    #3b82f6;
  --px-r:       24px;
  --px-r-card:  20px;
  --px-tr:      .2s cubic-bezier(.4,0,.2,1);
  --px-f:       'Macan','DM Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}

.px-wrap { font-family: var(--px-f); background: var(--px-bg); color: #fff; overflow-x: hidden; line-height: 1.55; }
.px-wrap *, .px-wrap *::before, .px-wrap *::after { box-sizing: border-box; }

/* ══ HERO ══ */
.px-hero { background: linear-gradient(125deg,#012620 0%,#021f1a 18%,#000 42%,#0a1a05 68%,#1a3a08 88%,#2a5010 100%); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; }
.px-hero::before { content:''; position:absolute; top:-20%; left:-10%; width:60%; height:120%; background:radial-gradient(ellipse,rgba(0,134,146,.32) 0%,transparent 60%); pointer-events:none; }
.px-hero::after { content:''; position:absolute; top:-20%; right:-10%; width:60%; height:120%; background:radial-gradient(ellipse,rgba(100,180,30,.16) 0%,transparent 60%); pointer-events:none; }
.px-hero-inner { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; justify-content:center; padding: 80px 48px 60px; }
.px-eyebrow { font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--px-teal-lt); margin-bottom:14px; opacity:.78; display:flex; align-items:center; gap:8px; }
.px-eyebrow::before { content:'|'; opacity:.5; font-size:13px; font-weight:300; }
.px-h1 { font-size:clamp(48px,6vw,80px); font-weight:800; letter-spacing:-.03em; line-height:1.0; color:#fff; margin-bottom:8px; }
.px-rotate-wrap { overflow:hidden; height:36px; margin-bottom:28px; }
.px-rotate { display:flex; flex-direction:column; animation:pxRotate 8s steps(1) infinite; }
.px-rotate span { display:block; font-size:clamp(15px,1.8vw,20px); font-weight:300; color:rgba(255,255,255,.52); line-height:1.8em; white-space:nowrap; }
@keyframes pxRotate { 0%{transform:translateY(0)} 25%{transform:translateY(-1.8em)} 50%{transform:translateY(-3.6em)} 75%{transform:translateY(-5.4em)} 100%{transform:translateY(0)} }
.px-btn-lime { display:inline-flex; align-items:center; gap:7px; background:var(--px-lime); color:var(--px-ink); font-size:13px; font-weight:700; padding:11px 22px; border-radius:8px; text-decoration:none; border:none; cursor:pointer; transition:background var(--px-tr),transform var(--px-tr); align-self:flex-start; margin-bottom:24px; }
.px-btn-lime:hover { background:#eeff7a; transform:translateY(-1px); }
.px-hero-pills { display:flex; flex-wrap:wrap; gap:8px; }
.px-pill { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:11px; font-weight:600; backdrop-filter:blur(8px); }
.px-pill.lime { background:rgba(223,244,105,.12); border:1px solid rgba(223,244,105,.35); color:var(--px-lime); }
.px-pill.teal { background:rgba(67,225,219,.1); border:1px solid rgba(67,225,219,.25); color:var(--px-teal-lt); }
.px-pill.white { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); }
.px-stat-strip { position:relative; z-index:2; width:100%; display:grid; grid-template-columns:repeat(4,1fr); }
.px-stat { background:rgba(18,30,28,.92); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.07); border-right:1px solid rgba(255,255,255,.06); padding:18px 22px; position:relative; }
.px-stat:last-child { border-right:none; }
.px-stat-chk { position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; background:rgba(0,134,146,.22); border:1.5px solid rgba(67,225,219,.45); display:flex; align-items:center; justify-content:center; color:var(--px-teal-lt); }
.px-stat-v { font-size:24px; font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1; margin-bottom:18px; }
.px-stat-l { font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.32); }

/* ══ TICKER ══ */
.px-ticker { background:var(--px-teal); overflow:hidden; height:40px; display:flex; align-items:center; }
.px-ticker-inner { display:inline-flex; white-space:nowrap; animation:pxTick 34s linear infinite; }
.px-t { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:0 26px; }
.px-t::before { content:'// '; opacity:.42; }
@keyframes pxTick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══ SHARED INNER ══ */
.px-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.px-eyebrow-left { font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--px-teal); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.px-eyebrow-left::before { content:'|'; font-size:13px; font-weight:300; color:var(--px-teal); }
.px-eyebrow-left.wht { color:var(--px-teal-lt); opacity:.82; }
.px-eyebrow-left.wht::before { color:var(--px-teal-lt); }
.px-sec-h2 { font-size:clamp(20px,2.5vw,30px); font-weight:700; letter-spacing:-.025em; margin-bottom:10px; color:var(--px-ink); line-height:1.15; }
.px-sec-h2.white { color:#fff; }
.px-sec-p { font-size:13px; color:var(--px-dim); line-height:1.75; }
.px-sec-p.muted { color:rgba(255,255,255,.46); }

/* ══ KI SOFTWARE ══ */
.px-ki-sec { background:var(--px-bg); padding:72px 0; }
.px-ki-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:32px; }
.px-ki-card { background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.09); border-radius:30px; padding:24px 20px 20px; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:border-color var(--px-tr),background var(--px-tr),transform var(--px-tr); }
a.px-ki-card:hover { border-color:rgba(67,225,219,.3); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.px-ki-icon { width:40px; height:40px; border-radius:10px; background:rgba(0,134,146,.14); display:flex; align-items:center; justify-content:center; color:var(--px-teal-lt); margin-bottom:12px; }
.px-ki-icon.green { background:rgba(34,197,94,.12); color:#4ade80; }
.px-ki-super { font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:4px; }
.px-ki-title { font-size:15px; font-weight:800; color:#fff; letter-spacing:-.015em; margin-bottom:6px; }
.px-ki-desc { font-size:12px; color:rgba(255,255,255,.44); line-height:1.68; flex:1; }
.px-ki-link { margin-top:12px; font-size:10.5px; font-weight:700; color:var(--px-teal-lt); opacity:.75; }
a.px-ki-card:hover .px-ki-link { opacity:1; }
.px-ki-badge { margin-top:12px; padding:8px 10px; background:rgba(67,225,219,.06); border:1px solid rgba(67,225,219,.14); border-radius:7px; font-size:10px; font-weight:700; color:rgba(255,255,255,.6); }
.px-norm-row { display:flex; align-items:center; gap:7px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.18); border-radius:7px; padding:6px 10px; margin-top:8px; font-size:10px; font-weight:600; color:#4ade80; }

/* ══ PERFORMANCE ══ */
.px-perf-sec { background:#fff; padding:60px 0; border-top:1px solid var(--px-border); border-bottom:1px solid var(--px-border); }

/* ══ BOM ══ */
.px-bom-sec { background:var(--px-bg); padding:64px 0; }
.px-bom-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:32px; }
.px-bom-card { background:#fff; border-radius:30px; overflow:hidden; position:relative; transition:transform var(--px-tr); }
.px-bom-card:hover { transform:translateY(-3px); }
.px-bom-num { position:absolute; top:11px; left:11px; width:23px; height:23px; border-radius:50%; background:var(--px-ink); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; }
.px-bom-img { height:170px; background:linear-gradient(160deg,#021510,#091510 55%,#040c08); display:flex; align-items:center; justify-content:center; }
.px-bom-body { padding:14px 16px 18px; }
.px-bom-title { font-size:14.5px; font-weight:800; color:var(--px-ink); letter-spacing:-.02em; margin-bottom:10px; }
.px-bom-tbl { width:100%; border-collapse:collapse; }
.px-bom-tbl tr { border-bottom:1px solid var(--px-border); }
.px-bom-tbl tr:last-child { border-bottom:none; }
.px-bom-tbl td { padding:4px 0; font-size:11px; vertical-align:top; }
.px-bom-tbl td:first-child { color:var(--px-faint); font-size:10.5px; width:44%; padding-right:5px; }
.px-bom-tbl td:last-child { color:var(--px-ink); font-weight:600; }

/* ══ KONFIGURATOR ══ */
.px-kfg-wrap { background:#001214; padding:56px 0 88px; }
.px-kfg-main { max-width:1280px; margin:0 auto; padding:0 48px; display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }

/* ACCORDION — HORST-Architektur: max-height toggle, kein overflow auf parent */
.px-sec { background:var(--px-card); border-radius:30px; margin-bottom:12px; border:1.5px solid var(--px-border); transition:border-color var(--px-tr); }
.px-sec.is-open { border-color:rgba(0,134,146,.28); }
.px-sec-hd { padding:16px 20px; display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; transition:background var(--px-tr); border-radius:30px; }
.px-sec.is-open .px-sec-hd { border-radius:30px 30px 0 0; }
.px-sec-hd:hover { background:var(--px-card2); }
.px-sec-num { width:32px; height:32px; border-radius:50%; background:var(--px-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; transition:background var(--px-tr); }
.px-sec.is-open .px-sec-num { background:var(--px-teal); }
.px-sec-info { flex:1; min-width:0; }
.px-sec-title { font-size:15px; font-weight:700; color:var(--px-ink); }
.px-sec-sub { font-size:11px; color:var(--px-dim); margin-top:2px; }
.px-sec-badge { font-size:9px; background:var(--px-card2); color:var(--px-dim); border:1px solid var(--px-border); border-radius:5px; padding:2px 8px; white-space:nowrap; transition:all var(--px-tr); }
.px-sec.is-open .px-sec-badge { background:rgba(0,134,146,.1); color:var(--px-teal); border-color:rgba(0,134,146,.25); }
.px-sec-arr { width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--px-faint); flex-shrink:0; transition:transform var(--px-tr),color var(--px-tr); }
.px-sec-arr.open { transform:rotate(180deg); color:var(--px-teal); }
.px-divider { height:1px; background:var(--px-border); }

/* KEY: NO overflow:hidden on .px-sec — only on .px-sec-body */
.px-sec-body { max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.4,0,.2,1); }
.px-sec-body.open { max-height:16000px; }
.px-sec-inner { padding:8px 20px 24px; }

/* SUB HEADERS */
.px-sub-hd { display:flex; align-items:center; gap:10px; margin:16px 0 8px; padding-bottom:8px; border-bottom:1.5px solid var(--px-border); }
.px-sub-title { font-size:12.5px; font-weight:800; color:var(--px-ink); }
.px-sub-badge { font-size:8.5px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.04em; }
.px-sub-badge.now { background:rgba(34,197,94,.1); color:#16a34a; border:1px solid rgba(34,197,94,.22); }
.px-sub-badge.pre { background:rgba(245,158,11,.1); color:#b45309; border:1px solid rgba(245,158,11,.22); }
.px-sub-badge.y26 { background:rgba(245,158,11,.12); color:#b45309; border:1px solid rgba(245,158,11,.25); }
.px-sub-badge.y28 { background:rgba(59,130,246,.1); color:#2563eb; border:1px solid rgba(59,130,246,.2); }
.px-sub-desc { font-size:11px; color:var(--px-dim); line-height:1.55; margin-bottom:12px; }
.px-italic-claim { font-size:13.5px; font-weight:700; font-style:italic; color:var(--px-ink); letter-spacing:-.01em; margin-bottom:8px; }

/* TIP */
.px-tip { background:rgba(0,134,146,.05); border:1.5px solid rgba(0,134,146,.2); border-left:3px solid var(--px-teal); border-radius:9px; padding:9px 12px; font-size:11px; color:var(--px-dim); margin-bottom:14px; display:flex; gap:8px; align-items:flex-start; line-height:1.55; }
.px-tip svg { color:var(--px-teal); flex-shrink:0; margin-top:2px; }
.px-tip a { color:var(--px-teal); font-weight:600; text-decoration:none; }
.px-tip strong { color:var(--px-ink); }

/* ROBOT CARDS */
.px-r-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:9px; }
.px-r-card { background:#fff; border:2px solid var(--px-border); border-radius:20px; overflow:hidden; cursor:pointer; transition:border-color var(--px-tr),transform var(--px-tr); position:relative; }
.px-r-card:hover { border-color:var(--px-teal-lt); transform:translateY(-2px); }
.px-r-card.selected { border-color:var(--px-teal); }
.px-r-card.selected .px-r-chk { display:flex; }
.px-r-card.av-g { border-top:3px solid var(--px-green); }
.px-r-card.av-a { border-top:3px solid var(--px-amber); }
.px-r-card.av-b { border-top:3px solid var(--px-blue); }
.px-r-card.teaser { opacity:.72; cursor:default; }
.px-r-card.teaser:hover { transform:none; border-color:var(--px-border); }
.px-r-img { aspect-ratio:4/3; background:linear-gradient(160deg,#021510,#091510 55%,#040c08); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.px-r-img svg { position:relative; z-index:1; filter:drop-shadow(0 4px 12px rgba(67,225,219,.26)); }
.px-r-glow { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:72px; height:32px; background:radial-gradient(ellipse,rgba(67,225,219,.22) 0%,transparent 70%); pointer-events:none; animation:pxGl 3s ease-in-out infinite; }
@keyframes pxGl { 0%,100%{opacity:.3} 50%{opacity:.85} }
.px-r-av { position:absolute; top:7px; left:7px; z-index:3; display:flex; align-items:center; gap:4px; padding:2px 7px; border-radius:100px; font-size:7.5px; font-weight:700; backdrop-filter:blur(5px); }
.px-r-av.g { background:rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.4); color:#4ade80; }
.px-r-av.a { background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.4); color:#fbbf24; }
.px-r-av.b { background:rgba(59,130,246,.18); border:1px solid rgba(59,130,246,.4); color:#93c5fd; }
.px-r-av-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.px-r-chk { position:absolute; top:7px; right:7px; width:19px; height:19px; border-radius:50%; background:var(--px-teal); color:#fff; display:none; align-items:center; justify-content:center; font-size:9px; font-weight:700; z-index:3; }
.px-r-badge { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:3; font-size:7px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:4px; white-space:nowrap; }
.px-r-badge.lime { background:var(--px-lime); color:var(--px-ink); }
.px-r-badge.amber { background:rgba(245,158,11,.88); color:#000; }
.px-r-badge.blue { background:rgba(59,130,246,.88); color:#fff; }
.px-r-badge.ghost { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); }
.px-r-info { padding:10px 12px 12px; background:#fff; }
.px-r-sku { font-size:7.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--px-faint); margin-bottom:1px; }
.px-r-name { font-size:14px; font-weight:800; color:var(--px-ink); letter-spacing:-.025em; line-height:1.05; margin-bottom:4px; }
.px-r-sub { font-size:9px; color:var(--px-faint); margin-bottom:6px; }
.px-r-specs { display:grid; grid-template-columns:1fr 1fr; gap:3px 6px; margin-bottom:8px; }
.px-r-sl { font-size:7px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--px-faint); margin-bottom:1px; }
.px-r-sv { font-size:10.5px; font-weight:700; color:var(--px-ink); }
.px-r-cta { width:100%; padding:7px; border-radius:8px; font-size:10.5px; font-weight:700; font-family:var(--px-f); display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; border:1.5px solid; transition:all var(--px-tr); }
.px-r-cta.g { color:var(--px-green); background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.28); } .px-r-cta.g:hover { background:var(--px-green); color:#fff; }
.px-r-cta.a { color:var(--px-amber); background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.28); } .px-r-cta.a:hover { background:var(--px-amber); color:#fff; }
.px-r-cta.b { color:var(--px-blue); background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.28); } .px-r-cta.b:hover { background:var(--px-blue); color:#fff; }

/* SIDEBAR */
.px-sidebar { position:sticky; top:22px; background:var(--px-card); border-radius:30px; overflow:hidden; border:1.5px solid var(--px-border); }
.px-sb-hd { padding:13px 16px 10px; border-bottom:1px solid var(--px-border); background:var(--px-card2); display:flex; align-items:center; justify-content:space-between; }
.px-sb-title { font-size:13px; font-weight:700; color:var(--px-ink); display:flex; align-items:center; gap:7px; }
.px-sb-title svg { color:var(--px-teal); }
.px-sb-clr { font-size:10px; color:var(--px-faint); background:none; border:none; cursor:pointer; font-family:var(--px-f); transition:color var(--px-tr); }
.px-sb-clr:hover { color:#dc2626; }
.px-sb-empty { padding:24px 16px; text-align:center; color:var(--px-faint); font-size:11.5px; line-height:1.6; }
.px-sb-empty svg { margin:0 auto 9px; display:block; opacity:.2; }
.px-sum-sec { border-bottom:1px solid var(--px-border); }
.px-sum-title { padding:6px 15px 2px; font-size:7.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--px-faint); font-weight:600; }
.px-sum-row { padding:3px 15px 5px; display:flex; align-items:flex-start; justify-content:space-between; gap:7px; font-size:11px; }
.px-sum-name { color:var(--px-ink); font-weight:500; flex:1; line-height:1.4; }
.px-sum-sku { font-size:8px; color:var(--px-faint); margin-top:1px; }
.px-sb-const { border-bottom:1px solid var(--px-border); }
.px-const-row { padding:3px 15px; display:flex; align-items:center; gap:7px; font-size:11px; }
.px-cd { width:5px; height:5px; border-radius:50%; background:var(--px-teal); flex-shrink:0; }
.px-ck { color:var(--px-dim); flex:1; }
.px-cv { color:var(--px-teal); font-weight:700; font-size:10.5px; }
.px-sb-cta { background:linear-gradient(160deg,#000 0%,#011a14 60%,#0a1a05 100%); padding:13px 14px 16px; }
.px-btn-main { width:100%; background:var(--px-lime); color:var(--px-ink); border:none; border-radius:9px; padding:13px 16px; font-family:var(--px-f); font-size:14px; font-weight:700; cursor:pointer; transition:all var(--px-tr); display:flex; align-items:center; justify-content:center; gap:7px; }
.px-btn-main:hover { background:#eeff7a; transform:translateY(-1px); }
.px-btn-main:disabled { opacity:.3; cursor:not-allowed; transform:none; }

/* MODAL */
.px-modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:1001; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(10px); }
.px-modal-ov.open { display:flex; }
.px-modal { background:var(--px-card); border-radius:30px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; animation:pxMIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes pxMIn { from{opacity:0;transform:scale(.94) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }
.px-m-hd { padding:20px 24px 14px; border-bottom:1px solid var(--px-border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:var(--px-card2); border-radius:30px 30px 0 0; }
.px-m-title { font-size:19px; font-weight:800; letter-spacing:-.025em; color:var(--px-ink); }
.px-m-sub { font-size:12px; color:var(--px-dim); margin-top:2px; }
.px-m-close { width:26px; height:26px; border-radius:7px; background:var(--px-border); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--px-dim); flex-shrink:0; font-size:12px; transition:all var(--px-tr); }
.px-m-close:hover { background:var(--px-ink); color:#fff; }
.px-m-sum { padding:12px 24px; background:rgba(0,134,146,.05); border-bottom:1px solid var(--px-border); max-height:160px; overflow-y:auto; }
.px-m-sum-title { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--px-faint); margin-bottom:8px; }
.px-m-sum-item { font-size:12px; color:var(--px-dim); padding:2px 0; display:flex; align-items:center; gap:6px; }
.px-m-sum-item::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--px-teal); flex-shrink:0; }
.px-m-sum-item strong { color:var(--px-ink); font-weight:600; }
.px-m-form { padding:20px 24px 24px; }
.px-form-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:11px; }
.px-fg { display:flex; flex-direction:column; gap:4px; margin-bottom:11px; }
.px-fg label { font-size:10px; font-weight:600; color:var(--px-dim); text-transform:uppercase; letter-spacing:.08em; }
.px-fg input, .px-fg textarea, .px-select { background:var(--px-card2); border:1.5px solid var(--px-border); border-radius:9px; padding:10px 12px; font-family:var(--px-f); font-size:13px; color:var(--px-ink); transition:border-color var(--px-tr); outline:none; width:100%; }
.px-fg input:focus, .px-fg textarea:focus, .px-select:focus { border-color:var(--px-teal); background:#fff; }
.px-fg textarea { min-height:72px; resize:vertical; }
.px-form-note { font-size:10.5px; color:var(--px-faint); margin-top:11px; line-height:1.6; }
.px-form-note a { color:var(--px-teal); }
.px-btn-sub { width:100%; background:var(--px-lime); color:var(--px-ink); border:none; border-radius:9px; padding:13px 16px; font-family:var(--px-f); font-size:14px; font-weight:700; cursor:pointer; transition:all var(--px-tr); display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; }
.px-btn-sub:hover { background:#eeff7a; }
.px-btn-sub:disabled { opacity:.5; cursor:not-allowed; }
.px-success { padding:40px 24px; text-align:center; display:none; }
.px-success.show { display:block; }
.px-suc-icon { width:50px; height:50px; border-radius:50%; background:rgba(0,134,146,.1); border:2px solid var(--px-teal); display:flex; align-items:center; justify-content:center; margin:0 auto 13px; color:var(--px-teal); }
.px-suc-title { font-size:18px; font-weight:800; margin-bottom:7px; color:var(--px-ink); }
.px-suc-txt { font-size:12.5px; color:var(--px-dim); line-height:1.65; }

/* ══ AVAIL LEGEND ══ */
.px-avail-leg { display:flex; gap:20px; flex-wrap:wrap; margin:16px 0 28px; }
.px-avail-leg-item { display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(255,255,255,.5); }
.px-avail-dot { width:8px; height:8px; border-radius:50%; }
.px-kfg-header { margin-bottom:4px; }

/* ══ RESPONSIVE ══ */
@media(max-width:1100px) {
  .px-ki-grid { grid-template-columns:repeat(2,1fr); }
  .px-bom-grid { grid-template-columns:repeat(2,1fr); }
  .px-kfg-main { grid-template-columns:1fr; }
  .px-sidebar { position:static; }
  .px-inner, .px-kfg-main { padding-left:24px; padding-right:24px; }
}
@media(max-width:680px) {
  .px-stat-strip { grid-template-columns:1fr 1fr; }
  .px-ki-grid { grid-template-columns:1fr; }
  .px-bom-grid { grid-template-columns:1fr; }
  .px-r-grid { grid-template-columns:repeat(2,1fr); }
  .px-form-row { grid-template-columns:1fr; }
  .px-hero-inner { padding:60px 20px 48px; }
  .px-inner { padding-left:20px; padding-right:20px; }
}

}

/* ════════════════════════════════════════════════════════════
   FRUITCORE DESIGN SYSTEM — exakte Tokens aus child.css
   Eyebrow / Labels / Karten / Farben
════════════════════════════════════════════════════════════ */

/* ── EYEBROW / BREADCRUMB LABEL SYSTEM ──────────────────────
   Regel:
   - Weißer Hintergrund: | = grau (#aaaaaa), Text = schwarz (#1a1a1a), Akzent = teal (#008692)
   - Dunkler Hintergrund: | = lime (#dff469), Text = lime/white, Akzent = teal-lt (#43e1db)
   - Font: 15px, letter-spacing: 2px, uppercase, Macan
──────────────────────────────────────────────────────────── */

/* Weißer Hintergrund: perf-sec */
.px-wrap .px-perf-sec .px-eyebrow-left {
  font-size: 15px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  font-family: var(--px-f) !important;
  opacity: 1 !important;
}
.px-wrap .px-perf-sec .px-eyebrow-left::before {
  content: '|' !important;
  color: #aaaaaa !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  margin-right: 8px !important;
  opacity: 1 !important;
}

/* Dunkler Hintergrund: ki-sec, bom-sec, kfg-wrap */
.px-wrap .px-ki-sec .px-eyebrow-left,
.px-wrap .px-bom-sec .px-eyebrow-left,
.px-wrap .px-kfg-wrap .px-eyebrow-left {
  font-size: 15px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #dff469 !important;
  font-family: var(--px-f) !important;
  opacity: 1 !important;
}
.px-wrap .px-ki-sec .px-eyebrow-left::before,
.px-wrap .px-bom-sec .px-eyebrow-left::before,
.px-wrap .px-kfg-wrap .px-eyebrow-left::before {
  content: '|' !important;
  color: #dff469 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  margin-right: 8px !important;
  opacity: .6 !important;
}

/* ── H2 HEADINGS ─────────────────────────────────────────────
   Weißer HG: 28px, weight 500, schwarz
   Dunkler HG: 28px, weight 500, weiß
──────────────────────────────────────────────────────────── */
.px-wrap .px-perf-sec .px-sec-h2 {
  font-size: 28px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  font-family: var(--px-f) !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}
.px-wrap .px-ki-sec .px-sec-h2,
.px-wrap .px-bom-sec .px-sec-h2,
.px-wrap .px-kfg-wrap .px-sec-h2 {
  font-size: 28px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  font-family: var(--px-f) !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}

/* ── BODY TEXT ───────────────────────────────────────────────
   Weißer HG: 16px, #6b7280
   Dunkler HG: 16px, rgba(255,255,255,.6)
──────────────────────────────────────────────────────────── */
.px-wrap .px-perf-sec .px-sec-p {
  font-size: 16px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
}
.px-wrap .px-ki-sec .px-sec-p,
.px-wrap .px-bom-sec .px-sec-p,
.px-wrap .px-kfg-wrap .px-sec-p {
  font-size: 16px !important;
  color: rgba(255,255,255,.6) !important;
  line-height: 1.6 !important;
}

/* ── KI KARTEN (dunkler HG → weiße Karten, schwarze Schrift) ──
   fruitcore Regel: auf dunklem BG = weiße Karten
   Aber hier ist der Hintergrund der KI-Sektion dunkel (#001214)
   und die Karten sind leicht weiß-transparent — das ist correct.
   Fix: Karten weißer machen mit stärkerem Kontrast
──────────────────────────────────────────────────────────── */
.px-wrap .px-ki-card {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 30px !important;
}
.px-wrap a.px-ki-card:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(67,225,219,.35) !important;
}
.px-wrap .px-ki-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-family: var(--px-f) !important;
}
.px-wrap .px-ki-desc {
  font-size: 14px !important;
  color: rgba(255,255,255,.58) !important;
  line-height: 1.65 !important;
}
.px-wrap .px-ki-super {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
}
.px-wrap .px-ki-link {
  font-size: 13px !important;
  color: var(--px-teal-lt) !important;
  font-weight: 600 !important;
}

/* ── BOM KARTEN (dunkler HG → weiße Karten, schwarze Schrift) ──
   fruitcore: bei dunklem Seiten-BG = rein weiße Karten
   Border-Radius: 30px
──────────────────────────────────────────────────────────── */
.px-wrap .px-bom-card {
  background: #ffffff !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}
.px-wrap .px-bom-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-family: var(--px-f) !important;
  margin-bottom: 12px !important;
}
.px-wrap .px-bom-tbl td:first-child {
  font-size: 12px !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
}
.px-wrap .px-bom-tbl td:last-child {
  font-size: 12px !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

/* ── STAT STRIP KARTEN ────────────────────────────────────────
   fruitcore Stat-Karten: dunkles Grün-Gradient, weiße Schrift, 30px radius
──────────────────────────────────────────────────────────── */
.px-wrap .px-stat {
  background: radial-gradient(72.29% 123.63% at 33.47% 50.06%, #03666e 6.23%, #024247 43.95%, #000 93.83%) !important;
  border-right: 1px solid rgba(67,225,219,.15) !important;
  border-top: none !important;
}
.px-wrap .px-stat:first-child { border-radius: 0 0 0 30px !important; }
.px-wrap .px-stat:last-child { border-radius: 0 0 30px 0 !important; border-right: none !important; }
.px-wrap .px-stat-v {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -.02em !important;
  margin-bottom: 16px !important;
}
.px-wrap .px-stat-l {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
  font-weight: 400 !important;
  font-family: var(--px-f) !important;
}
.px-wrap .px-stat-chk {
  background: rgba(67,225,219,.2) !important;
  border-color: rgba(67,225,219,.5) !important;
}

/* ── H1 HERO ─────────────────────────────────────────────────
   Macan, sehr groß, weiß, bold
──────────────────────────────────────────────────────────── */
.px-wrap .px-h1 {
  font-size: clamp(52px, 6.5vw, 86px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -.035em !important;
  line-height: 1.0 !important;
  margin-bottom: 4px !important;
  font-family: var(--px-f) !important;
}
.px-wrap .px-eyebrow {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--px-teal-lt) !important;
  font-family: var(--px-f) !important;
  font-weight: 400 !important;
  opacity: .8 !important;
}
.px-wrap .px-eyebrow::before {
  content: '|' !important;
  color: var(--px-teal-lt) !important;
  opacity: .6 !important;
}

/* ── KONFIGURATOR SEKTIONS-KARTEN ──────────────────────────────
   Weiße Karten auf dunklem #001214 BG, 30px Radius
──────────────────────────────────────────────────────────── */
.px-wrap .px-sec {
  background: #ffffff !important;
  border-radius: 30px !important;
  border: 1.5px solid #e8eceb !important;
}
.px-wrap .px-sec.is-open {
  border-color: rgba(0,134,146,.3) !important;
}
.px-wrap .px-sec-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  font-family: var(--px-f) !important;
}
.px-wrap .px-sec-sub {
  font-size: 12px !important;
  color: #6b7280 !important;
}
.px-wrap .px-sec-badge {
  font-size: 10px !important;
  background: #f5f7f6 !important;
  color: #6b7280 !important;
  border: 1px solid #e8eceb !important;
}
.px-wrap .px-sec.is-open .px-sec-badge {
  background: rgba(0,134,146,.08) !important;
  color: #008692 !important;
  border-color: rgba(0,134,146,.2) !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────
   Weiße Karte, 30px Radius
──────────────────────────────────────────────────────────── */
.px-wrap .px-sidebar {
  background: #ffffff !important;
  border-radius: 30px !important;
  border: 1.5px solid #e8eceb !important;
}
.px-wrap .px-sb-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-family: var(--px-f) !important;
}
.px-wrap .px-ck { color: #6b7280 !important; font-size: 12px !important; }
.px-wrap .px-cv {
  color: #008692 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}
.px-wrap .px-sum-title {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  font-family: var(--px-f) !important;
}

/* ── TICKER ──────────────────────────────────────────────────
   Teal BG, weiß, uppercase, Macan
──────────────────────────────────────────────────────────── */
.px-wrap .px-ticker { background: #008692 !important; }
.px-wrap .px-t {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  font-family: var(--px-f) !important;
}

/* ── AVAIL LEGEND ────────────────────────────────────────────── */
.px-wrap .px-avail-leg-item {
  font-size: 13px !important;
  color: rgba(255,255,255,.6) !important;
}

/* ── ROBOT CARD INFO ─────────────────────────────────────────── */
.px-wrap .px-r-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  font-family: var(--px-f) !important;
}
.px-wrap .px-r-sku {
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: #9ca3af !important;
}
.px-wrap .px-r-sl {
  font-size: 8px !important;
  letter-spacing: 1px !important;
  color: #9ca3af !important;
}
.px-wrap .px-r-sv {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* ════════════════════════════════════════════════════════════
   HERO + ROTATING — final fix
════════════════════════════════════════════════════════════ */

/* Rotating: use px not em — fruitcore theme overrides font-size on container */
.px-wrap .px-rotate-wrap {
  overflow: hidden !important;
  height: 36px !important;
  margin-bottom: 28px !important;
}
.px-wrap .px-rotate {
  display: flex !important;
  flex-direction: column !important;
  animation: pxRotatePx 8s steps(1) infinite !important;
}
.px-wrap .px-rotate span {
  display: block !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,.62) !important;
  white-space: nowrap !important;
}
/* px-based keyframes — immune to theme font-size overrides */
@keyframes pxRotatePx {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(-36px); }
  50%  { transform: translateY(-72px); }
  75%  { transform: translateY(-108px); }
  100% { transform: translateY(0px); }
}

/* Hero: content top-aligned, stat strip at bottom */
.px-wrap .px-hero {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(135deg,
    #43e1db 0%,#1a6b65 15%,#011a14 30%,#000000 50%,
    #0a1a05 70%,#4a6e1a 85%,#dff469 100%) !important;
}
.px-wrap .px-hero-inner {
  flex: 0 0 auto !important;
  padding: 100px 48px 60px !important;
}
.px-wrap .px-stat-strip {
  margin-top: auto !important;
  width: 100% !important;
}

/* ── Stat strip kacheln: original design wiederhergestellt ──
   Gleicher Stil wie HORST600: großer Text, dunkel-grüner Hintergrund */
.px-wrap .px-stat {
  background: rgba(18,30,28,.92) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: none !important;
  border-left: none !important;
  padding: 18px 22px !important;
  border-radius: 0 !important;
}
.px-wrap .px-stat:first-child { border-radius: 0 !important; }
.px-wrap .px-stat:last-child { border-right: none !important; border-radius: 0 !important; }
.px-wrap .px-stat-v {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  margin-bottom: 20px !important;
}
.px-wrap .px-stat-l {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.32) !important;
}
.px-wrap .px-stat-chk {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(0,134,146,.22) !important;
  border: 1.5px solid rgba(67,225,219,.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--px-teal-lt) !important;
}

/* ── H1 Hero: groß und klar ── */
.px-wrap .px-h1 {
  font-size: clamp(52px,6.5vw,86px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -.035em !important;
  line-height: 1.0 !important;
  margin-bottom: 4px !important;
}

/* ── Alle CTAs / Buttons: border-radius 30px ── */
.px-wrap .px-btn-lime,
.px-wrap .px-btn-main,
.px-wrap .px-btn-sub,
.px-wrap .px-r-cta,
.px-wrap .px-m-close,
.px-wrap .px-sb-clr {
  border-radius: 30px !important;
}
/* Accordion CTA buttons */
.px-wrap .px-r-cta {
  border-radius: 30px !important;
}
/* Modal close */
.px-wrap .px-m-close {
  border-radius: 8px !important;
}

@media(max-width:768px) {
  
  .px-wrap .px-stat-strip { grid-template-columns: 1fr 1fr !important; }
}

/* ── More spacing: description text → robot cards ── */
.px-wrap .px-sub-desc {
  margin-bottom: 20px !important;
}
/* spacing between sub-hd and following text */
.px-wrap .px-sub-hd {
  margin-bottom: 10px !important;
}
/* spacing between tip and content below */
.px-wrap .px-tip {
  margin-bottom: 18px !important;
}

/* ════════════════════════════════════════════════════════════
   HERO PADDING — deutlich reduzieren
════════════════════════════════════════════════════════════ */

@media(max-width:768px) {
  
}

/* ════════════════════════════════════════════════════════════
   PERF-SEC EYEBROW — gleiche Größe wie andere Labels
════════════════════════════════════════════════════════════ */
.px-wrap .px-perf-sec .px-eyebrow-left {
  font-size: 15px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.px-wrap .px-perf-sec .px-eyebrow-left::before {
  content: '|' !important;
  color: #aaaaaa !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  margin-right: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   H1 HERO — Macan Stencil Semibold für P und O
   via CSS first-letter trick + font-variation
════════════════════════════════════════════════════════════ */
/* Load Macan Stencil if available — fruitcore hosts it */
@font-face {
  font-family: 'MacanStencil';
  src: local('Macan Stencil SemiBold'), local('Macan-StencilSemiBold');
  font-weight: 600;
  font-style: normal;
}
/* The P in Ion and O in One get stencil treatment via JS-injected spans */
.px-wrap .px-h1 .stencil {
  font-family: 'Macan Stencil', 'MacanStencil', 'Macan', var(--px-f) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* ════════════════════════════════════════════════════════════
   ALL BUTTONS — 30px radius
════════════════════════════════════════════════════════════ */
.px-wrap .px-btn-lime,
.px-wrap .px-btn-main,
.px-wrap .px-btn-sub,
.px-wrap .px-r-cta,
.px-wrap .px-pill {
  border-radius: 30px !important;
}

/* ════════════════════════════════════════════════════════════
   HERO LAYOUT — vertikal zentriert, mehr Einrückung links
   Nav endet bei ~90px, stat-strip bei ~884px → 794px Raum
   Inner-Höhe ~378px → padding-top = (794-378)/2 = 208px
════════════════════════════════════════════════════════════ */

@media(max-width:1100px) {
  
}
@media(max-width:768px) {
  
}

/* ══ HERO LAYOUT — definitive, single source of truth ══
   flex-direction:column, justify-content:center centers
   the inner block vertically between nav and stat-strip.
   padding-left/right gives left indent.
   No padding-top needed — flexbox handles vertical centering. */
.px-wrap .px-hero {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
.px-wrap .px-hero-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 100px 80px 40px 80px !important;
}
.px-wrap .px-stat-strip {
  flex-shrink: 0 !important;
}
@media(max-width:1100px) {
  .px-wrap .px-hero-inner { padding: 80px 48px 40px 48px !important; }
}
@media(max-width:768px) {
  .px-wrap .px-hero-inner { padding: 60px 24px 32px 24px !important; }
}

/* ── Divider nur bei offener Sektion sichtbar ── */
.px-wrap .px-divider {
  display: none !important;
}
.px-wrap .px-sec.is-open .px-divider {
  display: block !important;
}

/* ── Hero subtitle: 2 statische Zeilen ── */
.px-wrap .px-hero-subtitle {
  margin-bottom: 28px !important;
}
.px-wrap .px-sub-l1 {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}
.px-wrap .px-sub-l2 {
  font-size: clamp(13px, 1.4vw, 16px) !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,.42) !important;
  letter-spacing: .02em !important;
}
/* Remove old rotating styles that are no longer needed */
.px-wrap .px-rotate-wrap,
.px-wrap .px-rotate { display: none !important; }

/* ── Perf section: 3 feature points ── */
.px-wrap .px-perf-points {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.px-wrap .px-pp {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}
.px-wrap .px-pp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #008692;
  flex-shrink: 0;
  margin-top: 5px;
}
.px-wrap .px-pp-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.px-wrap .px-pp-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}

/* ── Robot card: erste zwei Zeilen uppercase ── */
.px-wrap .px-r-sku {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin-bottom: 2px !important;
}
.px-wrap .px-r-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

/* ── Robot card images from HubFS ── */
.px-wrap .px-r-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px !important;
  filter: drop-shadow(0 4px 16px rgba(67,225,219,.28)) !important;
}

/* ── Produktseite Link + unsichtbarer Platzhalter ──
   Beide nehmen gleich viel Platz ein → konsistente Kachelhöhe */
.px-wrap .px-r-lnk {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 18px !important;
  margin-bottom: 6px !important;
  color: var(--px-teal) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  transition: color var(--px-tr) !important;
}
.px-wrap .px-r-lnk:hover {
  color: var(--px-teal-lt) !important;
}
/* Platzhalter: gleiche Höhe, unsichtbar, nicht klickbar */
.px-wrap .px-r-lnk-ph {
  visibility: hidden !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── KI super label: immer 2-zeilig, gleiche Höhe ── */
.px-wrap .px-ki-super {
  min-height: 2.6em !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════════════
   HERO IMAGE — rechts, unten bündig mit ticker
════════════════════════════════════════════════════════════ */

/* Hero body: flex row, text links — bild rechts */
.px-wrap .px-hero {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}
.px-wrap .px-hero-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important; /* beides bündig unten */
  position: relative !important;
  overflow: hidden !important;
}

/* Text: links, vertikal zentriert */
.px-wrap .px-hero-inner {
  flex: 0 0 auto !important;
  width: 52% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 100px 48px 48px 80px !important;
  align-self: center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Bild: rechts, unten bündig */
.px-wrap .px-hero-img-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  position: relative !important;
  height: 100% !important;
  min-height: 400px !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}
.px-wrap .px-hero-img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-height: calc(100vh - 98px) !important; /* 98px = stat-strip height */
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.4)) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile: stack vertically */
@media(max-width: 900px) {
  .px-wrap .px-hero-body {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .px-wrap .px-hero-inner {
    width: 100% !important;
    padding: 80px 24px 32px 24px !important;
    align-self: auto !important;
  }
  .px-wrap .px-hero-img-wrap {
    height: 320px !important;
    min-height: 0 !important;
    padding: 0 24px !important;
    align-items: flex-end !important;
    margin-top: 32px !important;
  }
  .px-wrap .px-hero-img {
    height: 100% !important;
    max-height: 320px !important;
    width: auto !important;
  }
}
@media(max-width: 600px) {
  .px-wrap .px-hero-img-wrap {
    height: 240px !important;
    margin-top: 24px !important;
  }
  .px-wrap .px-hero-img {
    max-height: 240px !important;
  }
}

/* ── BOM card images ── */
.px-wrap .px-bom-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 16px !important;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.35)) !important;
}

/* ── BOM card images: cover mode, flush to edges ── */
.px-wrap .px-bom-img {
  height: 200px !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}
.px-wrap .px-bom-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  filter: none !important;
}

/* ── BOM img background white ── */
.px-wrap .px-bom-img {
  background: #ffffff !important;
}

/* ── Plexa One Go: Bild bündig links/rechts/unten ── */
.px-wrap #px-g3c .px-r-img {
  aspect-ratio: unset !important;
  height: 220px !important;
  position: relative !important;
  overflow: hidden !important;
}
.px-wrap #px-g3c .px-r-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  padding: 0 !important;
  filter: none !important;
}

/* ── Fließtext Breite: etwas breiter ── */
.px-wrap .px-perf-sec .px-sec-p,
.px-wrap .px-perf-sec .px-sec-h2,
.px-wrap .px-ki-sec .px-sec-p,
.px-wrap .px-ki-sec .px-sec-h2,
.px-wrap .px-bom-sec .px-sec-p {
  max-width: 860px !important;
}

/* ════════════════════════════════════════════════════════════
   IMAGE ZOOM POPUP
════════════════════════════════════════════════════════════ */

/* Lupen-Button auf der Karte */
.px-wrap .px-r-zoom {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  z-index: 4 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--px-tr), transform var(--px-tr) !important;
  padding: 0 !important;
}
.px-wrap .px-r-zoom:hover {
  background: var(--px-teal) !important;
  transform: scale(1.1) !important;
}

/* Overlay */
.px-wrap .px-zoom-ov {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(0,0,0,.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.px-wrap .px-zoom-ov.open {
  display: flex !important;
}

/* Panel */
.px-wrap .px-zoom-panel {
  position: relative !important;
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 30px !important;
  padding: 20px !important;
  max-width: 680px !important;
  width: 100% !important;
  animation: pxZoomIn .25s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes pxZoomIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}

/* Close button */
.px-wrap .px-zoom-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--px-tr) !important;
  padding: 0 !important;
}
.px-wrap .px-zoom-close:hover {
  background: rgba(255,255,255,.3) !important;
}

/* Image */
.px-wrap .px-zoom-img-wrap {
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 300px !important;
  max-height: 60vh !important;
}
.px-wrap .px-zoom-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 60vh !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Caption */
.px-wrap .px-zoom-cap {
  margin-top: 12px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.75) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* ── BOM number circle — IBM Plex Mono style ── */
.px-wrap .px-bom-num-wrap {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
}
.px-wrap .px-bom-num-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #1a1a1a !important;
  border: 1.5px solid #444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.px-wrap .px-bom-num-label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}

/* ── Card gaps: 30px like fruitcore standard ── */
.px-wrap .px-bom-grid {
  gap: 30px !important;
}
.px-wrap .px-ki-grid {
  gap: 30px !important;
}
.px-wrap .px-r-grid {
  gap: 12px !important;
}
/* Accordion sections gap */
.px-wrap .px-sec {
  margin-bottom: 16px !important;
}
/* Section padding — match fruitcore sections */
.px-wrap .px-ki-sec,
.px-wrap .px-bom-sec {
  padding: 80px 0 !important;
}
.px-wrap .px-perf-sec {
  padding: 64px 0 !important;
}

/* ── Robot card info: flex column so CTA sticks to bottom ── */
.px-wrap .px-r-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.px-wrap .px-r-info .px-r-cta {
  margin-top: auto !important;
}