/* ============================================================================
   /website-check/ — Landingpage-eigene Komponenten
   Nutzt ausschließlich bestehende Design-Tokens aus variables.css.
   Keine zweite parallele Designwelt — nur neue Komponenten, die es sonst
   auf der Seite nicht gibt (Formular-Card, Segmented Control, Chips,
   Report-Vorschau).
   ============================================================================ */

/* --- Reduzierter Header ---------------------------------------------------- */
.wcheck-header .header-cta {
  display: inline-flex;
  padding-inline: var(--space-sm);
  font-size: var(--fs-small);
}

.wcheck-header-cta__short {
  display: inline;
}

.wcheck-header-cta__full {
  display: none;
}

@media (min-width: 480px) {
  .wcheck-header .header-cta {
    padding-inline: 1.75rem;
    font-size: 1rem;
  }

  .wcheck-header-cta__short {
    display: none;
  }

  .wcheck-header-cta__full {
    display: inline;
  }
}

/* --- Hero + Formular-Grid --------------------------------------------------- */
.wcheck-hero {
  padding-block: var(--space-2xl);
}

.wcheck-hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.wcheck-trust-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-dark-muted);
}

.wcheck-trust-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.wcheck-trust-list svg {
  flex-shrink: 0;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Formular-Card: das visuell wichtigste Element der Seite -------------- */
.wcheck-form-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  /* Kritischer Fix: Diese Card liegt innerhalb der dunklen Hero-Section
     (.section--dark), Überschriften erben von dort die helle
     Dark-Context-Textfarbe (--color-dark-text, fast Weiß) — auf der
     hellen Card praktisch unlesbar (per Screenshot bestätigt: H2-Farbe
     war rgb(245,245,243) auf einem rgb(250,250,250)-artigen
     Hintergrund). Text-Grundfarbe hier explizit auf den normalen,
     hellen Kontext zurückgesetzt statt sie zu erben. */
  color: var(--color-text);
}

/* Kritischer Fix: .form-field input/textarea/select ist für den
   dunklen Kontext des bestehenden Kontaktformulars gestylt
   (background: var(--color-dark)) — diese Formular-Card ist aber
   hell. Ohne diesen Override wären Name-/E-Mail-/Telefon-Felder
   schwarze Boxen in einer weißen Card (per Screenshot bestätigt). */
.wcheck-form-card .form-field input,
.wcheck-form-card .form-field textarea {
  background: var(--color-bg-soft);
  color: var(--color-text);
  border-color: var(--color-border);
  -webkit-appearance: none;
  appearance: none;
}

.wcheck-form-card .form-field input::placeholder,
.wcheck-form-card .form-field textarea::placeholder {
  color: var(--color-muted);
}

.wcheck-form-card h2 {
  margin-bottom: var(--space-md);
}

