/* ══════════════════════════════════════════════════════════════
   EIGENE CLOUD — „Kannst Du Dein System mitnehmen?"
   WELT   Firma an Anbietern hängend
   HELD   die Abhängigkeit
   KAMERA einen Anbieter VERLASSEN und zusehen, was mitkommt
   MOMENT nicht die Dateien sind das Problem — die Struktur ist es

   Abgrenzung zu datenhoheit: dort die Herkunft EINER Information,
   hier die Portabilität des ganzen Aufbaus.
══════════════════════════════════════════════════════════════ */
.spc{--sp-bg:#0d1016;--sp-panel:#161b23;--sp-ink:#e8edf3;--sp-mut:#7d8a99;
  --sp-line:rgba(255,255,255,.09);--sp-go:#5fb98f;--sp-part:#dba24b;--sp-stuck:#cf5f4a;
  --sp-e:cubic-bezier(.22,.9,.24,1);
  position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--sp-bg);color:var(--sp-ink);overflow-x:clip}
.spc-in{width:min(1220px,92vw);margin-inline:auto}
.spc-slug{padding:clamp(4.5rem,9vh,7rem) 0 clamp(1.2rem,3vh,1.8rem)}
.spc-slug__k{font-family:var(--font-heading);font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-part)}
.spc-slug__h{font-family:var(--font-heading);font-weight:800;letter-spacing:-.033em;font-size:clamp(1.45rem,3.2vw,2.35rem);margin:.6rem 0 .5rem;max-width:22ch}
.spc-slug__c{margin:0;color:var(--sp-mut);font-size:.93rem;line-height:1.62;max-width:58ch}

.spc-pick{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.spc-p{appearance:none;cursor:pointer;font:inherit;font-family:var(--font-heading);font-weight:700;font-size:.82rem;
  color:var(--sp-ink);background:rgba(255,255,255,.04);border:1px solid var(--sp-line);border-radius:999px;padding:.5rem 1.05rem;
  transition:border-color .2s var(--sp-e)}
.spc-p:hover{border-color:var(--sp-part)}
.spc-p.is-on{background:var(--sp-ink);color:#0d1016;border-color:var(--sp-ink)}
.spc-p:focus-visible{outline:2px solid var(--sp-part);outline-offset:2px}

.spc-architecture{border:1px solid var(--sp-line);border-radius:12px;background:linear-gradient(145deg,#181e27,#11161d);padding:clamp(1rem,2.6vw,1.6rem);margin-bottom:1rem}
.spc-scheme{position:relative;min-height:250px;border:1px solid var(--sp-line);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 20% 50%,rgba(95,185,143,.08),transparent 28%),#0c1117}
.spc-zone{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.7rem;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sp-mut)}
.spc-zone--house{left:5%;top:20%;width:27%;height:60%}.spc-zone--remote{right:4%;bottom:8%;width:22%;height:24%}
.spc-person{display:inline-block;width:13px;height:17px;margin:.8rem .25rem 0;border-radius:7px 7px 4px 4px;background:var(--sp-go)}
.spc-boundary{position:absolute;left:43%;top:0;height:100%;border-left:1px dashed rgba(219,162,75,.5)}.spc-boundary span{position:absolute;top:8px;left:8px;font-size:.56rem;color:var(--sp-part);white-space:nowrap}
.spc-server{position:absolute;left:65%;top:25%;width:25%;padding:.75rem;border:1px solid rgba(95,185,143,.35);border-radius:8px;background:rgba(95,185,143,.07);font-size:.7rem;font-weight:800;transition:transform .5s var(--sp-e),left .5s var(--sp-e),top .5s var(--sp-e)}
.spc-server i{display:block;height:6px;margin-top:5px;border-radius:2px;background:rgba(255,255,255,.12)}
.spc-path{position:absolute;left:29%;right:31%;top:46%;height:4px;background:var(--sp-part);transform-origin:left;transition:transform .5s var(--sp-e),opacity .5s var(--sp-e)}.spc-path i{position:absolute;width:6px;height:6px;top:-1px;border-radius:50%;background:#fff;animation:spc-flow 1.8s linear infinite}.spc-path i:nth-child(2){animation-delay:-.6s}.spc-path i:nth-child(3){animation-delay:-1.2s}
@keyframes spc-flow{from{left:0}to{left:100%}}
.spc-architecture[data-mode="hosted"] .spc-server{left:56%;top:25%}.spc-architecture[data-mode="onprem"] .spc-server{left:12%;top:39%;transform:scale(.86)}.spc-architecture[data-mode="onprem"] .spc-path{transform:scaleX(.35);opacity:.55}.spc-architecture[data-mode="offline"] .spc-server{left:12%;top:39%;transform:scale(.86)}.spc-architecture[data-mode="offline"] .spc-path{opacity:0}.spc-architecture[data-mode="offline"] .spc-zone--remote{opacity:.35}
.spc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin-top:.7rem}.spc-facts div{border:1px solid var(--sp-line);border-radius:8px;padding:.55rem}.spc-facts span{display:block;font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sp-mut);margin-bottom:.2rem}.spc-facts b{font-size:.73rem;line-height:1.35}.spc-trade{margin:.75rem 0 0;color:var(--sp-mut);font-size:.83rem;line-height:1.55}.spc-trade b{color:var(--sp-ink)}
@media(max-width:720px){.spc-pick{display:grid;grid-template-columns:1fr 1fr}.spc-p{text-align:center}.spc-facts{grid-template-columns:1fr 1fr}.spc-scheme{min-height:300px}.spc-zone--house{left:4%;top:10%;width:42%;height:37%}.spc-boundary{left:50%}.spc-server,.spc-architecture[data-mode="hosted"] .spc-server{left:58%;top:12%;width:35%}.spc-zone--remote{right:4%;bottom:8%;width:40%}.spc-path{left:35%;right:20%;top:31%}.spc-architecture[data-mode="onprem"] .spc-server,.spc-architecture[data-mode="offline"] .spc-server{left:10%;top:25%}}

.spc-board{border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-panel);padding:clamp(1rem,2.6vw,1.5rem)}
.spc-board__k{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-family:var(--font-heading);font-size:.6rem;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-mut);margin:0 0 .9rem}
.spc-assets{display:grid;gap:.4rem}
.spc-a{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;
  border:1px solid var(--sp-line);border-radius:9px;padding:.55rem .75rem;background:rgba(255,255,255,.022);
  transition:border-color .45s var(--sp-e),background .45s var(--sp-e)}
