/* ===== ENGINEERING UI: Graphit / Cyan / Mint. Alle Effekte sind optional; die Seite funktioniert auch ohne JS. ===== */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{--ink:#04060a;--ink2:#0b1017;--steel:#8b9aa8;--line:#1e2a37;--paper:#07090d;--alt:#0a0e14;--text:#e9eef3;--muted:#9fadba;
 --acc:#32cfff;--acc-d:#6fe8ff;--hot:#9cf7e6;--cool:#6aa9ff;--glass:rgba(255,255,255,.04);--heat:0;
 --grad:linear-gradient(100deg,#32cfff,#54ddff 55%,#9cf7e6)}
html{background:var(--paper)}
body{background:var(--paper);color:var(--text);position:relative}
/* Ambiente: Glut-Schein unten links (wächst beim Scrollen), Kühlmittel oben rechts, feines Korn */
body:before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
 background:radial-gradient(40% 36% at 8% 96%,rgba(50,207,255,calc(.14 + var(--heat)*.28)),transparent 70%),radial-gradient(34% 30% at 96% 6%,rgba(25,227,255,.10),transparent 70%)}
body:after{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.06;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--acc);color:#000}
h1,h2,h3{color:#fff}
a{color:inherit}
.lead,.sh p,.usp p,.pcard p,.ind p,.svc p,.fine{color:var(--muted)}
.kicker{color:var(--hot);text-shadow:0 0 14px rgba(156,247,230,.45)}
.kicker:before{content:"// ";opacity:.7}
/* Buttons: Glut-Verlauf, Leuchten, Glanzstreifen */
.btn{background:var(--grad);border:0;color:#0a0a0a;font-weight:800;letter-spacing:.01em;position:relative;overflow:hidden;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 30px rgba(50,207,255,.38);transition:box-shadow .25s,filter .25s}
.btn:hover{background:var(--grad);filter:brightness(1.12);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 44px rgba(90,225,255,.7)}
.btn:after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover:after{left:130%}
.btn-ghost,.btn-ghost-d{background:rgba(25,227,255,.06);color:#fff;border:1px solid rgba(25,227,255,.55);box-shadow:0 0 18px rgba(25,227,255,.18) inset,0 0 20px rgba(25,227,255,.15)}
.btn-ghost:hover,.btn-ghost-d:hover{background:rgba(25,227,255,.16);color:#fff;border-color:var(--cool);box-shadow:0 0 22px rgba(25,227,255,.3) inset,0 0 34px rgba(25,227,255,.4)}
.nav .btn{color:#0a0a0a}
.btn:disabled{filter:grayscale(.6)}
/* Header: Glas + wandernde Glutlinie */
.site-header{background:rgba(5,8,12,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:0}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),var(--hot),var(--cool),transparent);background-size:200% 100%;animation:sweep 6s linear infinite;opacity:.8}
@keyframes sweep{to{background-position:-200% 0}}
.logo svg{color:var(--acc-d);filter:drop-shadow(0 0 6px rgba(111,232,255,.8))}
.nav a:hover,.nav a[aria-current]{background:rgba(111,232,255,.1);color:#fff}.nav a[aria-current]{box-shadow:inset 0 -2px var(--acc-d)}
.dd{background:rgba(9,13,19,.96);backdrop-filter:blur(10px);border:1px solid rgba(111,232,255,.25);box-shadow:0 20px 50px #000a,0 0 40px rgba(50,207,255,.12)}
@media(max-width:1060px){.nav{background:rgba(5,8,12,.97)}}
/* Hero: Wirbel (Canvas per JS), pulsierender Kern, Scan-Linie */
.hero{background:radial-gradient(60% 80% at 74% 50%,rgba(50,207,255,.20),transparent 70%),linear-gradient(180deg,#04060a,#080c12)}
.hero:before{background-image:linear-gradient(rgba(111,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(111,232,255,.06) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 90% at 70% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 90% at 70% 50%,#000,transparent 75%)}
.hero h1{color:#fff}
.hero .lead{color:#c3cdd6}
.hero-art{overflow:visible;aspect-ratio:auto;max-height:none;box-shadow:none;border-radius:0}.hero-art:after{display:none}
.hero-art:before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(82,220,255,.55),rgba(49,141,255,.28) 32%,transparent 66%);filter:blur(20px);pointer-events:none;animation:core 3.2s ease-in-out infinite}
@keyframes core{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.hero-frame{position:relative;aspect-ratio:4/5;max-height:600px;border-radius:14px;overflow:hidden;--mx:56%;--my:64%;--lens-r:108px;box-shadow:0 0 0 1px rgba(120,235,255,.35),0 0 60px rgba(50,207,255,.55),0 30px 80px #000c;isolation:isolate}
.hero-frame:before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--a),transparent 0 55%,var(--cool) 72%,var(--hot) 88%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite}
@keyframes spin{to{--a:360deg}}
.hero-frame:after{content:"";position:absolute;left:0;right:0;height:22%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(120,235,255,.28),rgba(205,255,247,.5) 92%,transparent);animation:scan 4.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{0%{top:-24%}100%{top:104%}}
.hero-frame .photo{filter:grayscale(1) sepia(1) hue-rotate(-18deg) saturate(3) brightness(.78) contrast(1.15);transition:filter .45s ease,transform .4s ease-out}.hero-frame.xray-active .photo{filter:none}
.hero-bp{position:absolute;inset:0;z-index:2;background:rgba(30,6,0,.9);display:grid;place-items:center;color:var(--hot);-webkit-mask-image:radial-gradient(circle 150px at var(--mx) var(--my),#000 55%,transparent 100%);mask-image:radial-gradient(circle 150px at var(--mx) var(--my),#000 55%,transparent 100%)}
.hero-bp:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,235,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(120,235,255,.28) 1px,transparent 1px);background-size:20px 20px}
.hero-bp .draw{position:relative;width:78%;max-height:92%;filter:drop-shadow(0 0 6px rgba(156,247,230,.9))}.hero-bp .dim{color:#fff}
/* Digital Operator X-Ray: holografischer Zwilling + "digitales Nervensystem" */
@property --lens-r{syntax:"<length>";inherits:false;initial-value:108px}
.hero-bp.digital-operator{background:radial-gradient(circle at 58% 34%,rgba(15,62,76,.94),rgba(3,15,22,.97) 62%,rgba(2,9,14,.99));color:#7beeff;opacity:.12;transition:opacity .42s ease;-webkit-mask-image:radial-gradient(circle var(--lens-r) at var(--mx) var(--my),#000 48%,rgba(0,0,0,.82) 65%,transparent 100%);mask-image:radial-gradient(circle var(--lens-r) at var(--mx) var(--my),#000 48%,rgba(0,0,0,.82) 65%,transparent 100%)}
.hero-frame.xray-active{--lens-r:172px}.hero-frame.xray-active .hero-bp.digital-operator{opacity:.96}
.hero-bp.digital-operator:before{background-image:linear-gradient(rgba(111,232,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(111,232,255,.16) 1px,transparent 1px);background-size:18px 18px;opacity:.32;transition:opacity .42s ease}.hero-frame.xray-active .hero-bp.digital-operator:before{opacity:.72}
.hero-bp.digital-operator:after{content:"";position:absolute;left:var(--mx);top:var(--my);z-index:3;width:152px;height:152px;transform:translate(-50%,-50%);border:1px solid rgba(156,247,230,.22);border-radius:50%;box-shadow:0 0 0 6px rgba(50,207,255,.02),inset 0 0 24px rgba(50,207,255,.05);opacity:.28;transition:width .42s ease,height .42s ease,opacity .42s ease,border-color .42s ease,box-shadow .42s ease;pointer-events:none}.hero-frame.xray-active .hero-bp.digital-operator:after{width:230px;height:230px;opacity:1;border-color:rgba(156,247,230,.34);box-shadow:0 0 0 8px rgba(50,207,255,.035),inset 0 0 36px rgba(50,207,255,.08)}
.hero-bp.digital-operator .digital-twin{position:absolute;inset:0;width:100%;height:100%;max-height:none;filter:drop-shadow(0 0 5px rgba(111,232,255,.72));overflow:visible;opacity:.72;transition:opacity .42s ease}.hero-frame.xray-active .hero-bp.digital-operator .digital-twin{opacity:1}
.digital-twin .scan-meta{font-size:8px;letter-spacing:.12em;opacity:.58}.digital-twin .scan-meta text:nth-child(2){fill:#9cf7e6;opacity:.9}.digital-twin .twin-wire{color:#71cfe4;opacity:.48}.digital-twin .twin-wire ellipse,.digital-twin .twin-wire path{vector-effect:non-scaling-stroke}.digital-twin .bio-traces{color:#9cf7e6;filter:drop-shadow(0 0 3px rgba(156,247,230,.6))}.digital-twin .trace{stroke-dasharray:5 10;animation:signalFlow 3.8s linear infinite}.digital-twin .trace-b{animation-delay:-.7s}.digital-twin .trace-c{animation-delay:-1.4s}.digital-twin .trace-d{animation-delay:-2.1s}.digital-twin .trace-e{animation-delay:-2.8s}.digital-twin .trace-f{animation-delay:-3.3s}@keyframes signalFlow{to{stroke-dashoffset:-90}}
.digital-twin .operator-core{color:#d5fffa;filter:drop-shadow(0 0 9px rgba(111,232,255,.75))}.digital-twin .core-glow{fill:rgba(50,207,255,.08);stroke:rgba(111,232,255,.34);stroke-width:1.2;animation:coreBreath 2.8s ease-in-out infinite}.digital-twin .core-ring{fill:none;stroke-width:1.4;stroke-dasharray:7 8;transform-box:fill-box;transform-origin:center}.digital-twin .ring-a{stroke:#9cf7e6;animation:coreSpin 9s linear infinite}.digital-twin .ring-b{stroke:#32cfff;animation:coreSpin 6s linear reverse infinite}.digital-twin .core-dot{fill:#dffefd;stroke:none;filter:drop-shadow(0 0 7px #9cf7e6)}.digital-twin .core-copy{font:800 8px ui-monospace,monospace;letter-spacing:.08em}.digital-twin .core-sub{font:700 6px ui-monospace,monospace;letter-spacing:.18em;opacity:.65}@keyframes coreSpin{to{transform:rotate(360deg)}}@keyframes coreBreath{50%{transform:scale(1.12);transform-origin:235px 249px;opacity:.75}}
.digital-twin .bio-nodes .node{fill:#dffefd;stroke:#7beeff;stroke-width:1.2;filter:drop-shadow(0 0 6px rgba(156,247,230,.95))}.digital-twin .node-pulse{fill:none;stroke:#7beeff;stroke-width:1;opacity:.55;animation:nodePulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}.digital-twin .node-pulse.delay-1{animation-delay:-.6s}.digital-twin .node-pulse.delay-2{animation-delay:-1.2s}.digital-twin .node-pulse.delay-3{animation-delay:-1.8s}@keyframes nodePulse{0%{transform:scale(.45);opacity:.75}75%,100%{transform:scale(1.5);opacity:0}}
.digital-twin .operator-labels{font-size:7px;font-weight:700;letter-spacing:.13em;opacity:.76}.digital-twin .operator-labels text{filter:drop-shadow(0 0 3px rgba(111,232,255,.75))}.digital-twin .scan-brackets{color:#9cf7e6}
@media(max-width:860px){.hero-frame{--lens-r:92px}.hero-frame.xray-active{--lens-r:145px}.hero-bp.digital-operator:after{width:130px;height:130px}.hero-frame.xray-active .hero-bp.digital-operator:after{width:190px;height:190px}}
@media(max-width:620px){.hero-frame{--lens-r:78px;--mx:56%;--my:66%}.hero-frame.xray-active{--lens-r:124px}.hero-bp.digital-operator:after{width:108px;height:108px}.hero-frame.xray-active .hero-bp.digital-operator:after{width:162px;height:162px}.digital-twin .scan-meta{font-size:7px}.digital-twin .operator-labels{font-size:6.5px}}
/* HUD-Etiketten statt Handschrift */
.note{position:absolute;z-index:5;font:700 .74rem/1 var(--mono);letter-spacing:.06em;color:#fff;background:rgba(8,12,18,.72);border:1px solid rgba(111,232,255,.5);backdrop-filter:blur(6px);padding:.55em .8em .55em 1.7em;border-radius:6px;white-space:nowrap;pointer-events:none;box-shadow:0 0 22px rgba(50,207,255,.35);transform:none;animation:float 5s ease-in-out infinite}
.note:before{content:"";position:absolute;left:.7em;top:50%;width:.5em;height:.5em;margin-top:-.25em;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot);animation:blink 1.4s infinite}
.note .arrow{display:none}
.n1{top:6%;left:-6%}.n2{top:46%;right:-3%;animation-delay:-1.6s}.n3{bottom:6%;left:-6%;animation-delay:-3.1s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes blink{50%{opacity:.25}}
.reg-label{position:absolute;left:0;bottom:-30px;font:600 .68rem var(--mono);letter-spacing:.14em;color:var(--steel);text-transform:uppercase}
@media(max-width:860px){.n1{left:0}.n2{right:0}.n3{left:0}}
.tag{background:rgba(255,255,255,.08);border-color:rgba(111,232,255,.4)}
/* Headline Wort für Wort + Glut-Verlauf */
.js .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .035em .34em;margin:-.12em -.035em -.26em}.js .hero h1.headline-ready .w{overflow:visible}
.js .hero h1 .w>span{display:inline-block;line-height:.98;padding:.08em .02em .28em;margin:-.08em -.02em -.28em;overflow:visible;transform:translateY(105%);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 150ms);background:linear-gradient(100deg,#fff 0%,#fff 38%,#9cf7e6 62%,#32cfff 82%,#fff 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation-name:rise,molten;animation-duration:.8s,7s;animation-timing-function:cubic-bezier(.2,.8,.2,1),ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;animation-delay:calc(var(--i)*90ms + 150ms),0s;animation-direction:normal,alternate}
@keyframes rise{to{transform:none}}
@keyframes molten{from{background-position:0 0}to{background-position:100% 0}}
/* Überschriften-Unterstreichung: glühender Balken */
.scr{position:relative;display:inline-block}.scr svg{position:absolute;left:-1%;bottom:-.3em;width:102%;height:.4em;overflow:visible;pointer-events:none}
.scr path{fill:none;stroke:url(#hg2);stroke:var(--acc-d);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1s .3s cubic-bezier(.6,0,.2,1);filter:drop-shadow(0 0 5px rgba(111,232,255,.9))}
.scr.in path{stroke-dashoffset:0}
.pagehead .scr path,.cta .scr path{stroke:var(--hot)}
/* Stats */
.statsband{background:linear-gradient(180deg,#0a0f16,#060a0f);border-top:1px solid rgba(111,232,255,.25);border-bottom:1px solid rgba(111,232,255,.12)}
.stats li{border-left:2px solid var(--acc-d);box-shadow:-10px 0 24px -12px rgba(111,232,255,.7)}
.stats b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(76,210,255,.4))}
.stats span{color:#aeb9c4}
/* Sektionen */
.alt{background:linear-gradient(180deg,#0a0e14,#0b1118);background-image:radial-gradient(50% 60% at 85% 0%,rgba(50,207,255,.10),transparent 70%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px;border-block:1px solid rgba(255,255,255,.04)}
/* Karten: Glas + Spotlight, das der Maus folgt */
.usp,.pcard,.ind,.svc,.case,.indlist a,.dl,.joblist li,.conf,.map,.form,.spec,.ph-art{--px:50%;--py:50%;position:relative;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);color:var(--text);box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .3s,box-shadow .3s,border-color .3s}
.usp{border-top:1px solid rgba(255,255,255,.09)}
.usp:after,.pcard:after,.ind:after,.svc:after,.case:after,.indlist a:after,.dl:after,.joblist li:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--px) var(--py),rgba(111,232,255,.22),transparent 55%);z-index:0}
.usp:before,.pcard:before,.ind:before,.svc:before,.case:before,.indlist a:before,.dl:before,.joblist li:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--px) var(--py),var(--acc-d),var(--hot) 35%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transform:none;filter:none;border:0}
.usp:hover:after,.pcard:hover:after,.ind:hover:after,.svc:hover:after,.case:hover:after,.indlist a:hover:after,.dl:hover:after,.joblist li:hover:after,.usp:hover:before,.pcard:hover:before,.ind:hover:before,.svc:hover:before,.case:hover:before,.indlist a:hover:before,.dl:hover:before,.joblist li:hover:before{opacity:1}
.usp:hover,.pcard:hover,.ind:hover,.svc:hover,.case:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 40px rgba(50,207,255,.18);border-color:transparent}
.pcard>*,.usp>*,.case>*{position:relative;z-index:1}
.usp .num,.svc .num{font:800 1.5rem var(--mono);color:var(--acc-d);text-shadow:0 0 14px rgba(111,232,255,.7)}
.more{color:var(--hot)}
.pcard-art,.prodart,.case-art,.ph-art{background:#05080c;color:#7fe6f7;border:0}
.draw .dim{color:var(--acc-d)}
.indlist a:hover{background:linear-gradient(160deg,rgba(111,232,255,.2),rgba(255,255,255,.03));color:#fff}.indlist span{color:var(--steel)}
.pcard-art:after{display:none}
/* Fotos: Glut-Duoton, bei Hover in Farbe */
.pcard-art .photo,.gallery .photo,.phf .photo,.case-art .photo,.prodart .photo{filter:grayscale(1) sepia(1) hue-rotate(-18deg) saturate(2.6) brightness(.74) contrast(1.12);transition:filter .5s,transform .6s}
.pcard:hover .photo,.gallery figure:hover .photo,.phf:hover .photo,.case:hover .photo,.prodart:hover .photo{filter:none;transform:scale(1.05)}
.phf figcaption:before,.gallery figcaption:before{content:"FIG. " counter(fig,decimal-leading-zero) " – ";color:var(--acc-d)}
body{counter-reset:fig}.phf,.gallery figure{counter-increment:fig}
.phf figcaption,.ph figcaption,.gallery figcaption{color:var(--steel)}
/* Bild-Wipe */
.wipe .photo{clip-path:inset(0 100% 0 0)}
.wipe.in .photo{clip-path:inset(0 0 0 0)}
.wipe .photo{transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),filter .5s,transform .6s}
/* Tabellen, Formulare, Tabs */
.spec{background:rgba(255,255,255,.03)}.spec th,.spec td{border-color:rgba(255,255,255,.1)}.spec thead th{background:linear-gradient(90deg,#1a0b04,#2a1206);color:var(--hot)}.spec tbody th{background:rgba(255,255,255,.04);color:#fff}
.form{background:rgba(255,255,255,.03)}fieldset{border-color:rgba(255,255,255,.12)}legend{color:var(--hot)}
input,select,textarea{background:rgba(5,8,12,.8);color:#fff;border:1px solid #3a4856}
input::placeholder,textarea::placeholder{color:#7d8a97}
select option{background:#0b1017;color:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc-d);box-shadow:0 0 0 3px rgba(111,232,255,.35),0 0 24px rgba(50,207,255,.35)}
.f input:user-invalid,.f select:user-invalid,.f textarea:user-invalid{border-color:#ff6b6b}
.status.ok{color:#5ef2a0}.status.err{color:#ff7b7b}
.conf{border-left:3px solid var(--acc)}.alt .conf{background:rgba(255,255,255,.04)}
.tablist button{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}.tablist button[aria-selected=true]{background:var(--grad);color:#0a0a0a;border-color:transparent;box-shadow:0 0 26px rgba(50,207,255,.5)}
.chips li{background:rgba(111,232,255,.12);color:var(--hot);border:1px solid rgba(111,232,255,.3)}
.rellist a{border-color:rgba(255,255,255,.3);color:#fff}.rellist a:hover{background:var(--grad);color:#0a0a0a;border-color:transparent}
.ticks li{border-color:rgba(255,255,255,.1)}.ticks li:before{border-color:var(--hot)}
.timeline{border-color:rgba(255,255,255,.15)}.timeline li:before{box-shadow:0 0 14px var(--acc)}
.dl-ico{background:var(--grad);color:#0a0a0a}
.joblist li{border-color:rgba(255,255,255,.1)}
.facts{border-color:rgba(255,255,255,.12)}
mark{background:var(--hot);color:#000}
.draftbar{background:var(--hot);color:#000}
.check a{color:var(--hot)}
/* CTA-Band: glühender Kern */
.band.cta{background:radial-gradient(50% 120% at 80% 100%,rgba(50,207,255,.45),transparent 70%),#05080c;border-top:0;position:relative;overflow:hidden}
.band.cta:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--acc),var(--hot),var(--cool),transparent);background-size:200% 100%;animation:sweep 5s linear infinite}
.band.cta .cta-in{position:relative}
.pagehead{background:radial-gradient(60% 140% at 85% 0%,rgba(50,207,255,.28),transparent 70%),linear-gradient(180deg,#04060a,#09101a)}
.pagehead:before{background-image:linear-gradient(rgba(111,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(111,232,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent,#000 70%)}
.crumbs{color:var(--steel)}
.site-footer{background:#04060a;border-top:1px solid rgba(111,232,255,.25)}
/* Temperaturanzeige: Scrollen heizt den Reaktor auf */
.level{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;width:44px;color:#fff;pointer-events:none;font:700 .62rem var(--mono);text-align:center;filter:drop-shadow(0 0 10px rgba(50,207,255,.6))}
.level svg{display:block;width:34px;height:130px;margin:auto;overflow:visible}.level .lbl{display:block;margin-top:4px;color:var(--hot)}
@media(max-width:1100px){.level{display:none}}
/* Canvas-Ebenen */
.vortex{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-in{z-index:1}
.fxc{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}
.ring{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:var(--ring-bw,2px) solid var(--ring-col,var(--hot));box-shadow:0 0 24px color-mix(in srgb,var(--ring-col,var(--acc)) 85%,transparent),0 0 24px color-mix(in srgb,var(--ring-col,var(--acc)) 75%,transparent) inset;pointer-events:none;z-index:210;animation:ring var(--ring-dur,.75s) cubic-bezier(.1,.7,.3,1) forwards;animation-delay:var(--ring-delay,0s)}
@keyframes ring{from{transform:scale(var(--ring-start,.3));opacity:var(--ring-op,1)}to{transform:scale(var(--ring-scale,11));opacity:0}}
.click-core,.click-node,.click-tag,.tracefx,.trace-node,.trace-seg{position:fixed;pointer-events:none;z-index:211}
.click-core{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#dffefd;box-shadow:0 0 14px #fff,0 0 24px rgba(50,207,255,.9);animation:corePop .72s ease-out forwards}
@keyframes corePop{0%{transform:scale(.35);opacity:1}65%{transform:scale(1);opacity:.95}100%{transform:scale(1.65);opacity:0}}
.click-node{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(circle,#dffefd 0 28%,#7beeff 56%,rgba(123,238,255,.22) 100%);box-shadow:0 0 10px rgba(156,247,230,.95);animation:nodeDrift var(--node-dur,.82s) ease-out forwards}
@keyframes nodeDrift{from{transform:translate(0,0) scale(.45);opacity:1}45%{opacity:1}to{transform:translate(var(--dx,0),var(--dy,0)) scale(1.22);opacity:0}}
.click-tag{font:800 10px/1 var(--mono);letter-spacing:.18em;color:#d8fdf9;text-shadow:0 0 12px rgba(50,207,255,.55);animation:tagFade .86s ease-out forwards;white-space:nowrap}
@keyframes tagFade{0%{transform:translate(-50%,-50%) scale(.92);opacity:0}18%{opacity:.95}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
.tracefx{inset:0;z-index:212}
.trace-seg{background:linear-gradient(90deg,rgba(111,232,255,.95),rgba(156,247,230,.9));box-shadow:0 0 12px rgba(50,207,255,.52);transform-origin:left center;animation:traceGrow .5s cubic-bezier(.2,.8,.2,1) forwards,traceFade .95s ease-out forwards}
.trace-seg.v{background:linear-gradient(180deg,rgba(111,232,255,.95),rgba(156,247,230,.9));transform-origin:center top}
.trace-seg.h{height:2px}.trace-seg.v{width:2px}
@keyframes traceGrow{from{transform:scaleX(0) scaleY(0)}to{transform:scaleX(1) scaleY(1)}}
@keyframes traceFade{0%,55%{opacity:1}100%{opacity:0}}
.trace-node{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#dffefd;box-shadow:0 0 0 2px rgba(50,207,255,.22),0 0 12px rgba(156,247,230,.85);animation:traceNode .95s ease-out forwards}
@keyframes traceNode{0%{transform:scale(.5);opacity:0}18%,62%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* Glut-Cursor */
.cx,.cx a,.cx button,.cx summary,.cx label{cursor:none}.cx input,.cx textarea,.cx select{cursor:text}
.orb,.dot{position:fixed;left:0;top:0;pointer-events:none;z-index:300;opacity:0;transition:opacity .25s}
.orb{width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle,rgba(120,235,255,.55),rgba(49,141,255,.22) 45%,transparent 70%);mix-blend-mode:screen;filter:blur(1px);transition:opacity .25s,width .25s,height .25s,margin .25s}
.orb.big{width:92px;height:92px;margin:-46px 0 0 -46px;background:radial-gradient(circle,rgba(25,227,255,.5),rgba(25,227,255,.18) 45%,transparent 70%)}
.dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 20px var(--hot)}
.orb.on,.dot.on{opacity:1}
/* Text-Entschlüsselung: Zeichen laufen, bis das Wort steht */
.kicker[data-fin]{font-variant-ligatures:none}
@media(prefers-reduced-motion:reduce){.site-header:after,.band.cta:before,.hero-art:before,.hero-frame:before,.hero-frame:after,.note,.note:before,.js .hero h1 .w>span{animation:none}.scr path{stroke-dashoffset:0;transition:none}.wipe .photo{clip-path:none;transition:none}.js .hero h1 .w>span{transform:none}.level,.vortex,.fxc,.orb,.dot,.orbit-mode,.companion-badge{display:none}.hero-frame:after{display:none}}
html,body{overflow-x:clip}


/* Orbit-Modus-Anzeige */
.orbit-mode{position:absolute;left:14px;top:14px;z-index:5;display:inline-flex;gap:.7rem;align-items:center;padding:.55rem .85rem;border-radius:999px;background:rgba(8,12,18,.76);border:1px solid rgba(111,232,255,.42);backdrop-filter:blur(8px);box-shadow:0 0 22px rgba(50,207,255,.28);font:700 .62rem/1 var(--mono);letter-spacing:.14em;color:#d8fdf9;pointer-events:none}
.orbit-mode b{color:var(--cyan2);font-weight:800}.orbit-mode [data-orbit-mode-label]{color:#fff;min-width:17ch;display:inline-block}
/* Personal / Hund: eigener Companion-X-Ray */
.personal-image{position:relative;overflow:hidden;isolation:isolate}
.companion-badge{position:absolute;left:14px;top:14px;z-index:4;padding:.48rem .75rem;border-radius:999px;background:rgba(8,12,18,.78);border:1px solid rgba(111,232,255,.38);box-shadow:0 0 18px rgba(50,207,255,.22);font:700 .62rem/1 var(--mono);letter-spacing:.12em;color:#d8fdf9;pointer-events:none}
.companion-frame{--mx:48%;--my:58%;--lens-r:82px}
.companion-frame .companion-xray{position:absolute;inset:0;z-index:2;color:#7beeff;opacity:.12;transition:opacity .42s ease;background:radial-gradient(circle at 50% 45%,rgba(10,48,64,.86),rgba(5,15,22,.95) 64%,rgba(3,9,14,.98));-webkit-mask-image:radial-gradient(circle var(--lens-r) at var(--mx) var(--my),#000 48%,rgba(0,0,0,.82) 66%,transparent 100%);mask-image:radial-gradient(circle var(--lens-r) at var(--mx) var(--my),#000 48%,rgba(0,0,0,.82) 66%,transparent 100%)}
.companion-frame .companion-xray:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(111,232,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(111,232,255,.13) 1px,transparent 1px);background-size:18px 18px;opacity:.24;transition:opacity .42s ease}
.companion-frame .companion-xray:after{content:"";position:absolute;left:var(--mx);top:var(--my);z-index:2;width:116px;height:116px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(156,247,230,.20);box-shadow:0 0 0 6px rgba(50,207,255,.02),inset 0 0 20px rgba(50,207,255,.05);opacity:.26;transition:width .42s ease,height .42s ease,opacity .42s ease,border-color .42s ease,box-shadow .42s ease;pointer-events:none}
.companion-frame.xray-active{--lens-r:118px}.companion-frame.xray-active .companion-xray{opacity:.86}.companion-frame.xray-active .companion-xray:before{opacity:.56}.companion-frame.xray-active .companion-xray:after{width:164px;height:164px;opacity:.92;border-color:rgba(156,247,230,.30);box-shadow:0 0 0 8px rgba(50,207,255,.03),inset 0 0 30px rgba(50,207,255,.08)}
.companion-frame .companion-scan{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(111,232,255,.66));opacity:.62;transition:opacity .42s ease}.companion-frame.xray-active .companion-scan{opacity:1}
.companion-scan .scan-meta{font-size:7.4px;letter-spacing:.11em;opacity:.56}.companion-scan .scan-meta text:nth-child(2){fill:#9cf7e6;opacity:.92}.companion-scan .dog-wire{color:#73d5ea;opacity:.44}.companion-scan .companion-traces{color:#9cf7e6;filter:drop-shadow(0 0 3px rgba(156,247,230,.55))}.companion-scan .trace{stroke-dasharray:5 10;animation:signalFlow 4.2s linear infinite}.companion-scan .trace-b{animation-delay:-.8s}.companion-scan .trace-c{animation-delay:-1.5s}.companion-scan .trace-d{animation-delay:-2.2s}.companion-scan .trace-e{animation-delay:-2.8s}
.companion-scan .companion-core{color:#dffefd;filter:drop-shadow(0 0 7px rgba(111,232,255,.65))}.companion-scan .core-glow{fill:rgba(50,207,255,.08);stroke:rgba(111,232,255,.30);stroke-width:1.2;animation:coreBreath 3.2s ease-in-out infinite}.companion-scan .core-ring{fill:none;stroke-width:1.2;stroke-dasharray:7 8;transform-box:fill-box;transform-origin:center}.companion-scan .ring-a{stroke:#9cf7e6;animation:coreSpin 10s linear infinite}.companion-scan .ring-b{stroke:#32cfff;animation:coreSpin 7s linear reverse infinite}.companion-scan .core-dot{fill:#dffefd;filter:drop-shadow(0 0 6px #9cf7e6)}.companion-scan .core-copy{font:800 7px ui-monospace,monospace;letter-spacing:.08em}.companion-scan .core-sub{font:700 5.5px ui-monospace,monospace;letter-spacing:.18em;opacity:.68}
.companion-scan .node{fill:#dffefd;stroke:#7beeff;stroke-width:1.1;filter:drop-shadow(0 0 5px rgba(156,247,230,.9))}.companion-scan .node-pulse{fill:none;stroke:#7beeff;stroke-width:1;opacity:.5;animation:nodePulse 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.companion-scan .companion-labels{font-size:6.6px;letter-spacing:.12em;opacity:.82}
@media(max-width:860px){.orbit-mode{font-size:.58rem;left:12px;top:12px}.companion-frame{--lens-r:72px}.companion-frame.xray-active{--lens-r:102px}.companion-frame .companion-xray:after{width:102px;height:102px}.companion-frame.xray-active .companion-xray:after{width:146px;height:146px}}
@media(max-width:620px){.orbit-mode{position:relative;left:auto;top:auto;display:inline-flex;margin:8px 5px 0 0}.orbit-mode [data-orbit-mode-label]{min-width:auto}.companion-badge{font-size:.56rem;left:10px;top:10px}.companion-frame{--mx:50%;--my:60%;--lens-r:62px}.companion-frame.xray-active{--lens-r:88px}.companion-frame .companion-xray:after{width:88px;height:88px}.companion-frame.xray-active .companion-xray:after{width:126px;height:126px}.companion-scan .companion-labels{font-size:5.7px}}

/* Subtiles Code-Field im Hero statt Orbit-/Stern-Effekt */
.vortex.code-field{opacity:.92;mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(50,207,255,.08))}