/* "What is KNX?" info panel on the landing pages (owner 2026-11-04). Soft SBS style. All selectors start with html body: see the Elementor kit button rule. */

/* the words + info symbol in the hero text */
html body button.sbs-knxi-t{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit;white-space:nowrap;cursor:help;transition:none}
html body button.sbs-knxi-t:hover,html body button.sbs-knxi-t:focus,html body button.sbs-knxi-t:active{background:none;color:inherit;box-shadow:none;border:0}
html body button.sbs-knxi-t:focus-visible{outline:2px solid #e6c37a;outline-offset:3px;border-radius:4px}
html body .sbs-knxi-w{font-weight:600;color:#fff;text-decoration:underline dotted #e6c37a 2px;text-underline-offset:5px;transition:color .15s;animation:sbsKnxiGlow 2.8s ease-in-out .8s infinite}
html body button.sbs-knxi-t:hover .sbs-knxi-w,html body button.sbs-knxi-t[aria-expanded="true"] .sbs-knxi-w{color:#e6c37a}
html body .sbs-knxi-i{display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin-left:.35em;border-radius:50%;background:#c19031;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:.86em;font-style:italic;font-weight:700;line-height:1;vertical-align:.04em;transition:background .15s,transform .15s;position:relative;isolation:isolate}
html body button.sbs-knxi-t:hover .sbs-knxi-i,html body button.sbs-knxi-t[aria-expanded="true"] .sbs-knxi-i{background:#d4a548;transform:scale(1.1)}
/* icon pulse: opacity and transform only, so the browser does not repaint. Words: colour pulse, owner preferred it to an overlay (2026-11-04) */
html body .sbs-knxi-i::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:rgba(230,195,122,.75);opacity:0;pointer-events:none;animation:sbsKnxiPulse 2.8s ease-out .8s infinite}
@keyframes sbsKnxiGlow{0%,100%{color:#fff}45%{color:#f0d596}}
html.sbs-knxi-seen body .sbs-knxi-i::after,html.sbs-knxi-seen body .sbs-knxi-w{animation:none}
@keyframes sbsKnxiPulse{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}
html body .sbs-knxi-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* the panel */
html body .sbs-knxi-panel{--ink:#101828;--muted:#5d6675;--line:#e3e1dc;--soft:#faf7f0;--gold:#c19031;--gold-lt:#f3e8d2;position:fixed;left:16px;top:80px;z-index:1000001;box-sizing:border-box;width:min(910px,calc(100vw - 32px));max-height:calc(100vh - 92px);overflow:auto;overscroll-behavior:contain;padding:20px 26px 12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 60px rgba(16,24,40,.28);color:var(--ink);font-size:14.5px;line-height:1.5;text-align:left;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
html body .sbs-knxi-panel[hidden]{display:none!important}
html body .sbs-knxi-panel.on{opacity:1;transform:none}
html body .sbs-knxi-panel *{box-sizing:border-box}
html body button.sbs-knxi-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;box-shadow:none}
html body button.sbs-knxi-x:hover,html body button.sbs-knxi-x:focus{background:var(--soft);color:var(--ink);border-color:var(--gold)}
html body .sbs-knxi-panel p.sbs-knxi-eye{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
html body .sbs-knxi-panel h2.sbs-knxi-h{margin:0 40px 6px 0;font-family:inherit;font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
html body .sbs-knxi-panel h3.sbs-knxi-h3{margin:9px 0 5px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
html body .sbs-knxi-panel p.sbs-knxi-p{margin:0 0 8px;color:var(--muted);font-size:14.5px}
html body .sbs-knxi-panel p.sbs-knxi-p b{color:var(--ink);font-weight:600}
html body .sbs-knxi-panel p.sbs-knxi-p b.sbs-knxi-gold{color:var(--gold);font-weight:700}

html body .sbs-knxi-panel p.sbs-knxi-eye img.sbs-knxi-logo{display:inline-block;width:auto;max-width:none;height:18px;margin:0 0 0 3px;vertical-align:baseline;border-radius:0;box-shadow:none}

/* comparison */
html body table.sbs-knxi-table{width:100%;margin:0;border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff;font-size:13.5px;line-height:1.4}
html body .sbs-knxi-table th,html body .sbs-knxi-table td{padding:5px 12px;border:0;border-top:1px solid var(--line);background:none;color:var(--muted);font-weight:400;text-align:left;vertical-align:top}
html body .sbs-knxi-table thead th,html body .sbs-knxi-table thead td{border-top:0;color:var(--ink);font-weight:600;font-size:13.5px}
html body .sbs-knxi-table tbody th{color:var(--ink);font-weight:600}
html body .sbs-knxi-table .sbs-knxi-k{background:var(--soft);color:var(--ink)}
html body .sbs-knxi-table thead .sbs-knxi-k{background:var(--gold-lt);color:#7d5a14}

html body .sbs-knxi-table tbody td.sbs-knxi-k{position:relative;padding-left:30px}
html body .sbs-knxi-table tbody td.sbs-knxi-k::before{content:"";position:absolute;left:13px;top:8px;width:5px;height:10px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* closing */
html body .sbs-knxi-btns{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:8px}
html body .sbs-knxi-panel a.sbs-knxi-b{display:inline-block;padding:10px 18px;border:1px solid var(--gold);border-radius:8px;background:var(--gold);color:#fff;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;transition:filter .15s,background .15s}
html body .sbs-knxi-panel a.sbs-knxi-b:hover{filter:brightness(.94);color:#fff}
html body .sbs-knxi-panel a.sbs-knxi-b2{background:#fff;color:var(--ink)}
html body .sbs-knxi-panel a.sbs-knxi-b2:hover{background:var(--soft);color:var(--ink);filter:none}

/* small button while scrolling: bottom left, the right side holds the designer and cart buttons */
html body button.sbs-knxi-fab{position:fixed;left:20px;bottom:24px;z-index:9980;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 16px 9px 10px;border:1px solid #e3e1dc;border-radius:999px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.16);color:#101828;font-size:14px;font-weight:600;line-height:1.2;text-transform:none;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s,border-color .15s}
html body button.sbs-knxi-fab.on{opacity:1;transform:none;pointer-events:auto}
html body button.sbs-knxi-fab:hover,html body button.sbs-knxi-fab:focus{background:#fff;color:#101828;border-color:#c19031}
html body button.sbs-knxi-fab .sbs-knxi-i{margin:0;width:22px;height:22px;font-size:14px;vertical-align:0}

/* designer pages: always there, so only a few pulses (people work here for minutes) */
html body button.sbs-knxi-fab.sbs-knxi-solo .sbs-knxi-i::after{animation-iteration-count:4}
html body button.sbs-knxi-fab img.sbs-knxi-logo{display:inline-block;width:auto;max-width:none;height:17px;margin:0 0 0 2px;vertical-align:baseline;border-radius:0;box-shadow:none}

/* phones and small tablets: panel from below, tap only */
html body .sbs-knxi-back{position:fixed;inset:0;z-index:1000000;background:rgba(16,24,40,.45);opacity:0;transition:opacity .18s}
html body .sbs-knxi-back[hidden]{display:none!important}
html body .sbs-knxi-back.on{opacity:1}
html.sbs-knxi-lock,html.sbs-knxi-lock body{overflow:hidden!important}
@media (max-width:720px){
	html body .sbs-knxi-panel{left:0!important;top:auto!important;bottom:0;width:100%;max-height:96vh;max-height:96dvh;padding:16px 14px calc(10px + env(safe-area-inset-bottom));border:0;border-radius:18px 18px 0 0;transform:translateY(24px);font-size:13px;line-height:1.4}
	html body button.sbs-knxi-x{top:8px;right:8px}
	html body .sbs-knxi-panel p.sbs-knxi-eye{font-size:11px;margin-bottom:2px}
	html body .sbs-knxi-panel h2.sbs-knxi-h{margin:0 34px 6px 0;font-size:19px}
	html body .sbs-knxi-panel p.sbs-knxi-p{margin-bottom:6px;font-size:13px}
	html body .sbs-knxi-panel p.sbs-knxi-long{display:none}
	html body .sbs-knxi-panel h3.sbs-knxi-h3{margin:8px 0 5px;font-size:13.5px}
	html body table.sbs-knxi-table{display:block;font-size:12px;line-height:1.3}
	html body .sbs-knxi-table thead,html body .sbs-knxi-table tbody{display:block;width:100%}
	html body .sbs-knxi-table tr{display:grid;grid-template-columns:1fr 1fr;width:100%;border-top:1px solid var(--line)}
	html body .sbs-knxi-table thead tr{border-top:0}
	html body .sbs-knxi-table thead td{display:none}
	html body .sbs-knxi-table thead th,html body .sbs-knxi-table thead th.sbs-knxi-k{width:auto;padding:4px 9px;font-size:12px}
	html body .sbs-knxi-table th,html body .sbs-knxi-table td{border-top:0}
	html body .sbs-knxi-table tbody th{grid-column:1/-1;width:auto;padding:4px 9px 0;font-size:12px}
	html body .sbs-knxi-table tbody td,html body .sbs-knxi-table tbody td.sbs-knxi-k{width:auto;padding:1px 9px 4px;font-size:12px;background:none}
	html body .sbs-knxi-table tbody td.sbs-knxi-k{padding-left:24px}
	html body .sbs-knxi-table tbody td.sbs-knxi-k::before{left:10px;top:3px;width:4px;height:9px}
	html body .sbs-knxi-btns{align-items:stretch}
	html body .sbs-knxi-panel a.sbs-knxi-b{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 8px;font-size:13px;text-align:center}
	html body button.sbs-knxi-fab{left:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
	/* designer pages: i + logo only, the button floats over the option list (owner 2026-11-04) */
	html body button.sbs-knxi-fab.sbs-knxi-solo{gap:6px;padding:5px 10px 5px 5px}
	html body button.sbs-knxi-fab.sbs-knxi-solo .sbs-knxi-fabw{display:none}
	html body button.sbs-knxi-fab.sbs-knxi-solo img.sbs-knxi-logo{margin:0;vertical-align:middle}
}
@media (prefers-reduced-motion:reduce){
	html body .sbs-knxi-i::after,html body .sbs-knxi-w{animation:none}
	html body .sbs-knxi-panel,html body button.sbs-knxi-fab{transition:none}
}