/* Hub-Schaubild der Branchenseiten, gehoert zu lp/hub.js.
   Ohne JS greift nichts davon: das statische SVG .ind-net bleibt sichtbar. */
.ind-s2.hx-on .ind-net{display:none}
.hx{position:relative;width:100%;max-width:1320px;margin:0 auto;aspect-ratio:1200/720;text-align:left;
 -webkit-tap-highlight-color:transparent;--la:122deg;--tw:116px;isolation:isolate}
.ind.live .hx{position:absolute;inset:0;max-width:none;aspect-ratio:auto}
@media(max-width:759px){.hx{aspect-ratio:390/720}}

/* Weiche Farbfelder: Petrol, Cyan, Off-White */
.hx-fx{position:absolute;inset:-12%;pointer-events:none;z-index:-1}
.hx-fx i{position:absolute;display:block;border-radius:50%;will-change:transform}
.hx-f1{left:4%;top:8%;width:52%;height:78%;background:radial-gradient(closest-side,rgba(41,191,222,.15),rgba(41,191,222,0));animation:hxd1 23s ease-in-out infinite alternate}
.hx-f2{right:2%;top:22%;width:50%;height:74%;background:radial-gradient(closest-side,rgba(14,127,163,.11),rgba(14,127,163,0));animation:hxd2 29s ease-in-out infinite alternate}
.hx-f3{left:27%;top:18%;width:46%;height:62%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(247,252,253,.5) 55%,rgba(247,252,253,0))}
@keyframes hxd1{to{transform:translate(7%,5%) scale(1.08)}}
@keyframes hxd2{to{transform:translate(-8%,-6%) scale(1.1)}}
.hx-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ind:not(.live) .hx-cv{-webkit-mask-image:radial-gradient(62% 62% at 50% 50%,#000 70%,transparent);mask-image:radial-gradient(62% 62% at 50% 50%,#000 70%,transparent)}

/* Schriftzug unter dem Orb, im Hochformat als Glas-Pille mit Beschreibung */
.hx-brand{position:absolute;left:50%;top:60%;z-index:1500;pointer-events:none;transform:translate(-50%,0);opacity:0;display:grid;justify-items:center}
.hx-bw{grid-area:1/1;font-family:'Sora','Roboto',sans-serif;font-weight:800;font-size:clamp(22px,2vw,29px);line-height:1;letter-spacing:-.02em;color:#0B2A34;white-space:nowrap;
 text-shadow:0 0 18px #fff,0 0 8px #fff,0 0 2px #fff;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
.hx-bw b{font-weight:800;color:#0E7FA3}
.hx-cap{grid-area:1/1;display:block;width:max-content;max-width:min(300px,82vw);padding:9px 16px 10px;border-radius:16px;text-align:center;
 background:rgba(255,255,255,.86);box-shadow:0 0 0 1px rgba(14,127,163,.14),0 14px 30px -14px rgba(11,42,52,.32);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 font:500 13px/1.42 'Inter','DM Sans',system-ui,sans-serif;color:#3E5C68;opacity:0;transform:translateY(6px) scale(.96);
 transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.3,.35,1)}
.hx-cap b{display:block;margin-bottom:2px;font:600 10.5px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#0E7FA3}
.hx-p .hx-bw{font-size:20px;padding:7px 15px 8px;border-radius:999px;background:rgba(255,255,255,.8);
 box-shadow:0 10px 24px -14px rgba(11,42,52,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx-brand.cap .hx-bw{opacity:0;transform:scale(.94)}
.hx-brand.cap .hx-cap{opacity:1;transform:none}

/* Quellen-Karten */
.hx-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.hx-n{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;opacity:0}
.hx-card{position:absolute;top:-27px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 min-height:54px;padding:8px 18px 8px 8px;margin:0;border:0;border-radius:17px;cursor:pointer;pointer-events:auto;
 font:inherit;text-align:left;color:#2F4F5B;white-space:nowrap;
 background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(240,249,252,.8) 58%,rgba(226,243,249,.74));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(14,127,163,.12),0 16px 34px -18px rgba(11,42,52,.34),0 4px 12px -6px rgba(14,127,163,.18);
 -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
 transition:box-shadow .4s ease,background .4s ease,filter .4s ease,opacity .4s ease}
.hx-n.L .hx-card{right:0}
.hx-n.R .hx-card{left:0}
/* Lichtkante, dreht mit der Neigung der Szene */
.hx-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(var(--la),#fff,rgba(94,212,238,.7) 26%,rgba(255,255,255,0) 52%,rgba(41,191,222,.22) 86%,rgba(255,255,255,.7));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Andockpunkt der Linie */
.hx-card::after{content:"";position:absolute;top:23px;width:8px;height:8px;border-radius:50%;background:#1FA7CF;
 box-shadow:0 0 0 2.5px #fff,0 0 12px 2px rgba(41,191,222,.6);transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.hx-n.L .hx-card::after{right:-4px}
.hx-n.R .hx-card::after{left:-4px}
.hx-hd{display:flex;align-items:center;gap:12px}
.hx-iw{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
 background:linear-gradient(160deg,#fff,rgba(214,243,251,.85));box-shadow:inset 0 0 0 1px rgba(14,127,163,.12),0 3px 8px -4px rgba(14,127,163,.35)}
.hx-ic{width:30px;height:25px;overflow:visible}
.hx-ic path{fill:none;stroke:#1B9DBA;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
 transition:stroke-dashoffset 1.25s cubic-bezier(.65,0,.35,1)}
.hx-ic path+path{transition-delay:.28s}
.hx-n.in .hx-ic path{stroke-dashoffset:0}
.hx-lb{font:500 12px/1.25 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
.hx-d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.hx-d>span{display:block;overflow:hidden;min-height:0;width:max-content;max-width:240px;white-space:normal;padding:0 0 0 2px;
 font:500 13.5px/1.45 'Inter','DM Sans',system-ui,sans-serif;letter-spacing:0;color:#4A6672;transition:padding .45s cubic-bezier(.2,.8,.2,1)}
.hx-n.far .hx-card{filter:blur(.5px);opacity:.92}

/* Aktiv: Hover, Fokus oder angetippt */
.hx-n.on .hx-card{filter:none;opacity:1;background:linear-gradient(155deg,#fff,rgba(238,250,253,.95));
 box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(41,191,222,.55),0 26px 48px -20px rgba(14,127,163,.5),0 0 36px -8px rgba(41,191,222,.5)}
.hx-n.on .hx-card::after{transform:scale(1.35)}
.hx-n.on .hx-d{grid-template-rows:1fr;opacity:1}
.hx-n.on .hx-d>span{padding:8px 0 3px 2px}
.hx-n:not(.on) .hx-d{width:0}
.hx-card:focus{outline:none}
.hx-card:focus-visible{outline:2px solid #0E7FA3;outline-offset:4px}

/* Hochformat: drei Kacheln oben, drei unten, Beschreibung erscheint unter dem Orb */
.hx-p .hx-card{top:auto;left:calc(var(--tw)/-2);width:var(--tw);align-items:center;
 padding:9px 5px 10px;min-height:0;border-radius:15px;white-space:normal;text-align:center}
.hx-p .hx-n.T .hx-card{bottom:0}
.hx-p .hx-n.B .hx-card{top:0}
.hx-p .hx-card::after{top:auto;left:calc(50% - 4px);right:auto}
.hx-p .hx-n.T .hx-card::after{bottom:-4px}
.hx-p .hx-n.B .hx-card::after{top:-4px}
.hx-p .hx-hd{flex-direction:column;gap:7px;max-width:100%}
.hx-p .hx-iw{width:34px;height:34px;border-radius:11px}
.hx-p .hx-ic{width:27px;height:22px}
.hx-p .hx-lb{font-size:10px;letter-spacing:.11em;line-height:1.3;overflow-wrap:break-word}
.hx-p .hx-d{display:none}

/* Scroll-Story: nur die sichtbare Szene nimmt Klicks an, Raster tritt hinter den Hub zurueck */
.ind.live .ind-s1,.ind.live .ind-s3{pointer-events:none}
.ind.live[data-sc="3"] .ind-s3{pointer-events:auto}
.ind.live:not([data-sc="2"]) .hx-card{pointer-events:none}
.hx-ind.live .ind-grid{transition:opacity .9s ease}
.hx-ind.live[data-sc="2"] .ind-grid{opacity:.16!important}

@media(prefers-reduced-motion:reduce){
 .hx-fx i{animation:none}
 .hx-ic path{transition:none;stroke-dashoffset:0}
 .hx-card,.hx-d,.hx-d>span,.hx-bw,.hx-cap,.hx-card::after{transition:none}
}