/* Siteprex Check – Frontend im dunklen Siteprex-Look.
   Alle Werte als CSS-Variablen, damit sie sich an das Theme
   anpassen oder per Customizer überschreiben lassen. */

.spx-check{
  --spx-bg:#0A0711;
  --spx-card:#160F22;
  --spx-line:rgba(255,255,255,.09);
  --spx-line-strong:rgba(255,255,255,.14);
  --spx-head:#EFEAF6;
  --spx-muted:#A89DBB;
  --spx-dim:#6F6584;
  --spx-purple:#790197;
  --spx-pink:#C80090;
  --spx-grad:linear-gradient(120deg,#790197 0%,#C80090 100%);
  --spx-ok:#52CC91;
  --spx-warn:#F4B842;
  --spx-crit:#EE6659;
  --spx-radius:16px;
  font-family:inherit;
  color:var(--spx-head);
  max-width:720px;
}

/* Eingabefeld */
.spx-check__field{
  display:flex;gap:0;align-items:center;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--spx-line-strong);
  border-radius:999px;padding:6px 6px 6px 22px;
}
/* Hohe Spezifitaet: Hello Elementor reset.css setzt input[type=text]
   auf border 1px / radius 3px / padding .5rem 1rem und wuerde sonst gewinnen. */
.spx-check .spx-check__field input.spx-check__input,
.spx-check .spx-check__field input.spx-check__input[type=text],
.spx-check .spx-check__field input.spx-check__input[type=url]{
  flex:1;min-width:0;width:auto;border:0;border-radius:0;background:transparent;
  box-shadow:none;color:var(--spx-head);font-size:16px;font-family:inherit;
  padding:10px 0;margin:0;transition:none;
}
.spx-check .spx-check__field input.spx-check__input::placeholder{color:var(--spx-dim)}
.spx-check .spx-check__field input.spx-check__input:focus,
.spx-check .spx-check__field input.spx-check__input[type=text]:focus{
  outline:none;border:0;box-shadow:none;
}
.spx-check__btn{
  white-space:nowrap;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:16px;color:#fff;
  background:var(--spx-grad);border-radius:999px;padding:14px 26px;
  transition:transform .15s ease;
}
.spx-check__btn:hover{transform:translateY(-1px)}
.spx-check__btn:disabled{opacity:.6;cursor:default;transform:none}

.spx-check__error{
  margin-top:12px;color:var(--spx-crit);font-size:14px;
}

/* Scan-Fortschritt */
.spx-check__scanning{
  margin-top:26px;background:var(--spx-card);
  border:1px solid var(--spx-line);border-radius:var(--spx-radius);
  padding:22px 24px;
}
.spx-scan-row{
  display:flex;align-items:center;gap:12px;padding:8px 0;
  font-size:15px;color:var(--spx-dim);opacity:.4;transition:opacity .3s;
}
.spx-scan-row.is-done{opacity:1;color:var(--spx-head)}
.spx-scan-row.is-done .spx-scan-spin{display:none}
.spx-scan-row.is-done::after{content:"✓";margin-left:auto;color:var(--spx-ok);font-weight:700}
.spx-scan-spin{
  width:14px;height:14px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--spx-line);border-top-color:var(--spx-pink);
  animation:spx-spin .7s linear infinite;
}
@keyframes spx-spin{to{transform:rotate(360deg)}}

/* Ergebnis */
.spx-check__result{margin-top:28px}
.spx-result-head{margin-bottom:20px}
.spx-result-head h3{
  margin:0 0 12px;font-size:22px;font-weight:700;color:var(--spx-head);
}
.spx-result-head .spx-url{
  background:var(--spx-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.spx-scoreband{display:flex;flex-wrap:wrap;gap:10px}
.spx-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--spx-card);border:1px solid var(--spx-line);
  border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;
}
.spx-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.spx-dot--ok{background:var(--spx-ok)}
.spx-dot--warn{background:var(--spx-warn)}
.spx-dot--crit{background:var(--spx-crit)}

.spx-findings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:640px){.spx-findings{grid-template-columns:1fr}}
.spx-finding{
  background:var(--spx-card);border:1px solid var(--spx-line);
  border-radius:var(--spx-radius);padding:20px 22px;
}
.spx-finding__cat{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--spx-muted);
}
.spx-finding__title{font-size:15.5px;font-weight:700;margin:0 0 6px;color:var(--spx-head)}
.spx-finding__text{font-size:14px;color:var(--spx-muted);line-height:1.5;margin:0}

/* Gesperrte Kritisch-Karte */
.spx-locked{
  grid-column:1/-1;position:relative;overflow:hidden;
  border:1.5px solid transparent;border-radius:var(--spx-radius);
  background:
    linear-gradient(var(--spx-card),var(--spx-card)) padding-box,
    var(--spx-grad) border-box;
  padding:26px 24px;text-align:center;
}
.spx-locked__lock{
  width:44px;height:44px;border-radius:50%;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--spx-grad);font-size:18px;
}
.spx-locked__title{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--spx-head)}
.spx-locked__text{font-size:14px;color:var(--spx-muted);line-height:1.55;max-width:560px;margin:0 auto 18px}
.spx-locked__cta{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;font-weight:700;font-size:15px;color:#fff;
  background:var(--spx-grad);border-radius:999px;padding:12px 24px;
}

/* Kontakt-Formular (Vollcheck) */
.spx-contact{
  margin-top:22px;background:var(--spx-card);
  border:1px solid var(--spx-line);border-radius:20px;padding:26px;
}
.spx-contact.is-hidden{display:none}
.spx-contact h4{margin:0 0 16px;font-size:18px;font-weight:700;color:var(--spx-head)}
.spx-field{margin-bottom:14px}
.spx-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--spx-muted)}
.spx-field input{
  width:100%;box-sizing:border-box;border:1.5px solid var(--spx-line-strong);
  background:rgba(255,255,255,.04);color:var(--spx-head);
  border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;
}
.spx-field input:focus{outline:none;border-color:var(--spx-purple)}
.spx-contact__submit{
  width:100%;border:0;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:16px;color:#fff;background:var(--spx-grad);
  border-radius:999px;padding:14px;margin-top:4px;
}
.spx-contact__note{font-size:12.5px;color:var(--spx-dim);text-align:center;margin:12px 0 0}
.spx-contact__done{font-size:16px;font-weight:600;color:var(--spx-head);text-align:center}

@media (prefers-reduced-motion: reduce){
  .spx-scan-spin{animation:none}
  .spx-check__btn{transition:none}
}

/* Mobil: Feld und Button untereinander */
@media(max-width:520px){
  .spx-check__field{flex-wrap:wrap;gap:8px;padding:8px;border-radius:22px;}
  .spx-check .spx-check__field input.spx-check__input,
  .spx-check .spx-check__field input.spx-check__input[type=text]{flex:1 1 100%;width:100%;padding:10px 10px;}
  .spx-check__btn{width:100%;}
}

/* Honigtopf gegen Bots.
   Bewusst NICHT display:none - schlaue Bots ueberspringen versteckte Felder.
   Stattdessen aus dem sichtbaren Bereich geschoben und aus der Tab-Reihenfolge
   genommen, damit auch Screenreader und Tastaturnutzer nicht darauf stossen. */
.spx-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}