/* ============================================================
   IT-SicherAhr Speed-Check – Elementor-Widget (gescoped .swps-)
   ============================================================ */
.swps-root{
  --v:#8B5CF6;--c:#22D3EE;--g:#5CE1B0;--ink:#EBEEFA;--muted:#8B93B6;--muted2:#5A628A;
  --bg:#070A14;--surface:#11172E;--line:rgba(140,150,200,.16);
  --good:#5CE1B0;--avg:#FFB020;--bad:#FF5C6E;
  --grad:linear-gradient(110deg,#8B5CF6,#22D3EE 55%,#5CE1B0);
  --display:"Space Grotesk",-apple-system,system-ui,sans-serif;
  --body:"Inter",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  font-family:var(--body);color:var(--ink);max-width:760px;margin:0 auto;
}
.swps-root *{box-sizing:border-box}

.swps-card{position:relative;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(160deg,rgba(22,29,56,.55),rgba(11,16,34,.55));padding:32px;overflow:hidden}
.swps-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 80% 0%,rgba(139,92,246,.16),transparent 70%),radial-gradient(50% 50% at 0% 100%,rgba(34,211,238,.12),transparent 70%)}
.swps-card>*{position:relative;z-index:1}

.swps-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c)}
.swps-h{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.4vw,30px);margin:12px 0 8px;color:var(--ink)}
.swps-sub{color:var(--muted);font-size:15.5px;margin:0 0 22px}

.swps-form{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.swps-input{flex:1 1 240px;min-width:0;background:rgba(7,10,20,.6);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-family:var(--body);font-size:15px;padding:13px 16px;outline:none;transition:border-color .25s,box-shadow .25s}
.swps-input::placeholder{color:var(--muted2)}
.swps-input:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.swps-seg{display:inline-flex;background:rgba(7,10,20,.6);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.swps-seg button{background:none;border:none;color:var(--muted);font-family:var(--body);font-size:14px;font-weight:600;
  padding:9px 16px;border-radius:9px;cursor:pointer;transition:color .2s,background .2s}
.swps-seg button.on{color:#06080F;background:var(--grad)}
.swps-btn{background:var(--grad);color:#06080F;border:none;border-radius:12px;font-family:var(--body);font-weight:700;
  font-size:15px;padding:13px 26px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 24px rgba(34,211,238,.25)}
.swps-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(34,211,238,.4)}
.swps-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.swps-note{color:var(--muted2);font-size:12.5px;margin:16px 0 0;font-family:var(--mono);letter-spacing:.02em}

/* Loading */
.swps-loading{text-align:center;padding:48px 20px}
.swps-spin{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--c),var(--v),var(--g),var(--c));
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);
  animation:swpsSpin 1s linear infinite}
@keyframes swpsSpin{to{transform:rotate(360deg)}}
.swps-loading-msg{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.swps-loading-sub{color:var(--muted);font-size:13.5px;margin-top:8px}

/* Error */
.swps-error{border:1px solid rgba(255,92,110,.4);background:rgba(255,92,110,.08);color:#FFB9C1;
  border-radius:14px;padding:18px 20px;font-size:14.5px;margin-top:8px}
.swps-error b{color:#fff}

/* Result */
.swps-capture{border-radius:18px;background:linear-gradient(160deg,#11172E,#0B1022);border:1px solid var(--line);padding:28px}
.swps-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px}
.swps-mark{width:24px;height:24px;border-radius:7px;background:var(--grad);position:relative;flex:none}
.swps-mark::after{content:"";position:absolute;inset:5px;border:2px solid rgba(7,10,20,.85);border-radius:4px}
.swps-rhead{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.03em;margin-bottom:24px;word-break:break-all}
.swps-rhead b{color:var(--c)}

.swps-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.swps-ring{display:flex;flex-direction:column;align-items:center;text-align:center}
.swps-ring svg{width:104px;height:104px;transform:rotate(-90deg)}
.swps-ring .trk{fill:none;stroke:rgba(140,150,200,.16);stroke-width:9}
.swps-ring .val{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.swps-ring-num{font-family:var(--display);font-weight:700;font-size:24px;margin-top:-66px;margin-bottom:32px}
.swps-ring-lbl{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.3}

.swps-cwv{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.swps-tile{border:1px solid var(--line);border-radius:12px;background:rgba(7,10,20,.45);padding:14px 12px;text-align:center}
.swps-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-bottom:8px}
.swps-tile-v{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.swps-tile-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted2);text-transform:uppercase;margin-top:5px}

.swps-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.swps-pdf{background:var(--grad);color:#06080F;border:none;border-radius:12px;font-weight:700;font-size:14.5px;padding:12px 22px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.swps-pdf:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(34,211,238,.35)}
.swps-pdf:disabled{opacity:.6;cursor:wait;transform:none}
.swps-again{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:14.5px;padding:12px 22px;cursor:pointer;transition:background .2s}
.swps-again:hover{background:rgba(255,255,255,.1)}

@media(max-width:680px){
  .swps-card{padding:24px}
  .swps-scores{grid-template-columns:repeat(2,1fr);gap:18px}
  .swps-cwv{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .swps-cwv{grid-template-columns:1fr 1fr}
  .swps-seg,.swps-btn,.swps-input{flex:1 1 100%}
}