/* ============================================================
   WOW Website-Checker - Styles (Dark-Design nach Vorlage)
   Diese Datei kann als "wow-checker.css" ins Child-Theme gelegt
   werden und hat dort Vorrang vor dem mitgelieferten Plugin-CSS.

   Farben zentral anpassbar ueber die Variablen unten.
   Das Limettengruen ist aus dem Screenshot geschaetzt -
   bei Bedarf --wsc-brand auf den exakten Markenwert setzen.
   ============================================================ */
.wsc {
  /* Schriftfamilie: erster Name, der auf der Seite geladen ist, gewinnt.
     Falls die Schrift dennoch nicht greift: exakten Namen per Rechtsklick auf
     normalen Seitentext -> Untersuchen -> "Berechnet" -> font-family auslesen
     und hier an erster Stelle eintragen. */
  --wsc-font: "Host Grotesk", "HostGrotesk", "host-grotesk", "Host Grotesk Variable", "Poppins", "Inter", system-ui, -apple-system, sans-serif;

  --wsc-brand:      #86E01E;   /* WOW-Limettengruen (Buttons, Icons, Pass) */
  --wsc-brand-dark: #6FC110;   /* Hover */
  --wsc-on-brand:   #192321;   /* Text auf gruenen/farbigen Flaechen (laut Design) */

  --wsc-bg-card:    #1B1F24;   /* Formular-Karte, CTA-Karte */
  --wsc-bg-row:     #191C21;   /* Ergebnis-Zeilen */
  --wsc-line:       #2A2F35;   /* Trennlinien, Kartenrand */

  --wsc-text:       #FFFCF7;   /* Ueberschriften, Labels (laut Design) */
  --wsc-muted:      #AEB4B0;   /* Fliesstext, Details */

  --wsc-pass:       #86E01E;
  --wsc-warn:       #EFA90F;
  --wsc-fail:       #E25549;
  --wsc-fail-soft:  #EE8484;   /* Banner-Hintergrund bei "fail" */

  font-family: var(--wsc-font);
  color: var(--wsc-text);
  line-height: 1.55;
}
.wsc * { box-sizing: border-box; }
.wsc h2, .wsc h3 { font-family: var(--wsc-font); letter-spacing: -0.01em; }

/* --- Kopfbereich: zentriert, weiss auf dunklem Seitenhintergrund --- */
.wsc-head { margin-bottom: 28px; text-align: center; }
.wsc-eyebrow {
  font-size: 20px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wsc-text); margin: 0 0 52px;
}
.wsc-head h2 { font-size: 46px; font-weight: 700; margin: 0 0 32px; line-height: 1.2; color: var(--wsc-text); }
.wsc-head p  { margin: 0 auto; max-width: 1320px; color: var(--wsc-text); font-size: 24px; line-height: 1.5; }

