/* Augur — AI-Potential-Check chat UI
   Builds on the site's tokens; mirrors form.css patterns for visual continuity. */

:root {
  --augur-bg: #f8fafc;
  --augur-card: #ffffff;
  --augur-line: #e2e8f0;
  --augur-text: #1e293b;
  --augur-muted: #64748b;
  --augur-dark: #0f172a;
  --augur-primary: #1e40af;      /* brand blue — Augmentoring site palette */
  --augur-primary-deep: #1e3a8a; /* deeper variant for avatars / marks */
  --augur-accent: #f97316;
  --augur-accent-hover: #ea580c;
  --augur-accent-soft: #fff7ed;
  --augur-green: #059669;
  --augur-amber: #d97706;
  --augur-red: #dc2626;
  --augur-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

.augur-page {
  background: var(--augur-bg);
  min-height: 100vh;
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--augur-text);
  line-height: 1.55;
}

.augur-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}

/* Trust banner — always visible above the chat */
.augur-trust {
  background: #fff;
  border: 1px solid var(--augur-line);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  color: var(--augur-muted);
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}
.augur-trust svg { flex-shrink: 0; color: var(--augur-accent); margin-top: 2px; }
.augur-trust strong { color: var(--augur-dark); font-weight: 700; font-size: 0.92rem; }
.augur-trust .trust-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--augur-muted);
  letter-spacing: 0.01em;
}

/* Agent header */
.augur-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--augur-line);
}
.augur-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--augur-primary-deep), var(--augur-primary));
  color: var(--augur-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--augur-mono); font-weight: 800; font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
}
.augur-head h1 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--augur-dark); margin: 0;
}
.augur-head .role {
  font-size: 0.82rem; color: var(--augur-muted);
  margin-top: 2px;
}

