/* Sensormanager · Schnittstellen (software.html#schnittstellen) */
.ssi{--ssi-out:#3b7bbd;--ssi-hub:#1b3a5c;--ssi-hub2:#0f2a44;--ssi-warn:#c2410c}
[data-theme=dark] .ssi{--ssi-out:#8cc4f0;--ssi-hub:#1d4468;--ssi-hub2:#0b2036;--ssi-warn:#f08a4b}
.ssi .sp-head{max-width:860px}

.ssi-links{display:flex;flex-wrap:wrap;gap:10px 30px}

/* Beispiel-Leiste */
.ssi-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px}
.ssi-bar-label{font-size:.85rem;color:var(--sp-muted);margin-right:4px}
.ssi-play,.ssi-stop{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.9rem;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid var(--sp-line);background:var(--sp-bg);color:var(--sp-text);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.ssi-play:hover,.ssi-stop:hover{border-color:var(--sp-accent)}
.ssi-play[aria-pressed=true]{background:var(--sp-accent);border-color:var(--sp-accent);color:var(--sp-bg)}
.ssi-play svg,.ssi-stop svg{width:14px;height:14px;flex:none}
.ssi-play:focus-visible,.ssi-stop:focus-visible,.ssi-node:focus-visible,.ssi-core:focus-visible{outline:3px solid var(--sp-accent);outline-offset:3px}

/* Karte der Datenflüsse */
.ssi-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.78fr) minmax(0,1fr);gap:0 clamp(44px,7vw,110px);align-items:center}
.ssi-wires{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.ssi-wire{fill:none;stroke:var(--sp-line);stroke-width:1.6;transition:stroke .3s,stroke-width .3s}
.ssi-wire.is-active{stroke:var(--sp-accent);stroke-width:2.6}
.ssi-pkt{fill:var(--sp-accent)}
.ssi-pkt.is-out{fill:var(--ssi-out)}
.ssi-pkt.is-big{stroke:var(--sp-bg);stroke-width:2}
.ssi-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.ssi-in{gap:26px}
.ssi-col-title{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sp-muted);margin:0 0 2px}
.ssi-node{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:1px 12px;align-items:center;width:100%;text-align:left;padding:9px 14px 9px 10px;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-bg);color:var(--sp-text);font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .2s}
.ssi-node:hover{border-color:var(--sp-accent);transform:translateY(-1px)}
.ssi-node strong{font-size:.92rem;line-height:1.25;font-weight:600}
.ssi-node small{font-size:.78rem;line-height:1.35;color:var(--sp-muted)}
.ssi-ic{grid-row:span 2;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sp-tint);color:var(--sp-accent);transition:background .25s,color .25s}
.ssi-out .ssi-ic{color:var(--ssi-out)}
.ssi-ic svg,.ssi-db svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ssi-node[aria-pressed=true],.ssi-node.is-lit{border-color:var(--sp-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sp-accent) 22%,transparent)}
.ssi-node.is-lit .ssi-ic{background:var(--sp-accent);color:var(--sp-bg)}
.ssi-node.is-done:after{content:'✓';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;background:var(--sp-accent);color:var(--sp-bg)}
.ssi-node.is-ping .ssi-ic{animation:ssi-ping .9s ease-out}
@keyframes ssi-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sp-accent) 60%,transparent)}100%{box-shadow:0 0 0 16px transparent}}

