/* ============ Anfrage-Assistent · Clean Studio (scoped unter .asst) ============ */
/* Geteilte Quelle für anfrage-beta.html UND kontakt.html (Tab „Geführte Anfrage"). */

/* Weicher Verlaufs-Wash oben (nur wo die Seite ihn einbindet: <div class="asst-wash">) */
.asst-wash { position: fixed; top: 0; left: 0; right: 0; height: 440px; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--accent-glow) 0%, transparent 70%); }

.asst { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 64px 24px 120px; }
.asst--embed { padding: 8px 0 24px; }

/* Eyebrow */
.asst-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; }
.asst-eyebrow-t { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.asst-beta { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-glow-strong); border-radius: 999px; padding: 2px 8px; }

/* Running answers */
.asst-trail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; min-height: 20px; }
.asst-pill { font-size: 0.78rem; display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; animation: asstFade 0.4s ease; }
.asst-pill:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); margin-left: 8px; }
.asst-pill .lbl { color: var(--text-muted); font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.asst-pill .val { color: var(--text-secondary); font-weight: 500; }

/* Progress */
.asst-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.asst-dots { display: flex; gap: 9px; }
.asst-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); opacity: 0.4; transition: all var(--transition); }
.asst-dot.done { background: var(--accent); opacity: 0.55; }
.asst-dot.active { background: var(--accent); opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 4px var(--accent-glow); }
.asst-counter { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.08em; }
.asst-counter b { color: var(--text-secondary); font-weight: 600; }

/* Question */
.asst-qwrap { animation: asstSlideIn 0.45s cubic-bezier(0.4,0,0.2,1); }
.asst-qwrap.leaving { animation: asstSlideOut 0.22s ease forwards; }
.asst-q { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 6px; }
.asst-hint { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 30px; }

/* Option rows */
.asst-options { display: flex; flex-direction: column; }
.asst-opt { position: relative; display: flex; align-items: center; width: 100%; text-align: left; padding: 17px 4px; border: none; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer;
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--text-primary);
    transition: color var(--transition), padding var(--transition), background var(--transition); }
.asst-opt:first-child { border-top: 1px solid var(--border); }
.asst-opt .arrow { position: absolute; right: 6px; opacity: 0; transform: translateX(-8px); color: var(--accent); font-size: 1.1rem; transition: all var(--transition); }
.asst-opt:hover { color: var(--accent); padding-left: 14px; background: linear-gradient(90deg, var(--accent-subtle), transparent 80%); }
.asst-opt:hover .arrow { opacity: 1; transform: translateX(0); }

/* Skip */
.asst-skip { margin-top: 22px; background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; padding: 4px 0; transition: color var(--transition); }
.asst-skip:hover { color: var(--text-secondary); }

/* Text + inputs (scoped, damit globale form-input-Regeln nicht greifen) */
.asst .asst-field, .asst-field { width: 100%; background: transparent; border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-display); font-size: 1.1rem; padding: 14px 2px; transition: border-color var(--transition); }
.asst-field::placeholder { color: var(--text-muted); }
.asst-field:focus { outline: none; border-color: var(--accent); box-shadow: none; }
textarea.asst-field { min-height: 96px; line-height: 1.5; resize: vertical; }

.asst-formgrid { display: flex; flex-direction: column; }
.asst-frow { display: flex; flex-direction: column; margin-bottom: 16px; }
.asst-flabel { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.asst-flabel .req { color: var(--accent); }
.asst-captcha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 26px; }
.asst-captcha label { font-size: 0.95rem; color: var(--text-secondary); font-weight: 500; }
.asst-captcha input { width: 92px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-mono); font-size: 1rem; padding: 9px 12px; text-align: center; transition: border-color var(--transition); }
.asst-captcha input:focus { outline: none; border-color: var(--accent); box-shadow: none; }

/* CTA */
.asst-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-family: var(--font-display); font-size: 1rem; font-weight: 600; padding: 14px 26px; cursor: pointer; transition: all var(--transition); box-shadow: 0 4px 20px var(--accent-glow-strong); }
.asst-cta:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-glow-strong); }
.asst-cta:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.asst-cta .arrow { transition: transform var(--transition); }
.asst-cta:hover:not(:disabled) .arrow { transform: translateX(4px); }
.asst-cta-wrap { margin-top: 26px; }

.asst-back { margin-top: 34px; background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.76rem; cursor: pointer; transition: color var(--transition); }
.asst-back:hover { color: var(--text-secondary); }
.asst-err { color: var(--error); font-size: 0.86rem; margin-top: 12px; min-height: 1.1em; }

/* Sending */
.asst-sending { display: flex; align-items: center; gap: 14px; color: var(--text-secondary); font-size: 1rem; animation: asstFade 0.4s ease; }
.asst-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: asstSpin 0.8s linear infinite; flex-shrink: 0; }

/* Result */
.asst-done { animation: asstSlideIn 0.5s ease; }
.asst-check { width: 52px; height: 52px; margin-bottom: 22px; border-radius: 50%; border: 1.5px solid var(--success); display: flex; align-items: center; justify-content: center; color: var(--success); font-size: 1.4rem; }
.asst-done h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 16px; }
.asst-reply { color: var(--text-primary); font-size: 1.02rem; line-height: 1.65; }
.asst-note { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.asst-note a { color: var(--accent); }
.asst-restart { margin-top: 20px; background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; }
.asst-restart:hover { color: var(--text-secondary); }

.asst-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

@keyframes asstFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes asstSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes asstSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
@keyframes asstSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .asst { padding: 40px 20px 90px; }
    .asst--embed { padding: 8px 0 24px; }
    .asst-q { font-size: 1.42rem; }
}