/* ---------- Toast notifier (slide-in bottom-right) ---------- */
.augur-toast-host {
  position: fixed;
  bottom: 1.25rem; right: 1.25rem;
  display: flex; flex-direction: column-reverse;
  gap: 0.5rem;
  z-index: 100;
  pointer-events: none;
}
.augur-toast {
  pointer-events: auto;
  display: inline-flex; align-items: flex-start; gap: 0.7rem;
  background: var(--augur-dark);
  color: #fff;
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  min-width: 260px; max-width: 380px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.28);
  font-size: 0.93rem; line-height: 1.45;
  opacity: 0; transform: translateY(14px);
  transition: opacity 240ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 4px solid currentColor;
}
.augur-toast.is-success { color: #34d399; }
.augur-toast.is-error   { color: #fb923c; }
.augur-toast.is-open    { opacity: 1; transform: translateY(0); }
.augur-toast.is-closing { opacity: 0; transform: translateY(8px); }
.augur-toast__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
}
.augur-toast__msg {
  color: #fff;
  font-weight: 500;
}
@media (max-width: 520px) {
  .augur-toast-host { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .augur-toast { min-width: 0; width: 100%; }
}

/* Chat container */
.augur-chat {
  background: var(--augur-card);
  border: 1px solid var(--augur-line);
  border-radius: 16px;
  padding: 1.5rem 1.25rem 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  position: relative;            /* anchor for handoff overlay */
}

/* ---------- Hand-off overlay (chat → result transition) ---------- */
/* Sits over the chat box after the conversation ends, cycling through phase
   labels while we compute the result. Then fades out and the result section
   below takes over. No fake spinner — just typing dots + clear stage names. */
.augur-handoff {
  /* Fixed full-screen overlay, NICHT absolut innerhalb .augur-chat. So überlebt
     der Overlay den Layout-Wechsel zur Result-Page (chat hidet, neuer Container
     erscheint UNTER dem deckenden Overlay → kein Flash beim Fade-out). */
  position: fixed; inset: 0;
  background: rgba(248, 250, 252, 0.96);     /* fast opak — verbirgt den Layout-Swap dahinter */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 360ms ease-out;
  z-index: 1000;
  pointer-events: all;
}
.augur-handoff.is-open    { opacity: 1; }
.augur-handoff.is-closing { opacity: 0; }
.augur-handoff__card {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.8rem;
  text-align: center;
}
.augur-handoff__dots {
  display: inline-flex; gap: 6px;
}
.augur-handoff__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--augur-accent);
  animation: augur-blink 1.2s infinite ease-in-out;
}
.augur-handoff__dots span:nth-child(2) { animation-delay: 0.18s; }
.augur-handoff__dots span:nth-child(3) { animation-delay: 0.36s; }
.augur-handoff__label {
  font-size: 1rem;
  color: var(--augur-dark);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  max-width: 280px;
  min-height: 1.4em;
}
/* Smooth swap when the label text changes between stages. */
.augur-handoff__label.is-swap {
  animation: augur-handoff-swap 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes augur-handoff-swap {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.augur-messages {
  display: flex; flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1rem;
  scroll-behavior: smooth;          /* animate scrollTop changes instead of hard-jump */
}
.augur-msg {
  display: flex;
  gap: 0.6rem;
  max-width: 92%;
  animation: augur-msg-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes augur-msg-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Typing-Indikatoren überspringen die Fade-In-Animation — sie sollen
   SOFORT erscheinen, damit der User nach dem Senden keine Stall-Wahrnehmung
   hat. Die animierten Dots im Inneren reichen als „lebendiges" Signal. */
.augur-msg.is-typing {
  animation: none;
  opacity: 1;
}
.augur-msg.is-augur { align-self: flex-start; }
.augur-msg.is-user {
  align-self: flex-end; flex-direction: row-reverse;
  max-width: 80%;
}
.augur-msg .bubble {
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  font-size: 0.97rem;
  line-height: 1.5;
  word-wrap: break-word;
}
.augur-msg.is-augur .bubble {
  background: #f1f5f9;
  color: var(--augur-text);
  border-bottom-left-radius: 4px;
}
.augur-msg.is-user .bubble {
  background: var(--augur-dark);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.augur-msg .av {
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--augur-mono);
  font-size: 0.78rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.augur-msg.is-augur .av {
  background: rgba(30, 58, 138, 0.92);   /* deep brand blue with slight alpha — softer, less stamp-like */
  color: var(--augur-accent);
}
.augur-msg.is-user .av { background: #cbd5e1; color: var(--augur-dark); }

.augur-msg .bubble em { color: var(--augur-muted); font-style: italic; }
.augur-msg .bubble strong { color: var(--augur-dark); font-weight: 700; }
.augur-msg.is-user .bubble strong { color: #fff; }

/* Typing indicator */
.augur-typing { display: inline-flex; gap: 4px; padding: 0.5rem 0.2rem; }
.augur-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--augur-muted);
  animation: augur-blink 1.2s infinite ease-in-out;
}
.augur-typing span:nth-child(2) { animation-delay: 0.2s; }
.augur-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes augur-blink {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1); }
}

/* Quick replies */
.augur-replies {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  padding: 0.6rem 0 0.9rem 38px;
}
/* Single-action rows (e.g. just "Los") float centered under the message. */
.augur-replies.centered {
  justify-content: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.augur-replies button {
  background: #fff;
  border: 1px solid var(--augur-line);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  color: var(--augur-text);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.augur-replies button:hover {
  border-color: var(--augur-accent);
  background: var(--augur-accent-soft);
  color: var(--augur-accent-hover);
}
/* Primary CTA: filled accent for solo replies like "Los" / "Weiter". */
.augur-replies button.is-primary {
  background: var(--augur-accent);
  color: #fff;
  border-color: var(--augur-accent);
  padding: 0.72rem 1.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.28);
}
.augur-replies button.is-primary:hover {
  background: var(--augur-accent-hover);
  border-color: var(--augur-accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.34);
}
.augur-replies button.link-only {
  background: transparent; border-color: transparent;
  color: var(--augur-muted); text-decoration: underline;
  font-size: 0.85rem; padding: 0.4rem 0.5rem;
}
.augur-replies button.link-only:hover {
  color: var(--augur-accent-hover); background: transparent;
}

/* Input bar */
.augur-input {
  display: flex; gap: 0.5rem;
  padding: 0.85rem 0 1.25rem;
  border-top: 1px solid var(--augur-line);
  margin-top: 0.5rem;
}
.augur-input input,
.augur-input textarea {
  flex: 1; min-width: 0;
  border: 1px solid var(--augur-line);
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--augur-text);
  background: #fff;
  resize: none;
  transition: border-color 0.15s;
}
.augur-input input:focus,
.augur-input textarea:focus {
  outline: none; border-color: var(--augur-accent);
}
.augur-input button {
  background: var(--augur-dark);
  color: #fff; border: none;
  border-radius: 10px;
  padding: 0 1.1rem;
  font-size: 0.92rem; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}
.augur-input button:hover { background: var(--augur-accent-hover); }
.augur-input button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Result-Container: KEINE Outer-Box mehr. Jeder Sub-Block (Hero, Score,
   Schwerpunkte, Use-Cases, CTA) hat eigenes Card-Styling und steht frei
   auf dem Page-Background — Dashboard-Look statt Box-in-Box. */
.augur-result {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  box-shadow: none;
  display: flex; flex-direction: column;
  gap: 1.75rem;                /* großzügiger Abstand zwischen den Komponenten */
}
.augur-result-head { margin: 0; }
.augur-result-head .label {
  font-family: var(--augur-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--augur-accent-hover); font-weight: 700;
  margin: 0;
}

/* Axes */
.augur-axes { display: grid; gap: 1.1rem; margin: 1.5rem 0 1.75rem; }
.augur-axis {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.4rem 0.85rem;
  align-items: baseline;
}
.augur-axis-label { font-weight: 700; color: var(--augur-dark); font-size: 0.95rem; }
.augur-axis-value {
  font-family: var(--augur-mono); font-weight: 800;
  font-size: 1.5rem; color: var(--augur-dark);
  line-height: 1;
}
.augur-axis-bar {
  grid-column: 1 / -1;
  height: 10px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.augur-axis-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--augur-accent), var(--augur-accent-hover));
  width: 0;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.augur-axis-band {
  grid-column: 1 / -1;
  font-family: var(--augur-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--augur-muted);
  font-weight: 700;
}
.augur-axis-band.is-low { color: var(--augur-muted); }
.augur-axis-band.is-mid { color: var(--augur-amber); }
.augur-axis-band.is-high { color: var(--augur-green); }

/* Reise-position */
.augur-position {
  background: var(--augur-dark);
  color: #fff;
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--augur-accent);
}
.augur-position .pos-label {
  font-family: var(--augur-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--augur-accent); font-weight: 700;
  margin-bottom: 0.4rem;
}
.augur-position .pos-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.4rem; }
.augur-position .pos-desc { font-size: 0.95rem; opacity: 0.92; line-height: 1.5; }

