/* ==========================================================================
   FP Weblösungen Websitecheck: Formular, Warten, Ergebnis, Schnellformular.
   Übernommen aus assets/css/fp-v3.css des Prototyps (Abschnitt „Prüftools“ und die Grundbausteine dazu).
   Gekapselt: eigene Klassen (fpwc-*) und eigene Variablen (--fpwc-*), Startwerte aus dem Design V3.
   Das Theme überschreibt die Variablen auf :root, zum Beispiel mit seinen theme.json-Presets:
     :root { --fpwc-accent: var(--wp--preset--color--amber); --fpwc-font-head: var(--wp--preset--font-family--heading); }
   Alle Vorgaben stehen in :where() und haben damit keine Spezifität, das Theme gewinnt ohne !important.
   Schriften kommen vom Theme. Abstände in Vielfachen von 8, keine Schatten, Kästen nur um Klickbares,
   doppelter Fokusring, Status nie nur über Farbe.
   ========================================================================== */

/* Tokens (hell) */
:where(:root) {
  --fpwc-surface: #FFFFFF;
  --fpwc-surface-2: #F4F4F4;
  --fpwc-ink: #1A1A1A;
  --fpwc-ink-2: #333333;
  --fpwc-muted: #5E5E5E;
  --fpwc-line: #E4E4E4;
  --fpwc-field-line: #8C8C8C;
  --fpwc-card-border: transparent;
  --fpwc-accent: #F9A825;
  --fpwc-on-accent: #1A1A1A;
  --fpwc-ring-outer: #1A1A1A;
  --fpwc-ring-inner: #FFFFFF;
  --fpwc-band: #1A1A1A;
  --fpwc-band-surface: #262626;
  --fpwc-band-line: #3A3A3A;
  --fpwc-band-field: #141414;
  --fpwc-band-field-line: #707070;
  --fpwc-band-placeholder: #959595;
  --fpwc-on-band: #F4F4F4;
  --fpwc-on-band-muted: #B3B3B3;
  --fpwc-font-head: inherit;
  --fpwc-font-ui: inherit;
  --fpwc-fs-feature: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  --fpwc-radius: 8px;
  --fpwc-radius-lg: 16px;
  --fpwc-ease: cubic-bezier(.22, .9, .24, 1);
}

/* Dunkelmodus wie in V3: Systemeinstellung, per data-theme am html-Element überschreibbar */
:where([data-theme="dark"]) {
  --fpwc-surface: #1E1E1E;
  --fpwc-surface-2: #181818;
  --fpwc-ink: #EDEDED;
  --fpwc-ink-2: #D0D0D0;
  --fpwc-muted: #A6A6A6;
  --fpwc-line: #2E2E2E;
  --fpwc-field-line: #707070;
  --fpwc-card-border: #2E2E2E;
  --fpwc-ring-outer: #EDEDED;
  --fpwc-ring-inner: #121212;
  --fpwc-band: #0B0B0B;
  --fpwc-band-surface: #1C1C1C;
  --fpwc-band-line: #2E2E2E;
  --fpwc-band-field: #121212;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme])) {
    --fpwc-surface: #1E1E1E;
    --fpwc-surface-2: #181818;
    --fpwc-ink: #EDEDED;
    --fpwc-ink-2: #D0D0D0;
    --fpwc-muted: #A6A6A6;
    --fpwc-line: #2E2E2E;
    --fpwc-field-line: #707070;
    --fpwc-card-border: #2E2E2E;
    --fpwc-ring-outer: #EDEDED;
    --fpwc-ring-inner: #121212;
    --fpwc-band: #0B0B0B;
    --fpwc-band-surface: #1C1C1C;
    --fpwc-band-line: #2E2E2E;
    --fpwc-band-field: #121212;
  }
}

/* Breiten inklusive Innenabstand, unabhängig davon, ob das Theme border-box global setzt */
:where(.fpwc-card, .fpwc-result, .fpwc-quick, .fpwc-karte),
:where(.fpwc-card, .fpwc-result, .fpwc-quick, .fpwc-karte) *,
:where(.fpwc-card, .fpwc-result, .fpwc-quick, .fpwc-karte) ::before,
:where(.fpwc-card, .fpwc-result, .fpwc-quick, .fpwc-karte) ::after {
  box-sizing: border-box;
}

/* Versteckte Zustände bleiben versteckt, auch wenn das Theme dem Element display gibt */
.fpwc-result[hidden],
.fpwc-result [hidden],
.fpwc-card [hidden],
.fpwc-quick [hidden] {
  display: none !important;
}

