/* QLines interactive components (qix). All rules are scoped under .qix so they never touch the rest of the site.
   Tokens: override any --qix-* variable on .qix (or a parent) to retheme. */
.qix{--qix-bg:#F3F6F5;--qix-surface:#FFFFFF;--qix-surface2:#E9EFEC;--qix-ink:#14212B;--qix-ink2:#4A5864;--qix-ink3:#7C8992;--qix-line:#D5DDD9;--qix-eos:#0E7C66;--qix-eos-soft:#DDF0E8;--qix-uc:#2160B8;--qix-uc-soft:#E1EBF8;--qix-warn:#A0600C;--qix-warn-soft:#FBEFD9;--qix-bad:#B3362B;--qix-bad-soft:#F8E1DD;--qix-ok:#2B7A37;--qix-ok-soft:#E0F0E2;--qix-gas:#8A9097;--qix-on:#FFFFFF;
--qix-font:inherit;--qix-display:inherit;
color:var(--qix-ink);font-family:var(--qix-font);font-size:16px;line-height:1.55;text-align:left}
.qix,.qix *,.qix *::before,.qix *::after{box-sizing:border-box}
/* Dark tokens. Applied when the site sets data-theme="dark" (or class "dark") on <html>, or, opt-in, follows the OS via .qix-auto-dark on the component or <html>. */
html[data-theme="dark"] .qix,html.dark .qix,.qix.qix-dark{--qix-bg:#0E161C;--qix-surface:#152029;--qix-surface2:#1C2933;--qix-ink:#E6ECEF;--qix-ink2:#A7B4BD;--qix-ink3:#7B8993;--qix-line:#293741;--qix-eos:#3DC39F;--qix-eos-soft:#123A31;--qix-uc:#73A6F0;--qix-uc-soft:#162F4D;--qix-warn:#E8A54A;--qix-warn-soft:#3A2B13;--qix-bad:#EE7C70;--qix-bad-soft:#3C1E1B;--qix-ok:#7CC987;--qix-ok-soft:#1A3420;--qix-gas:#8E979E;--qix-on:#0E161C}
@media (prefers-color-scheme:dark){html.qix-auto-dark:not([data-theme="light"]) .qix,.qix.qix-auto-dark{--qix-bg:#0E161C;--qix-surface:#152029;--qix-surface2:#1C2933;--qix-ink:#E6ECEF;--qix-ink2:#A7B4BD;--qix-ink3:#7B8993;--qix-line:#293741;--qix-eos:#3DC39F;--qix-eos-soft:#123A31;--qix-uc:#73A6F0;--qix-uc-soft:#162F4D;--qix-warn:#E8A54A;--qix-warn-soft:#3A2B13;--qix-bad:#EE7C70;--qix-bad-soft:#3C1E1B;--qix-ok:#7CC987;--qix-ok-soft:#1A3420;--qix-gas:#8E979E;--qix-on:#0E161C}}
/* UtilityControl accent: components with .qix-uc use blue for primary buttons and sliders. */
.qix.qix-uc .btn.primary{background:var(--qix-uc);border-color:var(--qix-uc);color:var(--qix-on)}
.qix.qix-uc input[type=range]{accent-color:var(--qix-uc)}
.qix p{margin-top:0}
.qix .panel{background:var(--qix-surface);border:1px solid var(--qix-line);border-radius:14px;padding:20px}
.qix .btn{font:inherit;font-size:15px;font-weight:500;line-height:1.3;color:var(--qix-ink);background:var(--qix-surface);border:1px solid var(--qix-line);border-radius:8px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;text-transform:none;letter-spacing:normal;box-shadow:none;margin:0}
.qix .btn:hover{border-color:var(--qix-ink3)}
.qix .btn.primary{background:var(--qix-eos);border-color:var(--qix-eos);color:var(--qix-on)}
.qix .btn.primary.ucb{background:var(--qix-uc);border-color:var(--qix-uc);color:var(--qix-on)}
.qix .chips{display:flex;flex-wrap:wrap;gap:8px}
.qix .chip{font:inherit;font-size:14px;line-height:1.3;color:var(--qix-ink);background:var(--qix-surface);border:1px solid var(--qix-line);border-radius:999px;padding:6px 13px;cursor:pointer;margin:0;text-transform:none}
.qix .chip:hover{border-color:var(--qix-ink3)}
.qix .chip[aria-pressed="true"]{background:var(--qix-ink);color:var(--qix-surface);border-color:var(--qix-ink)}
.qix :focus-visible{outline:2px solid var(--qix-uc);outline-offset:2px}
.qix .muted{color:var(--qix-ink3)}
.qix .small{font-size:13px}
.qix input[type=range]{width:100%;accent-color:var(--qix-eos)}
.qix input[type=number],.qix input[type=text],.qix select{font:inherit;color:var(--qix-ink);background:var(--qix-surface);border:1px solid var(--qix-line);border-radius:8px;padding:8px 10px;max-width:100%;height:auto}
.qix .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.qix .scroll-x{overflow-x:auto}
.qix svg{max-width:100%}
.qix svg text{font-family:var(--qix-font)}
.qix .err{color:var(--qix-bad);font-size:13px;margin-top:6px;min-height:1.2em}
.qix .cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.qix .stat{background:var(--qix-surface2);border-radius:10px;padding:12px 14px}
.qix .stat .k{font-size:13px;color:var(--qix-ink2)}
.qix .stat .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.qix .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.qix .title{font-family:var(--qix-display);font-weight:700;font-size:24px;margin:0 0 10px;line-height:1.2}
.qix #flow{width:100%;height:auto;display:block;min-width:620px}
.qix #flow .node{transition:opacity .25s}
.qix #flow .node.dim{opacity:.28}
.qix #flow .src{cursor:pointer}
.qix #flow .box{fill:var(--qix-surface);stroke:var(--qix-line);stroke-width:1.2}
.qix #flow .src:hover .box,.qix #flow .src.sel .box{stroke:var(--qix-ink);stroke-width:1.6}
.qix #flow .eosbox{fill:var(--qix-eos-soft)}
.qix #flow .ucbox{fill:var(--qix-uc-soft)}
.qix #flow .pbox{fill:var(--qix-surface)}
.qix #flow .hubbox{fill:var(--qix-ink)}
.qix #flow .hubt{fill:var(--qix-surface);font-family:var(--qix-display);font-size:20px;font-weight:700}
.qix #flow path.ln{fill:none;stroke:var(--qix-line);stroke-width:2;transition:stroke .25s,opacity .25s}
.qix #flow path.ln.on{stroke:var(--qix-ink3)}
.qix #flow path.ln.off{opacity:.3}
.qix #flow .lbl{fill:var(--qix-ink);font-size:14px;font-weight:500}
.qix #flow .sub{fill:var(--qix-ink2);font-size:12px}
.qix #flow .eost{fill:var(--qix-eos);font-family:var(--qix-display);font-size:17px;font-weight:700}
.qix #flow .uct{fill:var(--qix-uc);font-family:var(--qix-display);font-size:17px;font-weight:700}
.qix .flowcap{margin-top:12px;color:var(--qix-ink2);min-height:3em;max-width:70ch}
.qix .scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:36px}
.qix .sc-panel{position:sticky;top:var(--qix-sticky-top,80px);align-self:start}
.qix .step{min-height:44vh;padding:12px 0;opacity:.4;transition:opacity .3s;cursor:pointer}
.qix .step.on{opacity:1}
.qix .step .n{font-size:13px;font-weight:600;color:var(--qix-eos)}
.qix .step h3{font-family:var(--qix-display);font-weight:700;font-size:24px;margin:2px 0 6px;letter-spacing:-.01em}
.qix .step p{color:var(--qix-ink2);margin:0;max-width:42ch}
.qix #scSvg{width:100%;height:auto;display:block}
.qix #scSvg .t{fill:var(--qix-ink);font-size:13px}
.qix #scSvg .ts{fill:var(--qix-ink2);font-size:11.5px}
.qix #scInner{transition:opacity .2s}
.qix .house svg{width:100%;height:auto;display:block}
.qix .wall{fill:var(--qix-surface2);stroke:var(--qix-ink2);stroke-width:1.5}
.qix .roof{fill:var(--qix-surface);stroke:var(--qix-ink2);stroke-width:1.5}
.qix .win{fill:var(--qix-surface);stroke:var(--qix-ink3);stroke-width:1.2}
.qix .car{fill:var(--qix-surface);stroke:var(--qix-ink3);stroke-width:1.5}
.qix .st{fill:none;stroke:var(--qix-ink2);stroke-width:1.5}
.qix .ic{fill:none;stroke:var(--qix-ink2);stroke-width:1.5;stroke-linecap:round}
.qix .ic2{fill:var(--qix-ink3)}
.qix .dev{cursor:pointer;outline:none}
.qix .dev .b{fill:var(--qix-surface);stroke:var(--qix-ink2);stroke-width:1.5;transition:fill .2s,stroke .2s}
.qix .dev:hover .b,.qix .dev:focus-visible .b,.qix .dev.sel .b{fill:var(--qix-eos-soft);stroke:var(--qix-eos);stroke-width:2.4}
.qix .dev-s .b{fill:var(--qix-eos-soft);stroke:var(--qix-eos);stroke-width:1.8}
.qix .proto{display:inline-block;font-size:13px;font-weight:600;padding:3px 9px;border-radius:6px;background:var(--qix-eos-soft);color:var(--qix-eos);margin:0 6px 6px 0}
.qix table.kv{width:100%;border-collapse:collapse;font-size:14px}
.qix .kv td{padding:7px 0;border-bottom:1px solid var(--qix-line)}
.qix .kv td:last-child{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.qix .sl{display:flex;align-items:center;gap:12px}
.qix .sl label{font-size:14px;color:var(--qix-ink2);min-width:130px}
.qix .sl .v{font-size:14px;font-weight:600;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.qix .sc-row{margin:0 0 16px}
.qix .sc-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;margin-bottom:5px}
.qix .trk{position:relative;height:24px;background:var(--qix-surface2);border-radius:5px}
.qix .bar{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transition:width .25s}
.qix .wh{position:absolute;top:11px;height:2px;background:var(--qix-ink2);transition:left .25s,width .25s}
.qix .wh::before,.qix .wh::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:var(--qix-ink2)}
.qix .wh::before{left:0}
.qix .wh::after{right:0}
.qix .best{font-size:12px;font-weight:600;background:var(--qix-ok-soft);color:var(--qix-ok);padding:2px 8px;border-radius:6px;margin-left:8px}
.qix table.fleet{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.qix .fleet th{text-align:left;font-weight:500;color:var(--qix-ink2);padding:8px 10px;border-bottom:1px solid var(--qix-line)}
.qix .fleet td{padding:9px 10px;border-bottom:1px solid var(--qix-line)}
.qix .fleet tr.r{cursor:pointer}
.qix .fleet tr.r:hover td{background:var(--qix-surface2)}
.qix .fleet tr.sel td{background:var(--qix-eos-soft)}
.qix .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.qix .log{list-style:none;margin:0;padding:0;font-size:13px;font-variant-numeric:tabular-nums}
.qix .log li{padding:6px 0;border-bottom:1px solid var(--qix-line);display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;margin:0}
.qix .res{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.qix .res .stat .v{font-size:18px}
.qix .chat{display:flex;flex-direction:column;gap:10px;min-height:220px}
.qix .bub{max-width:82%;padding:10px 14px;border-radius:14px;font-size:15px}
.qix .bub.u{align-self:flex-end;background:var(--qix-uc);color:var(--qix-on);border-bottom-right-radius:4px}
.qix .bub.a{align-self:flex-start;background:var(--qix-surface2);border-bottom-left-radius:4px}
.qix .bill .ln{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--qix-line);font-size:14px}
.qix .bill .ln>span:first-child{color:var(--qix-ink2)}
.qix .fd{border-radius:4px;padding:1px 5px;transition:background .3s,color .3s}
.qix .fd.on{background:var(--qix-uc-soft);color:var(--qix-uc);font-weight:600}
.qix .cf{font-size:12px;color:var(--qix-ink3);margin-left:6px;display:inline-block;min-width:32px;text-align:right}
.qix .alert{padding:12px 14px;border-radius:10px;font-size:14px}
.qix .alert.warn{background:var(--qix-warn-soft);color:var(--qix-warn)}
.qix .alert.ok{background:var(--qix-ok-soft);color:var(--qix-ok)}
.qix .alert.bad{background:var(--qix-bad-soft);color:var(--qix-bad)}
.qix .alert.idle{background:var(--qix-surface2);color:var(--qix-ink3)}
.qix .handle{cursor:ns-resize;touch-action:none}
.qix .sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.qix .sw>div{border:1px solid var(--qix-line);border-radius:12px;overflow:hidden;background:var(--qix-surface)}
.qix .sw i{display:block;height:64px}
.qix .sw p{margin:0;padding:10px 12px;font-size:13px;color:var(--qix-ink2)}
.qix .sw p b{display:block;color:var(--qix-ink);font-size:14px}
@media (max-width:760px){.qix .scrolly{grid-template-columns:1fr;gap:12px}.qix .sc-panel{order:-1;z-index:2;background:var(--qix-bg);padding:6px 0 10px}.qix .step{min-height:34vh}}
@media (prefers-reduced-motion:reduce){.qix *{transition:none!important;animation:none!important}}

/* Inline styles of the partials, moved here (the site forbids style attributes in page HTML). !important keeps the precedence an inline style had. Generated 2026-10-31. */
.qix .qs1{display:flex !important;justify-content:space-between !important;align-items:center !important;margin-bottom:6px !important}
.qix .qs2{border:0 !important}
.qix .qs3{margin:8px 0 14px !important}
.qix .qs4{background:var(--qix-eos) !important}
.qix .qs5{background:var(--qix-uc) !important}
.qix .qs6{background:var(--qix-ink) !important}
.qix .qs7{background:var(--qix-surface2) !important}
.qix .qs8{background:var(--qix-warn) !important}
.qix .qs9{background:var(--qix-bad) !important}
.qix .qs10{display:flex !important;gap:8px !important;margin-top:12px !important}
.qix .qs11{flex:1 !important}
.qix .qs12{margin:0 0 8px !important}
.qix .qs13{margin-top:8px !important}
.qix .qs14{margin-top:4px !important}
.qix .qs15{font-size:15px !important;font-weight:600 !important;margin:22px 0 6px !important}
.qix .qs16{padding:14px !important}
.qix .qs17{width:100% !important;min-width:480px !important;height:auto !important;display:block !important;touch-action:pan-x !important}
.qix .qs18{margin-top:12px !important}
.qix .qs19{margin-bottom:12px !important}
.qix .qs20{width:100% !important;min-width:480px !important;height:auto !important;display:block !important}
.qix .qs21{margin:10px 0 0 !important}
.qix .qs22{width:100% !important;height:auto !important;display:block !important}
.qix .qs23{margin-bottom:14px !important}
.qix .qs24{padding:12px !important}
.qix .qs25{margin:0 0 12px !important}
.qix .qs26{display:flex !important;gap:18px !important;flex-wrap:wrap !important;font-size:13px !important;color:var(--qix-ink2) !important;margin:8px 0 12px !important}
.qix .qs27{background:var(--qix-eos-soft) !important;border:1px solid var(--qix-eos) !important}
.qix .qs28{margin:0 0 6px !important}
.qix .qs29{margin-bottom:16px !important}
.qix .qs30{margin:0 !important}
.qix .qs31{text-align:center !important}
.qix .qs32{width:100% !important;max-width:240px !important;height:auto !important}
.qix .qs33{margin:8px 0 0 !important;font-weight:500 !important}
.qix .qs34{margin:6px 0 4px !important}
.qix .qs35{width:100% !important}
.qix .qs36{width:100% !important;margin:6px 0 14px !important}
.qix .qs37{gap:6px 28px !important;margin-bottom:22px !important}

/* Adaptations for the site (2026-10-31): longer German and Spanish words must wrap inside their boxes instead of crossing the border. */
.qix label,.qix .chip,.qix .btn,.qix .kv td,.qix .panel,.qix .step,.qix .small{overflow-wrap:break-word}      /* only a word that does not fit is broken */
.qix .sl label{flex:0 1 170px;min-width:120px}

/* Phones: the portfolio diagram section (heading and sketch) is not shown (owner, 2026-11-01). */
@media (max-width:700px){ #portfolio-flow{display:none} }

/* labels at the edge of a chart may use the padding of their panel (qix-fit.js allows 10 px) */
.qix svg{overflow:visible}

/* Charts on phones fit the screen instead of scrolling sideways (labels keep a readable size, see qix-fit.js). */
@media (max-width:700px){ .qix .scroll-x svg,.qix svg.fit-w{min-width:0 !important;max-width:100%} }