
/* System-Karte (Stil der flowsulting-Instagram-Posts) */
.sk{width:min(1060px,calc(100vw - 250px));background:#fbfbfa;border-radius:18px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.8),0 0 0 1px rgba(20,32,27,.08);color:#14201b}
.sk-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff;border-bottom:1px solid rgba(20,32,27,.08);font-size:14px}
.sk-bar b{font-weight:600}.sk-bar .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-logo{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#e7f3ec;color:#047857;font-size:12px;font-weight:700;flex:none}
.sk-on{margin-left:auto;display:flex;align-items:center;gap:8px;color:#56625b;font-size:13px}
.tgl{width:34px;height:20px;border-radius:99px;background:#10b981;position:relative;display:inline-block}.tgl::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.sk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px 0;margin:0}
.sk-cv{position:relative;margin:4px 12px 0;aspect-ratio:1000/360;background-image:radial-gradient(rgba(20,32,27,.13) 1px,transparent 1.2px);background-size:18px 18px}
.sk-cv>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-cv .ed{fill:none;stroke:#b9c1bd;stroke-width:2;transition:stroke .3s}
.sk-cv .ed.dash{stroke-dasharray:4 5}
.sk-cv .ed.hot{stroke:#047857;stroke-width:2.6}
.sk-cv .dotp{fill:#10b981}
.nd{position:absolute;display:flex;flex-direction:column;align-items:center;width:clamp(70px,14%,150px);text-align:center;opacity:.1;transition:opacity .4s,transform .4s;transform:translate(-50%,-30%) scale(.92)}
.nd.in{opacity:1;transform:translate(-50%,-30%)}
.tile{width:clamp(34px,4.6vw,56px);aspect-ratio:1;border-radius:14px;background:#fff;box-shadow:0 1px 0 rgba(20,32,27,.06),0 0 0 1px rgba(20,32,27,.12);display:grid;place-items:center;position:relative;transition:box-shadow .3s}
.tile svg{width:48%;height:48%}
.nd.run .tile{box-shadow:0 0 0 2px #10b981,0 0 0 7px rgba(16,185,129,.18)}
.nd.ok .tile::after{content:"✓";position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:#047857;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.nd b{margin-top:7px;font-size:clamp(10px,.95vw,13px);font-weight:600;line-height:1.25}
.nd small{font-size:clamp(9px,.8vw,11.5px);color:#7a857f}
.nd .lg{margin-top:4px;font-size:clamp(9px,.78vw,11px);color:#047857;font-weight:600;min-height:1.2em;opacity:0;transition:opacity .3s}
.nd.ok .lg{opacity:1}
.pill{position:absolute;transform:translate(-50%,-50%);font-size:11px;padding:2px 8px;border-radius:99px;background:#fff;border:1px solid rgba(20,32,27,.14);color:#56625b;opacity:0;transition:opacity .4s}
.pill.in{opacity:1}
.sk-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px 16px}
.note{flex:1;min-width:260px;background:#fbf3c8;border:1px solid #ecd98a;border-radius:10px;padding:10px 14px;font-size:14px}
.note b{display:block;font-weight:600}.note span{font-size:12.5px;color:#6b5d25}
.sk-go{display:flex;gap:8px;align-items:center}
.sk-go .primary,.sk-go .secondary{min-height:44px;padding:0 18px}
.sk-go button{border:0;cursor:pointer;font:inherit;font-weight:600}
.sk-cap{display:inline-block;margin-top:10px;font-size:13px;color:#e6eae8;text-shadow:0 1px 8px rgba(0,0,0,.7)}
@media (max-width:760px){.sk{width:calc(100vw - 28px)}.sk-cv{margin:4px 4px 0}.nd small,.nd .lg{display:none}.nd b{font-size:9.5px}.pill{font-size:9px;padding:1px 5px}.note{min-width:0;font-size:12.5px}.sk-bar{font-size:12.5px}}