/* --- Formular: dunkle Karte, Label, Feld, zentrierter Button --- */
.wsc-form {
  display: flex; flex-direction: column;
  font-family: var(--wsc-font);
  max-width: 1100px; margin: 0 auto;  /* Abstand nach oben jetzt ueber die Divi-Sektion steuern */
  background: var(--wsc-bg-card);
  border: 1px solid var(--wsc-line);
  border-radius: 16px;
  padding: 32px 40px 38px;
}
.wsc-form::before {
  content: "Deine Website";
  font-size: 18px; font-weight: 600; color: var(--wsc-text);
  margin-bottom: 12px;
}
.wsc-form input {
  width: 100%;
  font-family: var(--wsc-font);
  font-size: 16px; font-weight: 400;
  padding: 16px 18px; border: none;
  border-radius: 10px; background: #FFFFFF; color: #141414;
}
.wsc-form input::placeholder { color: #9AA0A6; font-family: var(--wsc-font); font-size: 16px; font-weight: 400; }
.wsc-form input:focus { outline: 3px solid var(--wsc-brand); outline-offset: 1px; }
.wsc-form button {
  align-self: center; margin-top: 32px;
  font-family: var(--wsc-font);
  font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 15px 36px; border: none; border-radius: 999px;
  background: var(--wsc-brand); color: var(--wsc-on-brand); white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.wsc-form button:hover  { background: var(--wsc-brand-dark); transform: translateY(-1px); }
.wsc-form button:focus-visible { outline: 3px solid var(--wsc-text); outline-offset: 2px; }
.wsc-form button:disabled { background: #4E6033; color: #B9C4AC; cursor: wait; transform: none; }

.wsc-hint {
  font-size: 13px; color: var(--wsc-muted);
  margin: 16px auto 0; max-width: 1100px; text-align: center;
}

/* --- Ladeanzeige --- */
.wsc-status { margin: 24px auto 0; max-width: 1100px; text-align: center; font-size: 15px; color: var(--wsc-muted); }
.wsc-status[hidden] { display: none; }
.wsc-spinner {
  display: inline-block; width: 16px; height: 16px; margin-right: 9px;
  border: 2.5px solid var(--wsc-line); border-top-color: var(--wsc-brand);
  border-radius: 50%; vertical-align: -3px;
  animation: wsc-spin 0.8s linear infinite;
}
@keyframes wsc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wsc-spinner { animation-duration: 2s; } }

.wsc-error {
  margin: 24px auto 0; max-width: 1100px;
  padding: 15px 22px; border-radius: 12px;
  background: rgba(226, 85, 73, 0.14);
  border: 1px solid var(--wsc-fail); color: #FFB1AA; font-size: 15px;
  text-align: center;
}

/* --- Ergebnis: Banner-Urteil + dunkle Listenzeilen --- */
.wsc-report { max-width: 1500px; margin: 36px auto 0; background: transparent; border: none; border-radius: 0; overflow: hidden; }

.wsc-verdict { padding: 0; border-bottom: none; }
.wsc-verdict-row { display: block; }
.wsc-verdict h3 {
  margin: 0; padding: 15px 20px;
  font-size: 18px; font-weight: 600; text-align: center;
  color: var(--wsc-on-brand);
}
.wsc-verdict h3.pass { background: var(--wsc-pass); }
.wsc-verdict h3.warn { background: var(--wsc-warn); }
.wsc-verdict h3.fail { background: var(--wsc-fail-soft); }

/* Gepruefte URL, Ergebnisbalken und Legende sind in dieser Optik
   ausgeblendet - zum Reaktivieren die display-Zeilen entfernen. */
.wsc-verdict-url { display: none; }
.wsc-bar    { display: none; }
.wsc-legend { display: none; }

.wsc-checks { list-style: none; margin: 0; padding: 0; }
.wsc-checks li {
  display: grid;
  grid-template-columns: clamp(56px, 21%, 320px) 1fr;
  align-items: center;
  background: var(--wsc-bg-row);
  padding: 22px 26px;
  border-bottom: 1px solid var(--wsc-line);
}
.wsc-ico {
  width: 24px; height: 24px; justify-self: start; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: #FFFFFF; margin-top: 1px;
}
.wsc-ico.pass { background: var(--wsc-pass); color: var(--wsc-on-brand); }
.wsc-ico.warn { background: var(--wsc-warn); color: var(--wsc-on-brand); }
.wsc-ico.fail { background: var(--wsc-fail); }
.wsc-ico.info { background: #5A616A; }
.wsc-check-label  { font-weight: 600; font-size: 18px; color: var(--wsc-text); }
.wsc-check-detail { font-weight: 400; font-size: 18px; color: var(--wsc-text); word-break: break-word; line-height: 1.6; }

/* --- Defekte Links --- */
.wsc-broken { background: var(--wsc-bg-row); padding: 6px 24px 22px; border-bottom: 1px solid var(--wsc-line); }
.wsc-broken h3 { font-size: 17px; font-weight: 700; margin: 16px 0 8px; color: var(--wsc-text); }
.wsc-broken table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--wsc-muted); }
.wsc-broken th { text-align: left; font-weight: 600; color: var(--wsc-muted);
  padding: 6px 8px 6px 0; border-bottom: 1px solid var(--wsc-line); font-size: 13px; }
.wsc-broken td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--wsc-line); vertical-align: top; word-break: break-all; }
.wsc-broken td.status { color: var(--wsc-fail-soft); font-weight: 700; white-space: nowrap; }

/* --- CTA nach dem Ergebnis ---
   In dieser Optik ausgeblendet, weil die Seite darunter bereits ein
   eigenes Anfrage-Formular hat. Zum Reaktivieren die naechste Zeile
   (display: none) entfernen. */
