/* =====================================================================
   JPS-iQ Assessment — Komponenten-Styles
   ---------------------------------------------------------------------
   Nutzt ausschließlich die gruppenweiten Design-Tokens aus styles.css.
   Keine eigenen Farbwerte außer den Verdict-Semantikfarben, die
   bewusst NICHT die Markenfarbe sind.

   Wiederverwendbar über Business Units: styles.css + assessment.css +
   assessment.js + eine Datendatei.
   ===================================================================== */

:root {
  --as-native:      #26674B;
  --as-native-bg:   #E9F4EF;
  --as-config:      #1A77B3;
  --as-config-bg:   #EAF3FA;
  --as-arch:        #8A6314;
  --as-arch-bg:     #FBF3E2;
  --as-integration: #5B4A9E;
  --as-integration-bg: #EFEDF8;
  --as-third:       #A5342A;
  --as-third-bg:    #FBEDEB;
  --as-validate:    #5A6B7D;
  --as-validate-bg: #EEF2F6;

  /* Status-Vokabular des Dynamics-365-F&O Health Check.
     Bewusst dieselbe Farbfamilie wie oben, als Schweregrad-Rampe:
     gesund → prüfen → strukturell → kritisch → nicht bewertet. */
  --as-healthy:      #26674B;
  --as-healthy-bg:   #E9F4EF;
  --as-attention:    #8A6314;
  --as-attention-bg: #FBF3E2;
  --as-structural:   #A5551F;
  --as-structural-bg:#FBF0E6;
  --as-critical:     #A5342A;
  --as-critical-bg:  #FBEDEB;
  --as-notassessed:  #5A6B7D;
  --as-notassessed-bg: #EEF2F6;
}

.assessment { max-width: 860px; margin: 0 auto; }

/* ---------- Panel ---------- */
.as-panel {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: 0 22px 48px -34px rgba(11, 27, 43, 0.22);
}
@media (min-width: 720px) { .as-panel { padding: var(--s-7); } }

.as-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}
.as-h {
  font-size: var(--fs-xl);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.as-h:focus { outline: none; }
.as-h:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; border-radius: 4px; }
.as-sub { font-size: var(--fs-md); margin: var(--s-7) 0 var(--s-4); }
.as-lead { color: var(--c-ink-2); margin: 0 0 var(--s-5); max-width: 66ch; }
.as-meta { font-size: var(--fs-sm); color: var(--c-ink-3); margin: var(--s-5) 0 var(--s-6); }

.as-value { margin: 0 0 var(--s-5); padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.as-value li {
  position: relative; padding-left: 1.6rem;
  color: var(--c-ink-2); font-size: var(--fs-sm);
}
.as-value li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--c-brand);
}

.as-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Fortschritt ---------- */
.as-progress { margin-bottom: var(--s-5); }
.as-progress__bar {
  height: 4px; border-radius: 999px;
  background: var(--c-line); overflow: hidden;
}
.as-progress__fill {
  display: block; height: 100%;
  background: var(--c-brand);
  transition: width var(--dur) var(--ease);
}
.as-progress__label {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.as-progress__label b { color: var(--c-ink-2); font-weight: 600; }

/* ---------- Fragen ---------- */
.as-q { border: 0; padding: 0; margin: 0 0 var(--s-7); }
.as-q__legend {
  padding: 0; margin: 0 0 var(--s-3);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink);
  line-height: 1.35;
}
.as-q__help { margin: 0 0 var(--s-4); }
.as-q__help summary {
  cursor: pointer; font-size: var(--fs-xs);
  color: var(--c-brand); font-weight: 600;
  letter-spacing: 0.04em;
}
.as-q__help summary:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: 3px; }
.as-q__help p {
  margin: var(--s-3) 0 0; font-size: var(--fs-sm);
  color: var(--c-ink-3); border-left: 2px solid var(--c-line);
  padding-left: var(--s-4);
}