/* Time tease */
.augur-tease {
  background: var(--augur-accent-soft);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.97rem;
}
.augur-tease strong { color: var(--augur-accent-hover); font-weight: 800; }

/* €-Headline — full-width Hero, allein oben. Bleibt vor UND nach Submit
   am selben Platz (Layout-Anker für die smooth Transition: nur Gate weg
   + Blur weg darunter, Hero rührt sich nicht). */
.augur-headline {
  text-align: center;
  background: linear-gradient(180deg, var(--augur-accent-soft) 0%, #fff 80%);
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 14px;
  padding: 2rem 1.5rem 1.75rem;
  margin: 0;                   /* gap kommt vom .augur-result flex-parent */
}
.augur-badge {
  display: inline-block;
  font-family: var(--augur-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--augur-accent-hover);
  background: var(--augur-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.augur-headline .hl-pre,
.augur-headline .hl-post {
  font-size: 1rem;
  color: var(--augur-text);
  line-height: 1.4;
}
.augur-headline .hl-pre  { margin-bottom: 0.3rem; }
.augur-headline .hl-post { margin-top: 0.3rem; }
.augur-headline .hl-num {
  font-size: clamp(2.4rem, 6vw, 3.5rem);     /* größer, weil full-width Solo-Akt */
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--augur-accent-hover);
  line-height: 1.05;
  font-family: 'Inter', -apple-system, sans-serif;
  margin: 0.4rem 0;
}
.augur-headline .hl-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--augur-muted);
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Combined score summary — sits in the LEFT cell of the two-column detail row. */
.augur-score-summary {
  background: #f8fafc;
  border: 1px solid var(--augur-line);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  text-align: center;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: center;
}
.augur-score-summary .ss-label {
  font-family: var(--augur-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--augur-muted);
  margin-bottom: 0.4rem;
}
.augur-score-summary .ss-num {
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--augur-dark);
  line-height: 1;
}
.augur-score-summary .ss-num .ss-of {
  font-size: 0.42em;
  color: var(--augur-muted);
  font-weight: 600;
  margin-left: 0.15em;
}
.augur-score-summary .ss-band {
  display: inline-block;
  font-family: var(--augur-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0.7rem 0 0;
  padding: 4px 12px;
  border-radius: 999px;
}
.augur-score-summary .ss-band.is-low  { color: var(--augur-muted); background: #f1f5f9; }
.augur-score-summary .ss-band.is-mid  { color: var(--augur-amber); background: rgba(217,119,6,0.12); }
.augur-score-summary .ss-band.is-high { color: var(--augur-green); background: rgba(5,150,105,0.12); }
/* Schwerpunkte sit in their OWN section now (right column wenn schmal, full-width
   wenn breit) — getrennt von der Score-Card. Kein border-top mehr nötig. */
.augur-schwerpunkte {
  background: var(--augur-accent-soft);
  border-left: 3px solid var(--augur-accent);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
}
.augur-schwerpunkte p {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--augur-text);
}
.augur-schwerpunkte p:last-child { margin-bottom: 0; }
.augur-score-summary .ss-schwerpunkte p:last-child { margin-bottom: 0; }

/* Prominent email gate card — the primary CTA above the blurred preview. */
.augur-gate-prominent {
  background: #fff;
  border: 2px solid var(--augur-accent);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  margin: 0 auto;              /* gap kommt vom .augur-result flex-parent */
  max-width: 620px;            /* wider so the email field doesn't feel cramped */
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.18);
  width: 100%;
}
.augur-gate-prominent h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--augur-dark);
  margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
  text-align: center;
}
.augur-gate-promise {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}
.augur-gate-promise li {
  font-size: 0.95rem;
  color: var(--augur-text);
  margin: 0.85rem 0;             /* generous breathing room between promises */
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.augur-gate-promise li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--augur-accent);
  font-weight: 800;
}
.augur-gate-promise li strong { color: var(--augur-dark); }
.augur-gate-prominent .augur-gate-form {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.augur-gate-prominent .augur-gate-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--augur-line);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.97rem;
  font-family: inherit;
}
.augur-gate-prominent .augur-gate-form input:focus { outline: none; border-color: var(--augur-accent); }
.augur-gate-prominent .augur-gate-form button {
  background: var(--augur-accent);
  color: #fff; border: none;
  border-radius: 10px;
  padding: 0 1.3rem;
  font-size: 0.95rem; font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.augur-gate-prominent .augur-gate-form button:hover { background: var(--augur-accent-hover); }
.augur-gate-prominent .micro {
  font-size: 0.75rem;
  color: var(--augur-muted);
  text-align: center;
  line-height: 1.45;
}
/* Nach Submit ausfaden — JS setzt nach 240ms `display:none` damit die
   Audit-CTA darunter aus dem Layout-Flow nach oben rückt und sofort
   sichtbar ist. */
.augur-gate-prominent {
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.augur-gate-prominent.is-done {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.augur-gate-prominent.is-collapsed { display: none !important; }
@media (max-width: 640px) {
  .augur-gate-prominent .augur-gate-form { flex-direction: column; }
  .augur-gate-prominent .augur-gate-form button { padding: 0.75rem 1.3rem; }
}

/* Blurry / gated section — heavier blur so it works as a real teaser, not a faint preview. */
.augur-gated {
  position: relative;
  margin-top: 1rem;
}
.augur-gated-inner {
  filter: blur(11px);            /* leicht reduziert — User soll Konturen erahnen, nicht lesen */
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
  transition: filter 380ms ease-out, opacity 380ms ease-out;
}
.augur-gated.is-open .augur-gated-inner {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
.augur-gate-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0.98) 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  z-index: 5;
}
.augur-gated.is-open .augur-gate-card { display: none; }
.augur-gate-card-inner {
  background: #fff;
  border: 1px solid var(--augur-line);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  text-align: center;
}
.augur-gate-card-inner h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--augur-dark);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.augur-gate-card-inner p {
  font-size: 0.92rem;
  color: var(--augur-muted);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.augur-gate-form { display: flex; gap: 0.5rem; }
.augur-gate-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--augur-line);
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
  font-family: inherit;
}
.augur-gate-form input:focus { outline: none; border-color: var(--augur-accent); }
.augur-gate-form button {
  background: var(--augur-accent);
  color: #fff; border: none;
  border-radius: 10px;
  padding: 0 1.1rem;
  font-size: 0.92rem; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}
