/* Syntac: interaktive Demo, Texte und Bedienung bleiben native HTML. */
.landing-page{--demo-light:0.55;isolation:isolate}
.ambient-light{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 75% 25%,#f8872621,transparent 58%),radial-gradient(ellipse at 15% 70%,#9f4b140d,transparent 50%);opacity:var(--demo-light);transition:opacity .6s ease}
.experience-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.landing-page .cockpit-stage{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;min-height:540px;margin-top:10px;isolation:isolate}
.cockpit-scene{position:relative;height:360px;width:100%;border:1px solid #4b3b2c;border-radius:24px 24px 0 0;background:radial-gradient(ellipse at center,#33281e99,#15191c);overflow:hidden}
.scene-label{position:absolute;bottom:16px;left:22px;z-index:6;display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.1em;font-weight:600;color:#dfbc9d}
.scene-label small{padding:4px 7px;border:1px solid #5b4939;border-radius:4px;letter-spacing:.05em;font-size:9px;color:#a2aeb1}
.cockpit-fallback{position:absolute;inset:25px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;text-align:center}
.cockpit-fallback strong{font-size:30px;line-height:1.2}.fallback-modules{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.fallback-modules span{padding:12px;border:1px solid #634b36;border-radius:8px;font-size:13px;color:#ffc18b}
.webgl-ready .cockpit-fallback{visibility:hidden}
.cockpit-controls{position:relative;z-index:6;padding:22px 24px;border:1px solid #4b3b2c;border-top:0;border-radius:0 0 24px 24px;background:#1b2024;display:grid;gap:16px;margin:0;font-size:14px}
.demo-control{display:grid;grid-template-columns:1fr 48px 36px;gap:12px;align-items:center;min-width:0}.demo-control label{font-weight:500;color:#dde3e3;margin:0;font-size:14px}.demo-state{font-size:12px;color:#e1b48b;text-align:right}
.cockpit-controls input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:48px;height:28px;min-width:48px;max-width:48px;max-height:28px;border:0;border-radius:100px;background:#55585d;padding:0;margin:0;cursor:pointer;flex:none}
.cockpit-controls input[type=checkbox]:before{content:none}.cockpit-controls input[type=checkbox]:after{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:white;left:2px;top:2px;transition:transform .22s ease}
.cockpit-controls input[type=checkbox]:checked{background:#ff963d}.cockpit-controls input[type=checkbox]:checked:after{transform:translateX(20px)}
.demo-range{grid-template-columns:1fr minmax(80px,150px) 42px}.demo-range input{width:100%;height:28px;accent-color:#ff963d;cursor:pointer;margin:0}.demo-range output{font-size:12px;text-align:right;color:#ffc18b}
.demo-caption{font-size:11px;color:#9eafb7;line-height:1.6;margin:0;grid-column:1/-1}.demo-reset{justify-self:start;padding:0;background:none;border:0;color:#e8b085;font:inherit;font-size:12px;cursor:pointer;min-height:28px}.demo-reset:hover{text-decoration:underline}
.cockpit-controls :focus-visible{outline:2px solid #ffbb81;outline-offset:4px}
.feature-card{position:relative;overflow:hidden;isolation:isolate}.feature-card>*{position:relative;z-index:1}.feature-card:after{content:'';position:absolute;inset:0;border:1px solid #ff963d55;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .3s}.feature-card:hover:after{opacity:1}.landing-button{position:relative;will-change:auto;transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0);transition:background .2s,border-color .2s}
.faq-sign:before,.faq-sign:after{display:none}.faq-morph{display:block;width:20px;height:20px;fill:none;stroke:#ffb372;stroke-width:1.7;stroke-linecap:round}.landing-faq .faq-answer{animation:none}
.landing-page.has-energy .flow-packet{display:none}.landing-page.has-energy .flow-traces,.landing-page.has-energy .flow-ring{animation:none}.energy-pulse{pointer-events:none}.energy-pulse circle{fill:#ffc088}.energy-pulse .energy-halo{fill:#ff963d;opacity:.16}
@media(max-width:600px){.landing-page .cockpit-stage{min-height:0;margin-top:24px}.cockpit-scene{height:290px}.cockpit-controls{padding:20px 18px}.demo-range{grid-template-columns:1fr minmax(65px,110px) 42px}.demo-control label{font-size:13px}.cockpit-fallback strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.experience-canvas{display:none}.landing-button{transform:none!important}.cockpit-controls input[type=checkbox]:after,.ambient-light{transition:none}.webgl-ready .cockpit-fallback{visibility:visible}}
/* 0.3.9: ein einheitliches 3D-Labor, bedienbare Netzwerk-Knoten und No-Code-Demo. */
.landing-page .cockpit-stage{align-items:stretch;width:100%;gap:0}
.landing-page .cockpit-controls{width:100%;max-width:none;box-sizing:border-box;display:grid;grid-template-columns:1fr;gap:18px;padding:24px}
.landing-page .cockpit-scene{height:390px;touch-action:none;cursor:grab;flex-shrink:0;user-select:none}.landing-page .cockpit-scene:active,.landing-page .cockpit-scene.is-dragging{cursor:grabbing}
.scene-label{bottom:22px;left:20px;font-size:10px;letter-spacing:.06em;gap:8px}.scene-label small{font-size:8px}
.scene-actions{position:absolute;z-index:6;top:16px;left:16px;right:16px;display:flex;gap:8px;flex-wrap:wrap}
.scene-actions button{font:inherit;font-size:12px;line-height:1.4;padding:10px 12px;min-height:38px;border:1px solid #66503f;border-radius:10px;background:#192227e8;color:#c2ced4}
.scene-actions button[aria-pressed=true]{border-color:#ff963d;color:#ffc18b;background:#392a20}
.landing-page .demo-control{grid-template-columns:1fr 48px 28px;gap:8px}.landing-page .demo-control label{font-size:12px;line-height:1.5}.landing-page .demo-range{grid-template-columns:minmax(0,1fr) 32px}.demo-range label{grid-column:1/-1}
.landing-page .demo-range input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:24px;padding:0;border:0;background:transparent;box-shadow:none;color:#ff963d;outline-offset:3px}
.demo-range input[type=range]::-webkit-slider-runnable-track{height:4px;background:#6d4e36;border-radius:100px}.demo-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#ffad66;border:2px solid #ffdbc0;border-radius:50%;margin-top:-6px;box-shadow:0 0 12px #ff963d33}
.demo-range input[type=range]::-moz-range-track{height:4px;background:#6d4e36;border-radius:100px}.demo-range input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#ffad66;border:2px solid #ffdbc0;border-radius:50%}
.demo-caption{margin:0!important}.demo-reset{grid-column:1/-1;justify-self:start}.cockpit-fallback img{object-fit:contain}.cockpit-fallback strong{font-size:21px}
.demo-module-console{grid-column:1/-1}.demo-module-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;color:#cbd5d8;font-size:12px}.demo-module-heading output{color:#ffc18b;font-variant-numeric:tabular-nums}.demo-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.demo-module-grid button{display:flex;align-items:center;gap:8px;min-width:0;min-height:46px;padding:9px 11px;border:1px solid #465158;border-radius:10px;background:#151e23;color:#a9b5ba;font:inherit;font-size:11px;text-align:left}.demo-module-grid button b{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:7px;background:#252f34;color:#91a0a6;font-size:9px}.demo-module-grid button span{overflow:hidden;text-overflow:ellipsis}.demo-module-grid button[aria-pressed=true]{border-color:#ff963d;background:#35271e;color:#ffe2c8;box-shadow:0 0 0 1px #ff963d44,0 10px 25px #0002}.demo-module-grid button[aria-pressed=true] b{background:#ff963d;color:#20150c}.demo-module-grid button:hover{border-color:#ffb473;color:#fff}.demo-script-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:20px;border:1px solid #3f4c53;border-radius:14px;background:linear-gradient(130deg,#172127,#141b20);min-width:0}.demo-script-detail>div{min-width:0}.demo-script-detail #demo-script-kicker{display:block;color:#ffae6b;font-size:9px;font-weight:700;letter-spacing:.12em;margin-bottom:5px}.demo-script-detail h3{font-size:22px;letter-spacing:-.02em;margin:0 0 7px}.demo-script-detail p{font-size:12px;line-height:1.6;margin:0;color:#a7b5ba}.demo-script-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.demo-script-tags span{padding:5px 8px;border:1px solid #5b4a3b;border-radius:6px;background:#ff963d08;color:#d8b491;font-size:9px}.demo-script-detail .landing-button{font-size:10px;min-height:42px;padding:10px 13px;white-space:nowrap}
.network-node-wrap{width:100%;height:100%;padding:2px}.network-node{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;font:inherit;font-size:13px;font-weight:550;line-height:1.35;color:#dfe7e9;border:1px solid #49545b;border-radius:14px;background:#1b252a;transition:border-color .2s,background .2s;cursor:pointer;padding:10px 8px;white-space:normal}
.network-node:hover,.network-node.node-preview{border-color:#ffb675;color:#ffe2c7;background:#33271f}.network-node[aria-pressed=true]{border-color:#ff963d;background:#3a2c21;color:#ffc48f}.network-node:focus-visible{outline:3px solid #ff963d;outline-offset:-4px}.node-dot{width:6px;height:6px;flex:none;background:#ff963d;border-radius:50%}.energy-pulse.muted{opacity:.12!important}
.module-inspector{min-width:0;padding:28px}.module-inspector h3{font-size:clamp(26px,3vw,36px)}.module-inspector #inspector-description{font-size:15px;margin:0 0 18px}.inspector-tags{display:flex;gap:8px;flex-wrap:wrap}.inspector-tags span{font-size:12px;padding:7px 10px;border:1px solid #68503c;background:#ff963d08;border-radius:8px;color:#dfc1a7}
.inspector-mini{display:flex;align-items:center;gap:12px;margin:24px 0;padding:16px;border:1px solid #37434a;border-radius:12px;background:#151e24}.inspector-mini img{width:58px;height:58px}.inspector-mini i{height:1px;flex:1;background:linear-gradient(90deg,#ff963d,#855332)}.inspector-mini span{font-size:13px;padding:8px;border:1px solid #6a503c;border-radius:7px}.inspector-status{font-size:12px!important;color:#d7b08e!important;margin:0 0 15px!important}.module-inspector .landing-button{font-size:12px;width:100%;white-space:normal}.inspector-hub{display:block;margin-top:14px;color:#c0cdd2;font-size:12px;text-align:center}
.feature-try{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;width:100%;font:inherit;font-size:13px;font-weight:550;line-height:1.4;padding:13px 0 0;margin-top:18px;color:#ffc18b;border:0;border-top:1px solid #584638;background:none;cursor:pointer}.feature-try:hover,.feature-try.preview-active{color:#fff0e3}
.landing-page .feature-card{min-height:250px;display:flex;flex-direction:column}.feature-card .feature-top{margin-bottom:18px}.feature-card>p:last-of-type{margin-bottom:0}.feature-card .feature-try{margin-top:auto;padding-top:18px}.feature-card h3{font-size:25px}.feature-card .card-eyebrow{font-size:11px;margin-bottom:9px}
.workflow-preview{margin-top:22px;padding:28px}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.preview-heading h3{font-size:25px}.preview-heading .landing-eyebrow{font-size:10px;margin-bottom:8px}.preview-chip{font-size:11px;border:1px solid #6c513c;border-radius:7px;padding:6px 10px;color:#dfb391}.preview-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.preview-tabs button{min-height:40px;padding:9px 16px;border:1px solid #48545b;border-radius:9px;background:#172027;color:#b9c5ca;font:inherit;font-size:13px}.preview-tabs button[aria-selected=true]{border-color:#ff963d;background:#3e2b1d;color:#ffc18b}
.preview-panel[hidden]{display:none!important}.preview-panel{min-height:0;padding:2px 0 4px;animation:preview-panel-in .24s ease}.preview-modules,.preview-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.preview-modules button{padding:22px;border:1px solid #4f5b61;border-radius:12px;background:#172329;color:#edf1f2;text-align:left;font:inherit;font-size:17px;line-height:1.4}.preview-modules button:hover{border-color:#ff963d}.preview-modules span{display:block;color:#ffc18b;font-size:12px;margin-top:12px}
.preview-settings>label,.preview-number-setting{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #3f4d55;border-radius:12px;padding:20px;background:#162127;color:#dce5e8;font-size:15px}.preview-number-setting>label{border:0;padding:0;background:none}.preview-stepper{display:grid;grid-template-columns:38px 76px 38px;border:1px solid #5c6870;border-radius:10px;overflow:hidden;background:#10191e}.preview-stepper button{display:grid;place-items:center;width:38px;height:42px;padding:0;border:0;background:#1d292f;color:#ffb779;font-size:20px;line-height:1}.preview-stepper button:hover{background:#3b2b20;color:#fff}.preview-settings input[type=number]{appearance:textfield;-moz-appearance:textfield;width:76px;min-width:0;height:42px;padding:8px;color:#edf3f5;background:#10191e;border:0;border-left:1px solid #435058;border-right:1px solid #435058;border-radius:0;font:inherit;text-align:center;font-variant-numeric:tabular-nums}.preview-settings input[type=number]::-webkit-inner-spin-button,.preview-settings input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.preview-settings input[type=checkbox]{appearance:none;-webkit-appearance:none;width:66px;height:38px;min-width:66px;border:1px solid #687078;border-radius:100px;background:linear-gradient(180deg,#596168,#484f56);position:relative;flex:none;cursor:pointer;padding:0;box-shadow:inset 0 1px 2px #0005,0 1px 0 #ffffff0c;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.preview-settings input[type=checkbox]:after{content:'';position:absolute;left:3px;top:3px;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#fff,#e9edef);box-shadow:0 2px 7px #0007,0 0 0 1px #ffffffaa;transition:transform .24s cubic-bezier(.2,.8,.2,1)}.preview-settings input[type=checkbox]:checked{border-color:#ff963d;background:linear-gradient(180deg,#ffa254,#ff8a2a);box-shadow:inset 0 1px 2px #7b330f55,0 0 18px #ff963d20}.preview-settings input[type=checkbox]:checked:after{transform:translateX(28px)}.preview-settings input[type=checkbox]:focus-visible{outline:2px solid #ffc08b;outline-offset:4px}
.preview-note{font-size:12px;margin:15px 0 0;color:#9fb2bd}.preview-review{padding:22px;border:1px solid #576963;border-radius:12px;line-height:1.7}.preview-review.valid{background:#183027;color:#b7e3c4}.preview-review.invalid{background:#392c24;border-color:#e39b68;color:#ffd0af}.preview-export{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.preview-export h4{margin:0 0 8px;font-size:21px}.preview-export p{font-size:13px;margin:0;max-width:480px}.export-file{display:grid;place-items:center;width:60px;height:70px;border:1px solid #d98c50;border-radius:12px;color:#ffb479;font-size:28px;background:#ff963d0a}.preview-export .landing-button{margin-left:auto;font-size:13px}
.script-explore{grid-column:2/-1;justify-self:start;border:0;background:none;color:#e7b287;font:inherit;font-size:12px;padding:0;min-height:30px}.script-explore:hover{color:#ffe6ce}.landing-page .script-card{gap:10px 16px}.landing-page .script-card p{max-width:330px}.landing-page .landing-section{padding-top:52px;padding-bottom:52px}
@keyframes preview-panel-in{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){.landing-page .cockpit-controls{padding:20px 18px;gap:18px}.landing-page .cockpit-scene{height:340px}.scene-label small{display:none}.scene-label{bottom:16px}.demo-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-script-detail{grid-template-columns:1fr}.demo-script-detail .landing-button{width:100%}.preview-modules,.preview-settings{grid-template-columns:1fr}.workflow-preview{padding:22px}.preview-heading h3{font-size:22px}.preview-settings>label,.preview-number-setting{font-size:14px;padding:16px}.preview-export .landing-button{width:100%;margin-left:0}.module-inspector{padding:24px}.landing-page .landing-section{padding:36px 0}.mobile-flow-modules .network-node{min-height:54px}.mobile-flow-core img{width:96px;height:96px}.mobile-flow-core strong,.mobile-flow-core>span{display:none}}
@media(max-width:380px){.landing-page .cockpit-controls{grid-template-columns:1fr}.demo-range label{grid-column:auto}.landing-page .demo-range{grid-template-columns:1fr 90px 30px}.scene-actions button{font-size:11px}.scene-actions{gap:5px}.preview-tabs button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.scene-actions button{transition:none}}