.fpwc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fpwc-ico {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

/* Fokus als Doppelring: dunkel außen, hell innen (auf dunklem Grund umgekehrt), auf jeder Fläche mindestens 3:1 */
:where(.fpwc-card, .fpwc-result, .fpwc-quick) :focus-visible {
  outline: 3px solid var(--fpwc-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--fpwc-ring-inner);
  border-radius: 4px;
}
.fpwc-quick {
  --fpwc-ring-outer: #F4F4F4;
  --fpwc-ring-inner: #1A1A1A;
}

/* Button: Akzentfläche mit dunkler Schrift, Chevron-Spitze aus dem Logo */
.fpwc-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 32px 0 24px;
  border: 0;
  background: none;
  color: var(--fpwc-on-accent);
  font-family: var(--fpwc-font-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.fpwc-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fpwc-accent);
  border-radius: var(--fpwc-radius) 0 0 var(--fpwc-radius);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  transition: transform .2s var(--fpwc-ease);
}
.fpwc-button .fpwc-ico {
  width: 16px;
  height: 16px;
  transition: transform .2s var(--fpwc-ease);
}
.fpwc-button:active::before {
  transform: translateX(1px) scale(.98);
  transition-duration: .12s;
}
.fpwc-button[aria-disabled="true"] {
  opacity: .6;
  cursor: progress;
}

/* Formular-Karte auf heller Fläche */
.fpwc-card {
  max-width: 36rem;
  padding: 24px;
  border: 1px solid var(--fpwc-card-border);
  border-radius: var(--fpwc-radius-lg);
  background: var(--fpwc-surface);
}
.fpwc-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.fpwc-label {
  font-family: var(--fpwc-font-ui);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fpwc-ink);
}
.fpwc-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fpwc-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--fpwc-field-line);
  border-radius: var(--fpwc-radius);
  background: var(--fpwc-surface);
  color: var(--fpwc-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .2s;
}
.fpwc-input::placeholder {
  color: var(--fpwc-muted);
  opacity: 1;
}
.fpwc-input:focus-visible {
  border-color: var(--fpwc-ink);
  border-radius: var(--fpwc-radius);
}
.fpwc-input[aria-invalid="true"] {
  border-color: var(--fpwc-ink);
  border-width: 2px;
}
.fpwc-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: .875rem;
  color: var(--fpwc-ink);
}
.fpwc-error .fpwc-ico {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.fpwc-hint {
  margin: 16px 0 0;
  font-size: .875rem;
  color: var(--fpwc-muted);
}

/* Warten, Fehler, Ergebnis */
.fpwc-scan {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--fpwc-card-border);
  border-radius: var(--fpwc-radius-lg);
  background: var(--fpwc-surface);
}
.fpwc-scan p {
  margin: 0;
  color: var(--fpwc-ink);
}
.fpwc-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--fpwc-line);
  border-top-color: var(--fpwc-ink);
  border-radius: 50%;
  animation: fpwc-spin .8s linear infinite;
}
@keyframes fpwc-spin {
  to {
    transform: rotate(360deg);
  }
}
.fpwc-elapsed {
  color: var(--fpwc-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fpwc-fail {
  max-width: 60ch;
  margin: 0;
  padding-left: 16px;
  border-left: 4px solid var(--fpwc-accent);
  color: var(--fpwc-ink);
  font-weight: 500;
}
.fpwc-fail p,
.fpwc-sum p {
  margin: 0;
}
.fpwc-sum h2 {
  margin: 0 0 8px;
  font-size: var(--fpwc-fs-feature);
}
/* Fokus auf die Ergebnis-Überschrift nur für Screenreader, kein Rahmen um eine Überschrift */
.fpwc-sum h2:focus {
  outline: none;
  box-shadow: none;
}
.fpwc-sum .fpwc-lead {
  margin: 0 0 8px;
  color: var(--fpwc-ink);
  font-weight: 600;
}
.fpwc-list,
.fpwc-metrics {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.fpwc-list {
  display: grid;
  gap: 24px;
}
.fpwc-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--fpwc-line);
}
.fpwc-item .fpwc-ico {
  width: 24px;
  height: 24px;
  color: var(--fpwc-ink);
}
.fpwc-item h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}
.fpwc-item p {
  max-width: 65ch;
  margin: 0 0 8px;
}
.fpwc-item p:last-child {
  margin-bottom: 0;
}
.fpwc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 0 8px;
  border: 1px solid var(--fpwc-line);
  border-radius: 999px;
  color: var(--fpwc-muted);
  font-family: var(--fpwc-font-ui);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.fpwc-item--problem .fpwc-tag {
  border-color: var(--fpwc-ink);
  color: var(--fpwc-ink);
}
.fpwc-detail {
  font-size: .875rem;
  color: var(--fpwc-muted);
  overflow-wrap: anywhere;
}

