/* ============================================================================ */
/* Gastrify AI Consultant – Funnel-Engine Styles (Phase 2: Grundgerüst-Frontend) */
/*                                                                              */
/* Eigenständiges Stylesheet der isolierten Komponente (Abschnitt 3 der Spec) - */
/* wird NICHT in assets/css/main.css konkateniert, sondern separat verlinkt,    */
/* wo immer die Komponente eingebunden wird. Nutzt die globalen Design-Tokens  */
/* aus assets/css/main.css (--teal-*, --orange-*, --radius-*, --shadow-*,      */
/* --font-body, Abschnitt 11 "Design-Referenz") über CSS Custom Properties -   */
/* main.css muss auf der Host-Seite VOR dieser Datei geladen sein, sonst       */
/* fehlen die Werte (kein hartcodiertes Duplikat der Tokens hier).             */
/* ============================================================================ */

.ai-consultant {
  max-width: 720px;
  margin-inline: auto;
  /* Abstand beim automatischen Hochscrollen (revealTop() in ai-consultant.js): fester Seitenkopf + Luft */
  scroll-margin-top: calc(var(--header-h, 0px) + 16px);
}

/* ---- Fortschrittsanzeige (Abschnitt 11: "Schritt x von y", Balken, %, Restzeit) ---- */
.ai-consultant-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-600);
  margin-bottom: 10px;
}
.ai-consultant-progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-soft);
  overflow: hidden;
}
.ai-consultant-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal-600), var(--teal-700));
  transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ai-consultant-progress-fill { transition: none; }
}

/* ---- Bühne / Karten-Übergänge (Abschnitt 11: Slide-links, Fade, leichte Scale) ---- */
.ai-consultant-stage {
  position: relative;
  margin-top: 22px;
  min-height: 260px;
}

.ai-consultant-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(22px, 4vw, 36px);
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity .32s ease, transform .32s ease;
}
.ai-consultant-stage.is-resizing { transition: height .32s ease; overflow: visible; }
/* Die ausblendende Karte liegt während des Übergangs absolut über der neuen,
   statt im Fluss darüber zu stehen - sonst rutscht die neue Karte kurz unter
   die alte und springt nach deren Entfernen wieder hoch. */
.ai-consultant-card.is-leaving-forward,
.ai-consultant-card.is-leaving-back { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.ai-consultant-card.is-leaving-forward { opacity: 0; transform: translateX(-32px) scale(.97); }
.ai-consultant-card.is-leaving-back { opacity: 0; transform: translateX(32px) scale(.97); }
.ai-consultant-card.is-entering-forward { opacity: 0; transform: translateX(32px) scale(.97); }
.ai-consultant-card.is-entering-back { opacity: 0; transform: translateX(-32px) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .ai-consultant-card { transition: none; }
  .ai-consultant-card.is-leaving-forward,
  .ai-consultant-card.is-leaving-back,
  .ai-consultant-card.is-entering-forward,
  .ai-consultant-card.is-entering-back { opacity: 1; transform: none; }
}

.ai-consultant-question {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 22px;
}

/* Mehrere Fragen auf einer Seite (funnel.pages): Blöcke mit Trennlinie, etwas kleinere Fragen */
.ai-consultant-block + .ai-consultant-block { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.ai-consultant-block .ai-consultant-question { font-size: clamp(17px, 2.2vw, 20px); }
.ai-consultant-block + .ai-consultant-nav, .ai-consultant-block ~ .ai-consultant-ai-comment { margin-top: 24px; }

/* ---- Auswahl-Optionen (single_choice / single_choice_other) ---- */
.ai-consultant-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-consultant-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.ai-consultant-option:hover { border-color: var(--teal-500); transform: translateY(-1px); }
.ai-consultant-option:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.ai-consultant-option-dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--ink-400);
  transition: border-color .18s ease, background .18s ease;
}
.ai-consultant-option.is-selected {
  border-color: var(--teal-700);
  background: var(--teal-50);
  color: var(--teal-800);
}
.ai-consultant-option.is-selected .ai-consultant-option-dot {
  border-color: var(--teal-700);
  background: var(--teal-700);
  box-shadow: inset 0 0 0 3px var(--teal-50);
}