/* Herzstück */
.ssi-hub{position:relative;z-index:1}
.ssi-core{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 18px 24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(160deg,var(--ssi-hub),var(--ssi-hub2));color:#fff;font:inherit;text-align:center;cursor:pointer;box-shadow:0 24px 50px -24px rgba(15,42,68,.6)}
.ssi-core:before,.ssi-core:after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--sp-accent);opacity:0;pointer-events:none}
.ssi.is-js .ssi-core:before{animation:ssi-ring 3.2s ease-out infinite}
.ssi.is-js .ssi-core:after{animation:ssi-ring 3.2s ease-out 1.6s infinite}
@keyframes ssi-ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
.ssi-core.is-pulse{animation:ssi-pulse 1.1s ease-out}
@keyframes ssi-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sp-accent) 70%,transparent)}100%{box-shadow:0 0 0 26px transparent}}
.ssi-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.1);margin-bottom:6px}
.ssi-mark svg{width:30px;height:30px;fill:none;stroke:#7ee0cd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ssi-core strong{font-size:1.28rem;letter-spacing:-.01em;color:#fff}
.ssi-verbs{font-size:.84rem;color:#b9d3e6}
.ssi-db{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.78rem;color:#e6f1f8}
.ssi-db svg{width:16px;height:16px}
.ssi-hint{font-size:.72rem;color:#9fbcd3;margin-top:4px}
.ssi-badge{position:absolute;top:-13px;right:-6px;padding:5px 11px;border-radius:999px;background:var(--ssi-warn);color:#fff;font-size:.75rem;font-weight:700;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s;pointer-events:none}
.ssi-badge.is-on{opacity:1;transform:none}

/* Erklärfeld */
.ssi-detail{margin-top:30px;padding:22px 26px;border:1px solid var(--sp-line);border-radius:16px;background:var(--sp-tint);min-height:150px}
.ssi-info+.ssi-info{margin-top:22px}
.ssi.is-js .ssi-info+.ssi-info{margin-top:0}
.ssi-info h3,.ssi-story h3{font-size:1.12rem;margin:0 0 8px}
.ssi-info p{margin:0 0 10px;line-height:1.62;max-width:880px}
.ssi-how{font-size:.9rem;color:var(--sp-text)!important}
.ssi-how b{font-weight:600}
.ssi-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.ssi-tags li{font-size:.76rem;padding:4px 10px;border-radius:999px;border:1px solid var(--sp-line);background:var(--sp-bg);color:var(--sp-text)}
.ssi-story-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.ssi-story-step{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sp-accent)}
.ssi-story-dots{display:flex;gap:6px}
.ssi-story-dots i{width:8px;height:8px;border-radius:50%;background:var(--sp-line);transition:background .3s,transform .3s}
.ssi-story-dots i.is-done{background:color-mix(in srgb,var(--sp-accent) 55%,var(--sp-line))}
.ssi-story-dots i.is-now{background:var(--sp-accent);transform:scale(1.3)}
.ssi-story-text{font-size:1.04rem;line-height:1.6;color:var(--sp-text)!important;margin:0;max-width:880px}
.ssi-story-text b{font-weight:600}
.ssi-steps{display:none}

/* Vier Wege */
.ssi-sub{margin:64px 0 22px;max-width:810px}
.ssi-sub h3{font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:-.02em;margin:0 0 10px}
.ssi-sub p{margin:0;line-height:1.6}
.ssi-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ssi-way{display:flex;flex-direction:column;border:1px solid var(--sp-line);border-radius:16px;background:var(--sp-bg);overflow:hidden}
.ssi-art{height:124px;background:var(--sp-tint);color:var(--sp-accent);display:grid;place-items:center;border-bottom:1px solid var(--sp-line)}
.ssi-art svg{width:100%;max-width:230px;height:112px}
.ssi-art .l{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ssi-art .f{fill:var(--sp-bg);stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ssi-art .d{fill:none;stroke:var(--sp-line);stroke-width:2;stroke-dasharray:4 6}
.ssi-art .a{fill:currentColor}
.ssi-art .o{fill:var(--ssi-out)}
.ssi-art text{font-size:9px;font-weight:700;fill:var(--sp-text)}
.ssi-way-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ssi-way-kicker{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sp-accent)}
.ssi-way h4{font-size:1.04rem;margin:0;color:var(--sp-text)}
.ssi-way p{margin:0;font-size:.92rem;line-height:1.58}
.ssi-way .ssi-like{font-style:italic}
.ssi-way .ssi-tags{margin-top:auto;padding-top:6px}

/* Animationen der Wege */
.ssi.is-js .ssi-a-doc{animation:ssi-doc 3.4s ease-in-out infinite}
@keyframes ssi-doc{0%,12%{transform:translateY(-8px);opacity:0}30%{opacity:1}62%,80%{transform:translateY(22px);opacity:1}100%{transform:translateY(30px);opacity:0}}
.ssi.is-js .ssi-a-mail{animation:ssi-mail 3.6s ease-in-out infinite}
@keyframes ssi-mail{0%{transform:translateX(0);opacity:0}12%{opacity:1}80%{transform:translateX(106px);opacity:1}100%{transform:translateX(112px);opacity:0}}
.ssi.is-js .ssi-a-hand{transform-origin:40px 30px;animation:ssi-hand 3.6s linear infinite}
@keyframes ssi-hand{to{transform:rotate(360deg)}}
.ssi.is-js .ssi-a-req{animation:ssi-req 3s ease-in-out infinite}
.ssi.is-js .ssi-a-res{animation:ssi-res 3s ease-in-out infinite}
@keyframes ssi-req{0%{transform:translateX(0);opacity:0}8%{opacity:1}42%{transform:translateX(96px);opacity:1}50%,100%{transform:translateX(96px);opacity:0}}
@keyframes ssi-res{0%,50%{transform:translateX(0);opacity:0}58%{opacity:1}92%{transform:translateX(-96px);opacity:1}100%{transform:translateX(-96px);opacity:0}}
.ssi.is-js .ssi-a-blink{animation:ssi-blink 2.4s ease-in-out infinite}
@keyframes ssi-blink{0%,100%{opacity:.25}50%{opacity:1}}

/* Fragen */
.ssi-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ssi-faq details{border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-bg);padding:0 20px}
.ssi-faq summary{cursor:pointer;list-style:none;padding:16px 26px 16px 0;position:relative;font-weight:600;color:var(--sp-text);line-height:1.4}
.ssi-faq summary::-webkit-details-marker{display:none}
.ssi-faq summary:after{content:'+';position:absolute;right:0;top:13px;font-size:1.3rem;color:var(--sp-accent);font-weight:400}
.ssi-faq details[open] summary:after{content:'–'}
.ssi-faq details p{margin:0 0 16px;line-height:1.6;font-size:.94rem}
.ssi-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:34px;padding:24px 28px;border-radius:16px;background:linear-gradient(135deg,var(--ssi-hub),var(--ssi-hub2))}
.ssi-cta p{margin:0;color:#dcebf6!important;max-width:680px;line-height:1.55}
.ssi-cta strong{display:block;color:#fff;font-size:1.12rem;margin-bottom:4px}
.software-page .ssi-cta .btn-primary{background:#7ee0cd;color:#0f2a44}

@media(max-width:1050px){
  .ssi-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .ssi-map{grid-template-columns:minmax(0,1fr);gap:10px;padding-left:30px}
  .ssi-in{gap:10px}
  .ssi-hub{margin:18px 0}
  .ssi-out .ssi-col-title{margin-top:4px}
}
@media(max-width:760px){
  .ssi-ways,.ssi-faq{grid-template-columns:minmax(0,1fr)}
  .ssi-detail{padding:18px 18px}
  .ssi-cta{padding:22px 20px}
  .ssi-bar-label{width:100%}
  .ssi-sub{margin-top:48px}
}
@media(prefers-reduced-motion:reduce){
  .ssi *,.ssi *:before,.ssi *:after{animation:none!important;transition:none!important}
}
@media(max-width:900px){
  .ssi-col .ssi-detail{margin:0 0 6px;min-height:0;padding:16px 18px}
  .ssi-hub .ssi-detail{margin-top:12px}
  .ssi.is-story .ssi-detail{position:sticky;bottom:84px;z-index:4;min-height:0;box-shadow:0 14px 36px -12px rgba(8,24,40,.45)}
}