/* ==========================================================================
   jordanweb.de v2 — Automations-Audit (seiten-spezifisch)
   Ergaenzt die Kernbibliothek nur um das, was ausschliesslich diese eine
   Seite braucht: Mehrschritt-Formular, Skalen-Auswahl, Chip-Mehrfachauswahl,
   Einwilligungs-Kasten. Alles andere (Buttons, Felder, Panels, Facts, Steps,
   FAQ) kommt aus components.css.
   ========================================================================== */

/* ---- Formular-Panel als Instrument, nicht als Wizard-Karte ------------------- */

.audit-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.audit-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--blue-950);
  color: var(--on-dark);
}
.audit-progress-label {
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}
.audit-progress-dots {
  display: flex;
  gap: var(--sp-2);
}
.audit-progress-dots span {
  width: 1.75rem;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--on-dark-line);
  transition: background var(--dur-2) var(--ease-out);
}
.audit-progress-dots span[data-done="true"] { background: var(--cyan-400); }

.audit-body { padding: var(--sp-7) var(--sp-6); }

.audit-step { display: none; }
.audit-step[data-active="true"] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.audit-step h2 {
  font-size: var(--fs-xl);
  margin-block-end: var(--sp-1);
}
.audit-step .lead { margin-block-end: var(--sp-2); }

.audit-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-block-start: 1px solid var(--line);
}
/* .btn setzt display:inline-flex mit derselben Spezifitaet wie das UA-
   [hidden]-Rule - ohne diese Regel gewinnt .btn und das Attribut wird
   wirkungslos. Betrifft Zurueck-/Weiter-/Absenden-Button im Wizard. */
.audit-nav .btn[hidden] { display: none; }

/* ---- Einwilligungs-Kasten: sichtbar, nicht Kleingedrucktes ------------------- */

.consent-box {
  display: flex;
  gap: var(--sp-3);
  background: var(--blue-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.consent-box input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-block-start: 0.2em;
  accent-color: var(--blue-900);
}
.consent-box label { font-size: var(--fs-sm); color: var(--ink-900); }
.consent-box small { display: block; color: var(--ink-700); margin-block-start: var(--sp-1); }
.consent-box--optional { background: var(--surface); }

/* ---- Skalen-Auswahl (1-5), ersetzt native Radios durch Segmented Control ----- */

.scale-input {
  display: flex;
  gap: var(--sp-2);
}
.scale-input input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.scale-input label {
  flex: 1;
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.scale-input input:checked + label {
  border-color: var(--blue-900);
  background: var(--blue-900);
  color: var(--on-dark);
}
.scale-input input:focus-visible + label { box-shadow: var(--focus-ring); }
.scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ---- Chip-Mehrfachauswahl (current_tools/interfaces) ------------------------ */

.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip-select input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.chip-select label {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.chip-select input:checked + label {
  border-color: var(--cyan-500);
  background: var(--blue-100);
  color: var(--blue-900);
}
.chip-select input:focus-visible + label { box-shadow: var(--focus-ring); }

/* ---- Bedingte Bloecke (sensible Daten, Fristen-Freitext) --------------------- */

.conditional { display: none; }
.conditional[data-open="true"] { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- Ergebnis-/Bestaetigungszustand ------------------------------------------ */

.audit-result { display: none; }
.audit-result[data-active="true"] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
.audit-result .status { font-size: var(--fs-md); }

/* ---- Hero-Flow (kompaktere Panel-Variante fuer 4 Analyse-Stufen) ------------- */

.audit-hero-flow .flow-node small { max-width: 22ch; }

@media (max-width: 640px) {
  .audit-body { padding: var(--sp-6) var(--sp-4); }
  .audit-progress { padding: var(--sp-4); }
  .scale-input { flex-wrap: wrap; }
}