/* ==========================================================================
   Landingpage Goals Agent – Vorführungen (agents/goals/landing-view.php)
   Nur Variablen aus tokens.css und landing.css, Klassenpräfix lpg-.
   Szenen: public/assets/js/landing/goals.js
   ========================================================================== */

.lpg-hero-win .lp-win-body { min-height: 430px; }
.lpg-stage-win .lp-win-body { min-height: 380px; }

/* ---------- Mini-Chat ---------- */
.lpg-chat { display: flex; flex-direction: column; gap: 8px; }
.lpg-msg { display: flex; gap: 8px; align-items: flex-end; transition: opacity .35s ease, transform .35s ease; }
.lpg-msg p { margin: 0; padding: 8px 12px; font-size: var(--fs-sm); line-height: 1.45; max-width: 86%; }
.lpg-msg.is-user { justify-content: flex-end; }
.lpg-msg.is-user p { border-radius: 14px 14px 4px 14px; background: var(--lp-a); color: var(--lp-on-a); }
.lpg-msg.is-alex p { border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); min-height: 1.45em; }
.lpg-av { border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--lp-a-line); }
.lpg-msg.is-off { opacity: 0; transform: translateY(6px); }

/* ---------- Zielkarte ---------- */
.lpg-goalcard {
    margin-top: 14px; padding: 14px 16px; border-radius: 14px;
    border: 1px solid var(--lp-a-line); background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--lp-a) 10%, transparent);
    transition: opacity .4s ease, transform .4s ease;
}
.lpg-goalcard.is-off { opacity: 0; transform: translateY(8px); }
.lpg-goalcard small { display: inline-flex; align-items: center; gap: 6px; color: var(--lp-a); font-size: var(--fs-xs); font-weight: 600; }
.lpg-sentence { margin: 6px 0 10px; font-size: var(--fs-md); font-weight: 650; line-height: 1.35; min-height: 1.35em; color: var(--text); }
.lpg-pills, .lpg-types { display: flex; flex-wrap: wrap; gap: 6px; }
.lpg-test { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-3); }
.lpg-test li { display: flex; align-items: center; gap: 6px; transition: color .3s ease; }
.lpg-test li .icon { color: var(--border-strong); transition: color .3s ease; }
.lpg-test li.is-ok { color: var(--text); }
.lpg-test li.is-ok .icon { color: var(--c-success); }

/* ---------- Fortschritt ---------- */
.lpg-bar { --tone: var(--c-success); position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; }
.lpg-bar.is-tight { --tone: var(--c-warning); }
.lpg-bar.is-risk { --tone: var(--c-danger); }
.lpg-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 999px; background: var(--tone); transition: width .8s ease, background .4s ease; }
.lpg-bar-soll { position: absolute; top: -3px; bottom: -3px; left: var(--s); width: 2px; border-radius: 2px; background: var(--text); opacity: .5; }
.lpg-progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.lpg-progress-meta b { color: var(--text); }
.lpg-state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: background .3s ease, color .3s ease; }
.lpg-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lpg-state.is-good  { background: var(--c-success-soft); color: var(--c-success); }
.lpg-state.is-tight { background: var(--c-warning-soft); color: var(--c-warning); }
.lpg-state.is-risk  { background: var(--c-danger-soft);  color: var(--c-danger); }

/* ---------- Erzählung ---------- */
.lpg-scene-k { margin: 0 0 10px; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; color: var(--lp-a); text-transform: none; }
.lpg-pairs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lpg-pairs li {
    display: grid; grid-template-columns: minmax(0, .7fr) auto minmax(0, 1.6fr); gap: 10px; align-items: center;
    padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm);
}
[data-lp-stage] .lpg-s1 .lpg-pairs li { opacity: 0; transform: translateX(-8px); transition: opacity .4s ease calc(var(--d) * 120ms), transform .4s ease calc(var(--d) * 120ms); }
[data-lp-stage][data-step="1"] .lpg-s1 .lpg-pairs li { opacity: 1; transform: none; }
.lpg-vague { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: line-through; }
.lpg-vague .icon { color: var(--c-danger); }
.lpg-arrow { color: var(--text-3); display: inline-flex; }
.lpg-clear { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--text); font-weight: 600; }
.lpg-clear .icon { color: var(--c-success); flex: none; margin-top: 3px; }
.lpg-hint { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-2); }
.lpg-hint .icon { color: var(--lp-a); flex: none; margin-top: 1px; }

.lpg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lpg-ideas, .lpg-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.lpg-ideas li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--surface-2); }
.lpg-tag { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--lp-a-soft); color: var(--lp-a); }
.lpg-tag.is-learn { background: var(--c-accent-soft); color: var(--c-accent); }
.lpg-tag.is-help { background: var(--c-warning-soft); color: var(--c-warning); }
.lpg-plan li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.lpg-plan li > span { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 650; color: var(--text-2); }
.lpg-plan li.is-first { border-color: var(--lp-a); }
.lpg-plan li em { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--lp-a-soft); color: var(--lp-a); font-style: normal; font-size: 11px; font-weight: 650; }
[data-lp-stage] .lpg-s2 .lpg-plan li { opacity: .35; transition: opacity .4s ease; }
[data-lp-stage][data-step="2"] .lpg-s2 .lpg-plan li { opacity: 1; }