/* Ladezeit-Check: Messwerte. Keine Kästen, Trennung über Linien wie bei den Befunden */
.fpwc-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}
.fpwc-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--fpwc-line);
}
.fpwc-metric--poor {
  border-top: 2px solid var(--fpwc-ink);
}
.fpwc-metric-label,
.fpwc-metric-note {
  font-size: .875rem;
  color: var(--fpwc-muted);
}
.fpwc-metric-value {
  color: var(--fpwc-ink);
  font-family: var(--fpwc-font-head);
  font-size: var(--fpwc-fs-feature);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fpwc-metric-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fpwc-ink);
  font-size: .875rem;
  font-weight: 600;
}
.fpwc-metric-rating .fpwc-ico {
  width: 16px;
  height: 16px;
}

.fpwc-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 48px;
  padding: 24px;
  border-radius: var(--fpwc-radius-lg);
  background: var(--fpwc-surface-2);
}
.fpwc-cta p {
  max-width: 60ch;
  margin: 0;
  color: var(--fpwc-ink);
}
.fpwc-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 24px 0 0;
  font-size: .875rem;
  color: var(--fpwc-muted);
}
.fpwc-disclaimer .fpwc-ico {
  width: 16px;
  height: 16px;
  margin-top: 3px;
}
.fpwc-disclaimer a {
  color: var(--fpwc-ink);
  text-decoration: underline;
  text-decoration-color: var(--fpwc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Schnellformular: steht in V3 auf der dunklen Karte im Band der Tool-Übersicht */
.fpwc-quick {
  margin-top: 8px;
}
.fpwc-quick-label {
  display: block;
  margin-bottom: 8px;
  color: var(--fpwc-on-band);
  font-family: var(--fpwc-font-ui);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
}
.fpwc-quick-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fpwc-quick-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--fpwc-band-field-line);
  border-radius: var(--fpwc-radius);
  background: var(--fpwc-band-field);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .2s;
}
.fpwc-quick-input::placeholder {
  color: var(--fpwc-band-placeholder);
  opacity: 1;
}
.fpwc-quick-input:focus-visible,
.fpwc-quick-input[aria-invalid="true"] {
  border-color: var(--fpwc-accent);
}
.fpwc-quick-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--fpwc-on-band);
  font-size: .875rem;
}
.fpwc-quick-error .fpwc-ico {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--fpwc-accent);
}
.fpwc-quick-note {
  margin: 16px 0 0;
  color: var(--fpwc-on-band-muted);
  font-size: .875rem;
}

/* Muster „Tool-Übersicht“: dunkles Band und Karten, damit das Schnellformular lesbar ist. Feinheiten gestaltet das Theme. */
.fpwc-band {
  background: var(--fpwc-band);
  color: var(--fpwc-on-band-muted);
}
.fpwc-band :where(h2, h3, h3 a) {
  color: #FFFFFF;
}
.fpwc-karte {
  padding: 24px;
  border: 1px solid var(--fpwc-band-line);
  border-radius: var(--fpwc-radius-lg);
  background: var(--fpwc-band-surface);
  color: var(--fpwc-on-band-muted);
}
.fpwc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--fpwc-accent);
  color: var(--fpwc-on-accent);
  font-family: var(--fpwc-font-ui);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Breakpoints wie in V3 (mobile-first) */
@media (min-width: 30em) {
  .fpwc-row,
  .fpwc-quick-row {
    flex-direction: row;
  }
  .fpwc-row .fpwc-input,
  .fpwc-quick-row .fpwc-quick-input {
    flex: 1;
    min-width: 0;
  }
}
@media (min-width: 48em) {
  .fpwc-card,
  .fpwc-scan {
    padding: 40px;
  }
}
@media (min-width: 64em) {
  .fpwc-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (hover: hover) {
  .fpwc-button:hover::before,
  .fpwc-button:hover .fpwc-ico {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fpwc-button::before,
  .fpwc-button .fpwc-ico,
  .fpwc-input,
  .fpwc-quick-input {
    transition: none;
  }
  .fpwc-spinner {
    animation: none;
  }
}
/* Systemfarben (Windows-Kontrastmodus): Fläche des Buttons fällt weg, also ein Rahmen */
@media (forced-colors: active) {
  .fpwc-button {
    border: 2px solid ButtonText;
    border-radius: var(--fpwc-radius);
  }
  .fpwc-button::before {
    display: none;
  }
}