.augur-gate-form button:hover { background: var(--augur-accent-hover); }
.augur-gate-card-inner .micro {
  font-size: 0.75rem; color: var(--augur-muted);
  margin-top: 0.7rem; line-height: 1.4;
}
.augur-gate-card-inner .opt-newsletter {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: 0.8rem; color: var(--augur-muted);
  margin-top: 0.6rem; justify-content: center;
}

/* Use-Cases section — sits in the RIGHT cell of the two-column detail row.
   No border-top needed (the grid gap visually separates it from siblings). */
.augur-section {
  background: #fff;
  border: 1px solid var(--augur-line);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
}
.augur-section h3 {
  font-size: 1rem; font-weight: 800;
  letter-spacing: -0.01em; color: var(--augur-dark);
  margin: 0 0 0.4rem;
}
.augur-section .desc { font-size: 0.88rem; color: var(--augur-muted); margin-bottom: 0.7rem; line-height: 1.5; }
.augur-section ul { margin: 0; padding: 0; list-style: none; }
.augur-section li {
  margin: 0.5rem 0;
  font-size: 0.92rem; line-height: 1.5;
  padding-left: 1.1rem; position: relative;
}
.augur-section li::before {
  content: '→';
  position: absolute; left: 0; top: 0;
  color: var(--augur-accent); font-weight: 800;
}