.as-opts { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .as-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.as-opt {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.as-opt:hover { border-color: var(--c-brand-100); background: var(--c-bg-alt); }
.as-opt.is-checked { border-color: var(--c-brand); background: var(--c-brand-50); }
.as-opt input { margin-top: 0.28em; accent-color: var(--c-brand); flex-shrink: 0; width: 18px; height: 18px; }
.as-opt input:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.as-opt__body { display: flex; flex-direction: column; gap: 3px; }
.as-opt__label { font-size: var(--fs-sm); color: var(--c-ink); font-weight: 500; line-height: 1.4; }
.as-opt__note { font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.45; }

/* ---------- Navigation ---------- */
.as-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.as-nav .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.as-nav__hint { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- Ergebnis ---------- */
.as-bands { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-6); }
.as-band {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-size: var(--fs-xs); border: 1px solid transparent;
}
.as-band strong { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.as-band--native      { background: var(--as-native-bg);      color: var(--as-native);      border-color: rgba(38,103,75,0.2); }
.as-band--config      { background: var(--as-config-bg);      color: var(--as-config);      border-color: rgba(26,119,179,0.22); }
.as-band--architecture{ background: var(--as-arch-bg);        color: var(--as-arch);        border-color: rgba(138,99,20,0.22); }
.as-band--integration { background: var(--as-integration-bg); color: var(--as-integration); border-color: rgba(91,74,158,0.22); }
.as-band--thirdparty  { background: var(--as-third-bg);       color: var(--as-third);       border-color: rgba(165,52,42,0.22); }
.as-band--validate    { background: var(--as-validate-bg);    color: var(--as-validate);    border-color: rgba(90,107,125,0.22); }

.as-decisions { margin: 0 0 var(--s-6); padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.as-decisions li {
  position: relative; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6);
  background: var(--c-bg-alt); border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-brand);
  font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6;
}

.as-dims { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .as-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.as-dim {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  background: #fff;
  border-top: 3px solid var(--c-line);
}
.as-dim--native       { border-top-color: var(--as-native); }
.as-dim--config       { border-top-color: var(--as-config); }
.as-dim--architecture { border-top-color: var(--as-arch); }
.as-dim--integration  { border-top-color: var(--as-integration); }
.as-dim--thirdparty   { border-top-color: var(--as-third); }
.as-dim--validate     { border-top-color: var(--as-validate); }

.as-dim__head {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.as-dim__head h4 { margin: 0; font-size: var(--fs-sm); font-weight: 650; }
.as-verdict {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
.as-verdict--native       { background: var(--as-native-bg);      color: var(--as-native); }
.as-verdict--config       { background: var(--as-config-bg);      color: var(--as-config); }
.as-verdict--architecture { background: var(--as-arch-bg);        color: var(--as-arch); }
.as-verdict--integration  { background: var(--as-integration-bg); color: var(--as-integration); }
.as-verdict--thirdparty   { background: var(--as-third-bg);       color: var(--as-third); }
.as-verdict--validate     { background: var(--as-validate-bg);    color: var(--as-validate); }

/* F&O-Health-Check-Statusskala */
.as-band--healthy     { background: var(--as-healthy-bg);     color: var(--as-healthy);     border-color: rgba(38,103,75,0.2); }
.as-band--attention   { background: var(--as-attention-bg);   color: var(--as-attention);   border-color: rgba(138,99,20,0.22); }
.as-band--structural  { background: var(--as-structural-bg);  color: var(--as-structural);  border-color: rgba(165,85,31,0.22); }
.as-band--critical    { background: var(--as-critical-bg);    color: var(--as-critical);    border-color: rgba(165,52,42,0.22); }
.as-band--notassessed { background: var(--as-notassessed-bg); color: var(--as-notassessed); border-color: rgba(90,107,125,0.22); }

.as-dim--healthy      { border-top-color: var(--as-healthy); }
.as-dim--attention    { border-top-color: var(--as-attention); }
.as-dim--structural   { border-top-color: var(--as-structural); }
.as-dim--critical     { border-top-color: var(--as-critical); }
.as-dim--notassessed  { border-top-color: var(--as-notassessed); }

.as-verdict--healthy      { background: var(--as-healthy-bg);     color: var(--as-healthy); }
.as-verdict--attention    { background: var(--as-attention-bg);   color: var(--as-attention); }
.as-verdict--structural   { background: var(--as-structural-bg);  color: var(--as-structural); }
.as-verdict--critical     { background: var(--as-critical-bg);    color: var(--as-critical); }
.as-verdict--notassessed  { background: var(--as-notassessed-bg); color: var(--as-notassessed); }

.as-dim__short { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; }

/* Detail bleibt bis zum Gate verdeckt — aber nicht ersatzlos:
   die kostenlose Einordnung oben ist bereits nutzbar. */
.as-dim__detail {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.65;
}
.as-dim__detail p { margin: 0 0 var(--s-3); }
.as-dim__detail p:last-child { margin-bottom: 0; }
.assessment:not(.is-unlocked) .as-dim__detail { display: none; }

/* ---------- Gate ----------
   Bewusst auf dunklem Treatment: .lead-form ist gruppenweit für den
   dunklen Kontext gebaut (weiße Labels, transluzente Felder). Damit
   wird hier exakt dieselbe Formularkomponente benutzt wie auf der
   Manufacturing- und der Health-Check-Seite — ohne Modifier, ohne
   Divergenz. Das dunkle Treatment markiert zugleich den Moment der
   Entscheidung, wie .section--deep es gruppenweit tut.               */
.as-gate {
  margin-top: var(--s-7);
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--c-bg-deep);
  color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 720px) { .as-gate { padding: var(--s-7); } }
.as-gate__eyebrow {
  display: block; font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--s-2);
}
.as-gate__h { margin: 0 0 var(--s-3); font-size: var(--fs-lg); color: #fff; }
/* Farbe explizit setzen: die globale p-Regel in styles.css setzt
   --c-ink-2 und schlüge sonst die Vererbung vom dunklen Gate. */
.as-gate p,
.as-gate__lead { color: rgba(255, 255, 255, 0.82); }
.as-gate__lead { margin: 0 0 var(--s-5); font-size: var(--fs-sm); max-width: 62ch; }

/* Innerhalb des Gates trägt .lead-form seinen eigenen Rahmen — hier
   überflüssig, weil das Gate selbst schon eine Fläche ist. */
.as-gate .lead-form {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Zweispaltig ab Tablet — spiegelt das Verhalten der bestehenden
   Formulare auf den Bestandsseiten. */
@media (min-width: 640px) {
  .as-gate .lead-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Nächster Schritt ---------- */
.as-next {
  margin-top: var(--s-7);
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--c-bg-deep);
  color: rgba(255, 255, 255, 0.82);
}
.as-next__eyebrow {
  display: block; font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  color: rgba(255, 255, 255, 0.6); margin-bottom: var(--s-2);
}
.as-next__h { margin: 0 0 var(--s-3); font-size: var(--fs-lg); color: #fff; }
.as-next__lead { margin: 0 0 var(--s-5); font-size: var(--fs-sm); max-width: 62ch; }
.as-next__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.as-next p, .as-next__lead { color: rgba(255, 255, 255, 0.82); }
.as-next .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.as-next .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* Die frühere Korrektur des Formular-Fehlerzustands stand hier als
   Ausnahme. Sie ist inzwischen in styles.css an der Quelle behoben
   (:user-invalid statt :invalid) und gilt damit für jedes .lead-form
   der Business Unit — auch auf Seiten, die assessment.css nicht laden. */

/* ---------- Fußnoten ---------- */
.as-disclaimer {
  margin: var(--s-6) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  line-height: 1.6;
}
.as-restart {
  margin-top: var(--s-4);
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--fs-xs);
  color: var(--c-ink-3); text-decoration: underline;
  cursor: pointer;
}
.as-restart:hover { color: var(--c-brand); }
.as-restart:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .as-progress__fill, .as-opt { transition: none; }
}