.wsc-cta { display: none; }
.wsc-cta {
  margin: 28px auto 0; max-width: 760px;
  padding: 26px 28px; border-radius: 18px;
  background: var(--wsc-bg-card); border: 1px solid var(--wsc-line);
  display: none; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.wsc-cta-text h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; color: var(--wsc-text); }
.wsc-cta-text p  { margin: 0; font-size: 14.5px; color: var(--wsc-muted); }
.wsc-cta a {
  font-family: var(--wsc-font);
  display: inline-block; font-size: 15px; font-weight: 700; text-decoration: none;
  padding: 14px 30px; border-radius: 999px;
  background: var(--wsc-brand); color: var(--wsc-on-brand); white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.wsc-cta a:hover { background: var(--wsc-brand-dark); color: var(--wsc-on-brand); transform: translateY(-1px); }

.wsc-footnote { padding: 16px 24px 0; font-size: 12.5px; color: var(--wsc-muted); text-align: center; }

/* --- Mobil --- */
@media (max-width: 560px) {
  .wsc-head h2 { font-size: 32px; margin-bottom: 20px; }
  .wsc-eyebrow { margin-bottom: 18px; }
  .wsc-head p { font-size: 18px; }
  .wsc-eyebrow { font-size: 16px; }
  .wsc-form { margin-top: 40px; padding: 22px 18px 24px; }
  .wsc-form button { width: 100%; }
  .wsc-checks li { grid-template-columns: 40px 1fr; padding: 16px 16px; }
  .wsc-broken { padding-left: 16px; padding-right: 16px; }
  .wsc-cta { padding: 20px 18px; }
  .wsc-cta a { width: 100%; text-align: center; }
  #wsc	{width:96%; margin-left:2%; }
}

/* --- Schrift im Ergebnis- und Textbereich erzwingen ---
   Divi nutzt teils ID-Selektoren (#et-boc, #page-container) mit hoeherer
   Spezifitaet; !important stellt sicher, dass Schriftfamilie und -gewichte
   des Widgets ueberall gewinnen. */
.wsc .wsc-checks li,
.wsc .wsc-checks li span,
.wsc .wsc-check-label,
.wsc .wsc-check-detail,
.wsc .wsc-verdict h3,
.wsc .wsc-broken,
.wsc .wsc-broken table,
.wsc .wsc-broken th,
.wsc .wsc-broken td,
.wsc .wsc-form,
.wsc .wsc-form input,
.wsc .wsc-form button,
.wsc .wsc-hint,
.wsc .wsc-status,
.wsc .wsc-error,
.wsc .wsc-footnote {
  font-family: var(--wsc-font) !important;
}
.wsc .wsc-check-label  { font-weight: 600 !important; }
.wsc .wsc-check-detail { font-weight: 300 !important; }
.wsc .wsc-checks li    { font-weight: 300; }
.wsc .wsc-verdict h3   { font-weight: 600 !important; }

/* --- Linkbox (Defekte Links & Bilder): Divi-Eingriffe neutralisieren ---
   Divi setzt eigene Farben auf h3 und eigene Rahmen/Abstaende auf Tabellen. */
.wsc .wsc-broken h3 { color: var(--wsc-text) !important; margin: 16px 0 10px !important; }
.wsc .wsc-broken table {
  border: none !important; background: transparent !important;
  margin: 0 !important; width: 100%;
}
.wsc .wsc-broken th, .wsc .wsc-broken td {
  border: none !important;
  border-bottom: 1px solid var(--wsc-line) !important;
  background: transparent !important;
  padding: 10px 12px 10px 0 !important;
  text-align: left;
}
.wsc .wsc-broken th { color: var(--wsc-text) !important; font-weight: 600 !important; }
.wsc .wsc-broken td { color: var(--wsc-text) !important; font-weight: 400 !important; }
.wsc .wsc-broken td.status { color: var(--wsc-fail-soft) !important; font-weight: 700 !important; }
.wsc .wsc-broken tr:last-child td { border-bottom: none !important; }

/* --- Ergebnisliste: Einrueckung von Divi/WordPress entfernen ---
   Divi setzt ueber ID-Selektoren (#et-boc usw.) padding/list-style auf ul
   und li; das rueckt die Liste ein. Hier mit !important neutralisiert. */
.wsc ul.wsc-checks,
.wsc .wsc-checks {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wsc .wsc-checks li {
  list-style: none !important;
  margin: 0 !important;
}
.wsc .wsc-checks li::marker { content: none; }