/* Interactive € calculator */
.augur-calc {
  background: var(--augur-accent-soft);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 0.75rem 0;
}
.augur-calc-row { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.augur-calc-row label { font-size: 0.88rem; color: var(--augur-dark); font-weight: 600; }
.augur-calc-row input {
  width: 90px;
  border: 1px solid var(--augur-line);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  font-family: var(--augur-mono);
  font-weight: 600;
  text-align: right;
  background: #fff;
}
.augur-calc-row input:focus { outline: none; border-color: var(--augur-accent); }
.augur-calc-result {
  font-size: 0.98rem; color: var(--augur-dark); line-height: 1.55;
}
.augur-calc-result strong { color: var(--augur-accent-hover); font-weight: 800; }
.augur-calc-note { font-size: 0.78rem; color: var(--augur-muted); margin-top: 0.55rem; line-height: 1.45; }

/* Audit CTA card — sitzt als rechte Zelle in der gated Action-Row, sticky.
   Natürliche Höhe (kein stretch); Button rückt direkt unter den Garantie-
   Text, kein „Button schwebt 200px tiefer als Garantie"-Look. */
.augur-cta-card {
  background: linear-gradient(135deg, var(--augur-dark), #1e293b);
  color: #fff;
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--augur-accent);
}
.augur-cta-card a.btn { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Action-Grid: 2 Spalten × 3 Reihen mit named areas.
     Row 1: Score spannt VOLLE BREITE (beide Spalten)
     Row 2: Schwerpunkte (links) | CTA (rechts, stretcht über Row 2+3)
     Row 3: Use-Cases   (links) | CTA stretcht weiter
   CTA-Höhe = Höhe von (Schwerpunkte + Use-Cases). Sticky beim Scrollen.
   --------------------------------------------------------------------------- */
.augur-action-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas:
    "score   score"
    "schwer  cta"
    "cases   cta";
  column-gap: 1.5rem;
  row-gap: 1.5rem;
  align-items: stretch;        /* CTA stretcht auf Höhe von schwer + cases */
}
.augur-action-row > .augur-score-summary { grid-area: score; }
.augur-action-row > .augur-cta-card      {
  grid-area: cta;
  align-self: center;          /* natürliche Höhe, vertikal zentriert im 2-Row-Span */
  position: sticky; top: 1.5rem;
}
.augur-action-row > .augur-schwerpunkte  { grid-area: schwer; }
.augur-action-row > .augur-section       { grid-area: cases; }

@media (max-width: 900px) {
  .augur-action-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "score"
      "schwer"
      "cases"
      "cta";
    gap: 1.25rem;
  }
  .augur-action-row > .augur-cta-card {
    position: static;          /* mobile: sticky macht's kaputt */
  }
}
.augur-cta-card .lbl {
  font-family: var(--augur-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--augur-accent); font-weight: 700;
  margin-bottom: 0.5rem;
}
.augur-cta-card h3 {
  font-size: 1.3rem; font-weight: 800; color: #fff;
  margin: 0 0 0.7rem; letter-spacing: -0.015em;
}
.augur-cta-card p {
  font-size: 0.97rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1.35rem;
}
/* Garantie als eigene abgesetzte Insight-Box im CTA-Banner.
   Orange-getöntes Hintergrund + Border heben sie vom dunklen CTA-Card
   sichtbar ab — wirkt wie ein „Siegel" innerhalb der Karte. */