.ai-consultant-other-input {
  margin-top: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-900);
}
.ai-consultant-other-input:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 1px; }

/* ---- Numerische Kontextfrage (Phase 4) ---- */
.ai-consultant-number-wrap { display: flex; align-items: center; gap: 10px; }
.ai-consultant-number-input { margin-top: 0; max-width: 160px; }
.ai-consultant-number-unit { font-size: 14.5px; color: var(--ink-600); font-weight: 600; }

/* ---- Freitext-Kontextfrage (Phase 4) ---- */
.ai-consultant-textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); }

/* ---- Places-Suche (Schritt 1, Phase 3) ---- */
.ai-consultant-suggestions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-consultant-suggestion {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.ai-consultant-suggestion:hover { border-color: var(--teal-500); background: var(--teal-50); }
.ai-consultant-suggestion-empty {
  padding: 10px 2px;
  font-size: 14px;
  color: var(--ink-600);
}
.ai-consultant-places-loading {
  padding: 13px 16px;
  font-size: 14.5px;
  color: var(--ink-600);
}
.ai-consultant-selected-restaurant {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--teal-700);
  background: var(--teal-50);
  border-radius: var(--radius-md);
}
.ai-consultant-selected-restaurant strong { color: var(--ink-900); font-size: 16px; }
.ai-consultant-selected-restaurant span { color: var(--ink-600); font-size: 13.5px; }
.ai-consultant-selected-restaurant + .link-arrow { margin-top: 10px; background: none; border: none; cursor: pointer; }

/* ---- Lade-/Fehlerzustand (Session-Start, Funnel-Wechsel, Phase 3) ---- */
.ai-consultant-loading,
.ai-consultant-error {
  text-align: center;
  color: var(--ink-600);
  font-size: 15px;
  padding: 48px 24px;
}
.ai-consultant-error { color: var(--orange-700); }

/* ---- KI-Kommentar (Phase 5, Abschnitt 6: "Nach jeder Eingabe: KI-Kommentar") ---- */
.ai-consultant-ai-comment {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--teal-600);
  background: var(--teal-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-800, var(--ink-700));
  animation: ai-consultant-comment-in .28s ease;
}
@keyframes ai-consultant-comment-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-consultant-ai-comment { animation: none; }
}

/* ---- Alternativ-Aktion (z. B. "Ich eröffne gerade ein Restaurant" -> redirect_funnel) ---- */
.ai-consultant-alt-action {
  margin-top: 18px;
  text-align: center;
}

/* ---- Navigation (Zurück / Weiter) ---- */
.ai-consultant-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.ai-consultant-nav .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ai-consultant-nav-spacer { flex-grow: 1; }

/* ---- Lead-Formular (Phase 7) ---- */
.ai-consultant-lead-intro {
  margin: 0 0 8px;
  color: var(--ink-600);
  font-size: 15px;
}
.ai-consultant-lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.ai-consultant-field { min-width: 0; }
.ai-consultant-field-check,
.ai-consultant-lead-form .ai-consultant-note,
.ai-consultant-form-error,
.ai-consultant-submit { grid-column: 1 / -1; }
.ai-consultant-field-label {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
}
.ai-consultant-field-label + .ai-consultant-other-input { margin-top: 6px; }
.ai-consultant-other-input[aria-invalid="true"] { border-color: var(--orange-700); }
.ai-consultant-field-check {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-700);
}
.ai-consultant-field-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal-700);
}
.ai-consultant-field-check label { flex: 1; min-width: 0; }
.ai-consultant-field-check .ai-consultant-field-error { flex-basis: 100%; padding-left: 28px; }
.ai-consultant-field-check a,
.ai-consultant-note a { color: var(--teal-700); }
.ai-consultant-field-error {
  min-height: 0;
  margin-top: 4px;
  font-size: 13px;
  color: var(--orange-700);
}
.ai-consultant-field-error:empty { display: none; }
.ai-consultant-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-600);
}
.ai-consultant-submit { margin-top: 16px; justify-self: start; }
/* Honeypot: aus dem sichtbaren Layout entfernt, aber nicht display:none (manche Bots überspringen versteckte Felder). */
.ai-consultant-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* reCAPTCHA-Badge ausgeblendet - erlaubt, da der Pflichthinweis im Formular steht (Google-FAQ). */
.grecaptcha-badge { visibility: hidden; }
@media (max-width: 575.98px) {
  .ai-consultant-lead-form { grid-template-columns: 1fr; }
  .ai-consultant-submit { justify-self: stretch; }
}