.wcheck-progress {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.wcheck-progress__dot {
  height: 4px;
  flex: 1;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background-color var(--duration-medium) var(--ease-standard);
}

.wcheck-progress__dot.is-active,
.wcheck-progress__dot.is-complete {
  background: var(--color-accent);
}

/* URL-Feld: hochwertig, nicht wie ein Standard-Browserinput */
.wcheck-url-field {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding-inline: var(--space-sm);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.wcheck-url-field:focus-within {
  border-color: var(--color-accent);
}

.wcheck-url-field__icon {
  flex-shrink: 0;
  stroke: var(--color-muted);
  fill: none;
  stroke-width: 1.5;
  margin-inline-end: var(--space-2xs);
}

.wcheck-url-field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 600;
  padding-block: 0.95rem;
  min-height: 52px;
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.wcheck-url-field input::placeholder {
  color: var(--color-muted);
  font-weight: 400;
}

.wcheck-field-error {
  color: #b3341a;
  font-size: var(--fs-small);
  margin-top: var(--space-2xs);
}

.wcheck-microcopy {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.wcheck-form-card .btn--block {
  margin-top: var(--space-md);
  min-height: 52px;
}

/* URL-erkannt-Bestätigung */
.wcheck-url-confirmed {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}

.wcheck-url-confirmed__status {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  color: var(--color-text);
}

.wcheck-url-confirmed__status svg {
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wcheck-url-confirmed__domain {
  margin-top: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.wcheck-form-card .form-field input:-webkit-autofill,
.wcheck-form-card .form-field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-soft) inset;
  -webkit-text-fill-color: var(--color-text);
}

.wcheck-label {
  font-weight: 600;
  margin-block: var(--space-md) var(--space-2xs);
}

/* Segmented Control (Kontaktmethode) — bewusst als große, hochwertige
   Auswahlflächen statt winziger Radio-Buttons. */
.wcheck-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.wcheck-segmented__option {
  min-height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-weight: 600;
  color: var(--color-muted);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.wcheck-segmented__option.is-active {
  border-color: var(--color-accent);
  background: var(--color-bg-soft);
  color: var(--color-text);
}

/* Chips (Mehrfachauswahl Ziele) */
.wcheck-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.wcheck-chip {
  min-height: 44px;
  padding-inline: var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-muted);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.wcheck-chip.is-active {
  border-color: var(--color-accent);
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.wcheck-privacy-note {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-block: var(--space-md);
}

.wcheck-privacy-note a {
  color: var(--color-text);
  text-decoration: underline;
}

/* Success State */
.wcheck-success-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
  padding-left: 1.25rem;
}

.wcheck-success-calendly {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

/* .calendly-placeholder__text ist für den dunklen Kontext der
   Startseiten-Calendly-Section gestylt (color: var(--color-dark-muted),
   fast unlesbar auf dieser hellen Card) — hier gezielt überschrieben. */
.wcheck-success-calendly .calendly-placeholder__text {
  color: var(--color-muted);
}

.wcheck-success-calendly .calendly-placeholder__text a {
  color: var(--color-text);
}

/* --- Beispiel-Report-Vorschau ----------------------------------------------- */
.wcheck-example__disclaimer {
  font-weight: 600;
  color: var(--color-accent);
}

.wcheck-report-preview {
  margin-block: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wcheck-report-preview__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  font-weight: 600;
}

.wcheck-report-preview__bar {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.wcheck-report-preview__bar span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.wcheck-hebel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  counter-reset: hebel;
}

.wcheck-hebel-list li {
  position: relative;
  padding-left: 2.25rem;
  font-weight: 600;
}

.wcheck-hebel-list li::before {
  counter-increment: hebel;
  content: counter(hebel, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* --- Problem-Statements ------------------------------------------------------ */
.wcheck-statement-list {
  margin-block: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 1.125rem;
  font-weight: 600;
}

.wcheck-problem__closing {
  color: var(--color-muted);
}

/* --- Case-Study-Text-Ergänzung ---------------------------------------------- */
.wcheck-case__text {
  color: var(--color-muted);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

/* Der CTA-Text hier ("Meine Website ebenfalls prüfen lassen") ist
   länger als die übrigen Button-Texte im Projekt und überschreitet bei
   sehr schmalen Breiten (375px) die verfügbare Breite, da .btn global
   white-space:nowrap setzt. Gezielt nur hier aufgehoben, statt die
   globale Regel zu ändern. */
#wcheck-case .btn {
  white-space: normal;
  text-align: center;
}

/* --- Final CTA --------------------------------------------------------------- */
.wcheck-final-cta {
  text-align: center;
}

.wcheck-final-cta .btn {
  margin-top: var(--space-md);
}

/* --- Footer: reduziert, keine Navigation-Spalten -------------------------- */
.wcheck-footer .site-footer__bottom {
  padding-top: var(--space-lg);
}

/* --- Desktop --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .wcheck-hero__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .wcheck-hero__intro {
    flex: 0 0 42%;
    padding-top: var(--space-lg);
  }

  .wcheck-form-card {
    flex: 1;
    min-width: 0;
    max-width: 520px;
    padding: var(--space-2xl);
  }

  .wcheck-report-preview__row {
    grid-template-columns: 10rem 1fr;
  }
}