.augur-cta-card .gtx {
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0 0 1.35rem;
}
.augur-cta-card .gtx__head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.35rem;
}
.augur-cta-card .gtx__icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--augur-accent);
}
.augur-cta-card .gtx__title {
  font-weight: 800;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.augur-cta-card .gtx__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
/* Scarcity-Hinweis: pulsierender Orange-Dot + kurzer Text als FOMO-Anker
   direkt über dem CTA-Button. Bewusst dezent — kein „Nur noch 1 Platz!!!"-Geschrei. */
.augur-cta-card .scarcity {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.85rem;
}
.augur-cta-card .scarcity__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--augur-accent);
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  animation: augur-scarcity-pulse 1.8s ease-out infinite;
}
@keyframes augur-scarcity-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0);    }
}
.augur-cta-card a.btn {
  display: inline-block;
  background: var(--augur-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  transition: background 0.15s, transform 0.15s;
}
.augur-cta-card a.btn:hover { background: var(--augur-accent-hover); transform: translateY(-1px); }

/* Not-now alternative card */
.augur-nope-card {
  background: #f1f5f9;
  border: 1px solid var(--augur-line);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  margin-top: 1.5rem;
}
.augur-nope-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--augur-dark); margin: 0 0 0.5rem; }
.augur-nope-card p { font-size: 0.93rem; color: var(--augur-text); margin: 0 0 0.85rem; line-height: 1.55; }
.augur-nope-card .news {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.augur-nope-card .news input {
  flex: 1; min-width: 200px;
  border: 1px solid var(--augur-line);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  font-family: inherit;
}
.augur-nope-card .news button {
  background: var(--augur-dark); color: #fff;
  border: none; border-radius: 10px;
  padding: 0 1rem; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* Mobile */
@media (max-width: 640px) {
  .augur-shell { padding: 0.85rem 0.85rem 2rem; }
  .augur-result { padding: 1.4rem 1.1rem; }
  .augur-msg .bubble { font-size: 0.93rem; }
  .augur-axis-value { font-size: 1.25rem; }
  .augur-result-head h2 { font-size: 1.35rem; }
  .augur-cta-card .alt { display: block; margin: 0.85rem 0 0; }
}

/* ---------------------------------------------------------------------------
   Viewport-lock layout for the chat phase.
   The page itself doesn't scroll — only the messages list inside the chat.
   The result phase (.is-result) reverts to normal page scrolling because the
   result content is much longer and benefits from full-page scroll.
   --------------------------------------------------------------------------- */
body.augur-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;     /* handles iOS keyboard / dynamic chrome */
  margin: 0;
  overflow: hidden;
}
body.augur-page > nav.augur-nav,
body.augur-page > .augur-intro,
body.augur-page > footer.augur-foot {
  flex: 0 0 auto;
}
body.augur-page > main.augur-shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 760px;     /* fixed chat box width — won't grow on wide screens */
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2rem;   /* generous breathing room top + bottom */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.augur-page .augur-trust {
  flex: 0 0 auto;
  margin-bottom: 1.5rem;            /* clear separation from chat below */
  padding: 0.9rem 1.15rem;          /* slightly larger banner */
}
body.augur-page .augur-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;             /* anchor for floating Quick-Reply overlay */
  padding: 0;                     /* inner blocks own their padding */
  overflow: hidden;
}
body.augur-page .augur-messages {
  flex: 1 1 auto;                 /* fills available space, messages top-aligned */
  min-height: 0;
  overflow-y: auto;
  /* Top padding sits BELOW the fade-out gradient (56px) so the first welcome
     bubbles don't appear pre-faded. */
  padding: 4.75rem 1.25rem 0.5rem;
  -webkit-overflow-scrolling: touch;
  /* Hide the scrollbar but keep scrolling functional */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / old Edge */
  /* Soft fade-out at the top so older messages dissolve elegantly as they scroll up */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 56px, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 56px, rgba(0,0,0,1) 100%);
}
body.augur-page .augur-messages::-webkit-scrollbar { display: none; }  /* Safari / Chrome */