.spc-a__t{font-family:var(--font-heading);font-weight:700;font-size:.82rem}
.spc-a__s{display:block;font-weight:600;font-size:.7rem;color:var(--sp-mut);line-height:1.42}
.spc-v{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;
  padding:.22rem .65rem;white-space:nowrap;border:1px solid transparent;opacity:0;transition:opacity .4s var(--sp-e)}
.spc.is-left .spc-v{opacity:1}
.spc-v--go{background:rgba(95,185,143,.15);color:#a5e6c4;border-color:rgba(95,185,143,.4)}
.spc-v--part{background:rgba(219,162,75,.15);color:#f3d097;border-color:rgba(219,162,75,.4)}
.spc-v--stuck{background:rgba(207,95,74,.15);color:#f5b0a2;border-color:rgba(207,95,74,.45)}
.spc.is-left .spc-a.v-stuck{border-color:rgba(207,95,74,.4);background:rgba(207,95,74,.06)}
.spc.is-left .spc-a.v-part{border-color:rgba(219,162,75,.32)}

.spc-act{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.spc-leave{appearance:none;cursor:pointer;font:inherit;font-family:var(--font-heading);font-weight:800;font-size:.85rem;
  border:none;border-radius:999px;padding:.65rem 1.3rem;background:var(--sp-stuck);color:#1a0906;
  transition:transform .2s var(--sp-e)}
.spc-leave:hover{transform:translateY(-2px)}
.spc-leave:focus-visible{outline:2px solid #fff;outline-offset:3px}
.spc.is-left .spc-leave{background:transparent;color:var(--sp-mut);border:1px solid var(--sp-line)}
.spc-score{font-size:.8rem;color:var(--sp-mut)}
.spc-score b{color:var(--sp-ink)}
.spc-say{margin:.9rem 0 0;font-size:.87rem;color:var(--sp-mut);line-height:1.62;max-width:64ch}
.spc-say b{color:var(--sp-ink)}

.spc-read{padding:clamp(3.5rem,9vh,6rem) 0 clamp(4rem,10vh,7rem);border-top:1px solid var(--sp-line);margin-top:clamp(2.5rem,6vh,4rem)}
.spc-read__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,5vw,4rem);align-items:start}
@media(max-width:880px){.spc-read__grid{grid-template-columns:1fr}}
.spc-read__lead{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.66;margin:0 0 1rem}
.spc-read__p{font-size:.93rem;line-height:1.72;color:var(--sp-mut);margin:0 0 .9rem;max-width:62ch}
.spc-read__p b{color:var(--sp-ink)}
.spc-read__p a,.spc-qa__a a,.spc-rel a{color:var(--sp-go);text-underline-offset:3px}
.spc-qa{border-left:1px solid var(--sp-line);padding-left:clamp(.9rem,2vw,1.6rem)}
@media(max-width:880px){.spc-qa{border-left:none;border-top:1px solid var(--sp-line);padding:1.4rem 0 0}}
.spc-qa__h{font-family:var(--font-heading);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-mut);margin:0 0 1rem}
.spc-qa__i{margin:0 0 1.1rem}
.spc-qa__q{font-family:var(--font-heading);font-weight:700;font-size:.86rem;margin:0 0 .28rem}
.spc-qa__a{font-size:.82rem;line-height:1.62;color:var(--sp-mut);margin:0}
.spc-close{margin-top:clamp(2rem,5vh,3rem);padding-top:1.4rem;border-top:1px solid var(--sp-line)}
.spc-close__t{font-family:var(--font-heading);font-weight:800;letter-spacing:-.028em;font-size:clamp(1.15rem,2.3vw,1.6rem);margin:0 0 .9rem;max-width:32ch}
.spc-go{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-heading);font-weight:700;font-size:.88rem;
  color:#04211a;background:var(--sp-go);text-decoration:none;padding:.68rem 1.25rem;border-radius:999px;transition:transform .22s var(--sp-e)}
.spc-go:hover{transform:translateY(-2px)}
.spc-go--q{background:transparent;color:var(--sp-ink);border:1px solid var(--sp-line)}
.spc-rel{margin:1.1rem 0 0;font-size:.82rem;color:var(--sp-mut)}
@media(prefers-reduced-motion:reduce){.spc-a,.spc-v,.spc-server,.spc-path{transition:none}.spc-path i{animation:none}}