.lpg-stages { list-style: none; margin: 0 0 16px; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.lpg-stages::before { content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.lpg-stages li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lpg-stages b { font-weight: 600; }
.lpg-stages em { font-style: normal; color: var(--text-2); font-size: var(--fs-xs); }
.lpg-dot { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: var(--lp-on-a); position: relative; z-index: 1; }
.lpg-stages li.is-done .lpg-dot { border-color: var(--c-success); background: var(--c-success); color: var(--surface); }
.lpg-stages li.is-goal .lpg-dot { border-color: var(--lp-a); background: var(--lp-a-soft); }
[data-lp-stage] .lpg-s3 .lpg-stages li { opacity: 0; transform: translateX(-6px); transition: opacity .35s ease calc(var(--d) * 90ms), transform .35s ease calc(var(--d) * 90ms); }
[data-lp-stage][data-step="3"] .lpg-s3 .lpg-stages li { opacity: 1; transform: none; }

.lpg-rhythm { display: grid; gap: 10px; }
.lpg-rhythm div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.lpg-rhythm .icon { grid-row: span 2; color: var(--lp-a); }
.lpg-rhythm b { font-weight: 650; }
.lpg-rhythm small { color: var(--text-2); font-size: var(--fs-xs); }
[data-lp-stage] .lpg-s4 .lpg-rhythm div { opacity: 0; transform: translateY(8px); transition: opacity .4s ease calc(var(--d) * 120ms), transform .4s ease calc(var(--d) * 120ms); }
[data-lp-stage][data-step="4"] .lpg-s4 .lpg-rhythm div { opacity: 1; transform: none; }
.lpg-streak { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--lp-a-soft); color: var(--lp-a); font-size: var(--fs-sm); font-weight: 650; }

/* ---------- Tages-Check ---------- */
.lpg-daily, .lpg-weekly, .lpg-areas { position: relative; display: flex; flex-direction: column; gap: 10px; }
.lpg-daily-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.lpg-daily-head b { display: inline-flex; align-items: center; gap: 6px; }
.lpg-streak-chip { padding: 2px 10px; border-radius: 999px; background: var(--lp-a-soft); color: var(--lp-a); font-size: var(--fs-xs); font-weight: 650; transition: transform .3s ease; }
.lpg-streak-chip.is-bump { transform: scale(1.12); }
.lpg-field { display: flex; flex-direction: column; gap: 4px; }
.lpg-field small { font-size: var(--fs-xs); color: var(--text-2); }
.lpg-input { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm); color: var(--text); }
.lpg-input.is-num { max-width: 180px; font-variant-numeric: tabular-nums; }
.lpg-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--lp-a); opacity: 0; }
.is-typing .lpg-caret { opacity: 1; animation: lpg-blink 1s steps(1) infinite; }
@keyframes lpg-blink { 50% { opacity: 0; } }
.lpg-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.lpg-box { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 5px; border: 2px solid var(--border-strong); color: transparent; transition: background .3s ease, border-color .3s ease; }
.lpg-box.is-on { background: var(--c-success); border-color: var(--c-success); color: var(--surface); }
.lpg-row { display: flex; justify-content: flex-end; }
.lpg-btn.is-pressed { transform: scale(.94); }
.lpg-reply { transition: opacity .4s ease, transform .4s ease; }
.lpg-reply.is-off { opacity: 0; transform: translateY(6px); }
.lpg-reply .lp-alex-bubble { font-size: var(--fs-sm); }

/* ---------- Wochen-Check ---------- */
.lpg-wk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.lpg-sugg { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border-strong); font-size: var(--fs-sm); transition: opacity .4s ease, border-color .3s ease; }
.lpg-sugg > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.lpg-sugg.is-off { opacity: 0; }
.lpg-sugg.is-applied { border-style: solid; border-color: var(--c-success); }
.lpg-apply { cursor: default; }
.lpg-sugg.is-applied .lpg-apply { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }

/* ---------- Monats-Check ---------- */
.lpg-qa { margin: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.lpg-qa dt { font-weight: 650; color: var(--text); margin-top: 6px; }
.lpg-qa dt:first-child { margin-top: 0; }
.lpg-monthly .lpg-reply { margin-top: 14px; }
.lpg-qa dd { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }

/* ---------- Bereiche ---------- */
.lpg-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; align-self: flex-start; }
.lpg-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); transition: background .25s ease, color .25s ease; }
.lpg-tabs span.is-active { background: var(--lp-a-soft); color: var(--lp-a); }
.lpg-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lpg-goals li { padding: 10px 12px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); }
.lpg-goals b { font-weight: 600; }
.lpg-goals[hidden] { display: none; }

/* ---------- Raster ---------- */
.lpg-ampel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lpg-ampel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-sm); }
.lpg-first-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); }
.lpg-widget-mini { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.lpg-widget-mini .lpg-w-due { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--c-warning-soft); color: var(--text); font-size: var(--fs-xs); }

@media (max-width: 640px) {
    .lpg-cols { grid-template-columns: minmax(0, 1fr); }
    .lpg-pairs li { grid-template-columns: minmax(0, 1fr); }
    .lpg-arrow { transform: rotate(90deg); justify-self: start; }
    .lpg-test { grid-template-columns: minmax(0, 1fr); }
}