/* Cloudflare Turnstile widget mount — sits in the input region. */
.augur-turnstile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem 1.5rem;
}
.augur-turnstile-mount { min-height: 65px; }
.augur-turnstile-hint {
  font-size: 0.78rem;
  color: var(--augur-muted);
  text-align: center;
  line-height: 1.4;
}

/* Floating-overlay Quick-Reply (used for the initial "Los" CTA).
   Sits absolutely centered over the chat box; doesn't disturb the
   messages flow underneath. */
body.augur-page #augur-replies.is-floating {
  position: absolute;
  inset: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;            /* messages remain interactive beneath */
  z-index: 5;
}
body.augur-page #augur-replies.is-floating button {
  pointer-events: auto;
  /* Soft fade-in + scale — slower than message bubbles so the CTA reveals deliberately */
  animation: augur-overlay-btn-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes augur-overlay-btn-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
body.augur-page #augur-replies {
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem 1.5rem;  /* generous bottom space so options don't sit flush */
}
body.augur-page #augur-input { flex: 0 0 auto; }
body.augur-page #augur-input .augur-input {
  padding: 0.8rem 1.25rem 1.5rem;   /* same generous bottom space for the input bar */
  margin-top: 0;
}
body.augur-page > footer.augur-foot { display: none; }   /* hidden during chat */

/* Intro — breathing room top to bottom, larger headline */
body.augur-page > .augur-intro {
  padding: 2.25rem 1.25rem 1.5rem;
}
body.augur-page > .augur-intro .crumb { margin-bottom: 1rem; }
body.augur-page > .augur-intro h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin-bottom: 0.95rem;
}
body.augur-page > .augur-intro p {
  font-size: 1rem;
  margin-bottom: 0;
  color: var(--augur-muted);
}

/* Result phase: unlock body scroll, hide chat + intro, show footer.
   Container wird AUF 1100px ERWEITERT — der Report wird zum Dashboard, nicht
   mehr zum schmalen Konversations-Container. Chat-Phase bleibt bei 760px. */
body.augur-page.is-result {
  display: block;
  height: auto;
  overflow: auto;
  /* Subtiles Page-Background damit die nun freistehenden weißen/farbigen
     Komponenten Kontrast haben (vorher wurden sie vom outer .augur-result
     White-Card abgegrenzt — die ist weg). */
  background: var(--augur-page-bg, #f8fafc);
}
body.augur-page.is-result > main.augur-shell {
  flex: none;
  display: block;
  overflow: visible;
  padding: 1.5rem 1.25rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
body.augur-page.is-result > .augur-intro,
body.augur-page.is-result .augur-trust,
body.augur-page.is-result .augur-chat {
  display: none;
}
body.augur-page.is-result > footer.augur-foot { display: block; }