/* shop-analyse.css — Scanner-UI, baut auf pages.css (Tokens, Header, Footer) auf. */
/* WICHTIG: hidden muss display-Klassen schlagen, sonst zeigen sich Spinner/volle Liste trotz [hidden]. */
[hidden]{display:none!important}
main.analyse{padding:64px 0 80px}
main.analyse .wrap{max-width:820px}

.an-intro h1{font-size:clamp(32px,4.5vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin-bottom:14px}
.an-intro .lead{color:var(--fg-soft);font-size:18px;margin-bottom:28px;max-width:640px}

/* Eingabe */
.an-form{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.an-form input[name="url"]{flex:1;min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:var(--pill);
  padding:15px 22px;font:inherit;font-size:16px;color:var(--fg)}
.an-form input[name="url"]::placeholder{color:var(--muted)}
.an-form button{background:var(--accent);color:#fff;border:0;border-radius:var(--pill);padding:15px 30px;
  font:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 6px 22px rgba(203,90,51,.28)}
.an-form button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(203,90,51,.4)}
.an-form button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.an-hint{color:var(--muted);font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Status / Spinner */
.an-status{display:flex;align-items:center;gap:16px;margin-top:32px;color:var(--fg-soft);font-size:16px}
.spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);
  animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fehler */
.an-error{margin-top:28px;background:#fdece7;border:1px solid #e7b6a6;border-radius:var(--radius);
  padding:18px 22px;color:#9a3517;font-size:15px}

/* Ergebnis */
.an-result{margin-top:40px}
.rep-head h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.rep-head h2 span{color:var(--accent);word-break:break-all}
.rep-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--pill);padding:7px 15px;font-size:14px;font-weight:600;border:1px solid var(--border);background:var(--card)}
.chip b{font-weight:700}
.chip.krit{background:#fdece7;border-color:#e7b6a6;color:#b8341a}
.chip.warn{background:#fdf3e8;border-color:#e8c79e;color:#9a5a12}
.chip.hint{background:#f3f1ec;color:var(--fg-soft)}

.rep-speed{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.metric{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 16px;min-width:104px}
.metric .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.metric .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.metric .v.bad{color:#b8341a}.metric .v.mid{color:#9a5a12}.metric .v.good{color:#3a7d44}
.rep-speed-src{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--muted)}

.rep-sub{font-size:15px;font-weight:600;color:var(--fg);margin:8px 0 12px}
.rep-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.rep-list li{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px 14px 46px;
  position:relative;color:var(--fg-soft);font-size:15px;line-height:1.5}
.rep-list li::before{content:"";position:absolute;left:18px;top:18px;width:12px;height:12px;border-radius:50%}
.rep-list li .kat{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.rep-list li.krit::before{background:#c0392b}
.rep-list li.warn::before{background:#cb5a33}
.rep-list li.hint::before{background:#c9a227}
.rep-list li strong{color:var(--fg)}

/* E-Mail-Gate */
.rep-gate{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:14px 0 8px}
.rep-gate-lead{color:var(--fg-soft);font-size:16px;margin-bottom:16px}
.rep-gate-lead strong{color:var(--accent)}
.an-lead{display:grid;gap:14px;max-width:520px}
.an-lead input[type="email"]{background:var(--card);border:1px solid var(--border);border-radius:var(--pill);
  padding:14px 20px;font:inherit;font-size:16px;color:var(--fg)}
.an-lead .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg-soft);line-height:1.45}
.an-lead .consent input{margin-top:3px;flex:none}
.an-lead button{justify-self:start;background:var(--accent);color:#fff;border:0;border-radius:var(--pill);
  padding:14px 28px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  box-shadow:0 6px 22px rgba(203,90,51,.28);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.an-lead button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(203,90,51,.4)}
.an-lead button:disabled{opacity:.55;cursor:not-allowed}

.rep-done{background:#eef6ef;border:1px solid #bfdcc3;border-radius:var(--radius);padding:22px 24px;margin:10px 0 18px}
.rep-done p{color:#2f5d38;font-size:16px;margin-bottom:16px}

@media(max-width:600px){
  main.analyse{padding:44px 0 64px}
  .an-form button{width:100%}
}