/* ---- Ergebnis-Screen (Phase 8) ---- */
.ai-consultant-result-loading { text-align: center; padding-block: 40px; }
.ai-consultant-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 4px solid var(--teal-100);
  border-top-color: var(--teal-700);
  border-radius: 50%;
  animation: ai-consultant-spin .9s linear infinite;
}
@keyframes ai-consultant-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-consultant-spinner { animation-duration: 3s; } }

.ai-consultant-result-section { margin-top: 28px; }
.ai-consultant-result-heading {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
}
.ai-consultant-score-overview {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.ai-consultant-score-overview p { margin: 0; color: var(--ink-700); }
.ai-consultant-score { position: relative; flex: none; width: 132px; height: 132px; }
.ai-consultant-score-ring { width: 100%; height: 100%; }
.ai-consultant-score-track { fill: none; stroke: var(--line-soft); stroke-width: 10; }
.ai-consultant-score-value {
  fill: none;
  stroke: var(--teal-700);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s ease;
}
.ai-consultant-score-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ai-consultant-score-label strong { font-size: 36px; line-height: 1; color: var(--ink-900); }
.ai-consultant-score-label span { font-size: 13px; color: var(--ink-600); }

.ai-consultant-bars { display: grid; gap: 12px; }
.ai-consultant-bar-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-700);
  margin-bottom: 5px;
}
.ai-consultant-bar-points { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.ai-consultant-bar { height: 8px; border-radius: var(--radius-pill); background: var(--line-soft); overflow: hidden; }
.ai-consultant-bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--teal-700); }

.ai-consultant-result-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 20px;
}
.ai-consultant-result-list { margin: 0; padding-left: 18px; color: var(--ink-700); font-size: 14.5px; }
.ai-consultant-result-list li + li { margin-top: 6px; }

.ai-consultant-recommendations { margin: 0; padding-left: 22px; }
.ai-consultant-recommendations li + li { margin-top: 14px; }
.ai-consultant-recommendations p { margin: 4px 0 0; color: var(--ink-700); font-size: 14.5px; }
.ai-consultant-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-consultant-rec-head .ai-consultant-result-heading { margin: 0; }

.ai-consultant-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-consultant-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 12.5px;
  font-weight: 600;
}
.ai-consultant-chip-estimate { background: var(--orange-50); color: var(--orange-700); }

.ai-consultant-revenue,
.ai-consultant-timing {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--orange-50);
}
.ai-consultant-timing { background: var(--teal-50); }
.ai-consultant-timing p { margin: 0; color: var(--ink-700); }
.ai-consultant-revenue p { margin: 8px 0 0; }
.ai-consultant-revenue-range { font-size: 22px; font-weight: 800; color: var(--ink-900); }

.ai-consultant-result-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.ai-consultant-result-cta p { margin: 0; flex: 1 1 260px; color: var(--ink-700); }

@media (max-width: 575.98px) {
  .ai-consultant-score-overview { flex-direction: column; text-align: center; }
  .ai-consultant-result-cta .btn { width: 100%; }
}

/* ---- PDF-Download im Ergebnis-Screen (Phase 9) ---- */
.ai-consultant-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-consultant-result-cta .ai-consultant-field-error { flex-basis: 100%; }
@media (max-width: 575.98px) {
  .ai-consultant-result-actions { width: 100%; flex-direction: column; }
}