/* ==========================================================================
   Landingpage Checklist Helper – Vorführungen (agents/checklist/landing-view.php)
   Nur Variablen aus tokens.css und landing.css, Klassenpräfix lpcl-.
   Szenen: public/assets/js/landing/checklist.js
   Akzent Grün/Indigo (Haken = erledigt); Text auf allen Flächen ≥ 4,5:1.
   ========================================================================== */

.lp-theme-checklist { --lp-a: light-dark(#15803D, #4ADE80); --lp-a2: light-dark(#2F4BD8, #8FA0FF); --lp-on-a: light-dark(#FFFFFF, #06200F); }

/* Namenskreise wie im Helper */
.lpcl-av {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
    font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .02em;
}
.lpcl-av-0 { background: light-dark(#E3E9FF, #2B3566); color: light-dark(#23338F, #DCE3FF); }
.lpcl-av-1 { background: light-dark(#DDF3E6, #1D4A31); color: light-dark(#145A33, #D4F5E2); }
.lpcl-av-2 { background: light-dark(#FDECD9, #5A3418); color: light-dark(#8A3D0B, #FFE3C9); }
.lpcl-av-3 { background: light-dark(#F7E0EE, #5A2442); color: light-dark(#8E1F5A, #FFDCEE); }
.lpcl-av-4 { background: light-dark(#ECE4FD, #3F2C6E); color: light-dark(#4C2A9A, #E9E0FF); }

/* ---------- Gemeinsame Bausteine ---------- */
.lpcl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lpcl-head strong { font-size: var(--fs-sm); }
.lpcl-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.lpcl-badge.is-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.lpcl-badge.is-live { background: var(--c-accent-soft); color: var(--c-accent); }
.lpcl-badge.is-live::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; animation: lpcl-pulse 1.6s ease-in-out infinite; }
@keyframes lpcl-pulse { 50% { opacity: .3; } }

.lpcl-prog { display: grid; gap: 5px; margin: 10px 0 6px; }
.lpcl-prog-text { font-size: var(--fs-xs); color: var(--text-2); }
.lpcl-prog-text b { color: var(--text); }
.lpcl-bar { display: block; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lpcl-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-success); transition: width .4s ease; }

.lpcl-list { list-style: none; margin: 0; padding: 0; }
.lpcl-sec { margin: 10px 0 2px; font-size: 11px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.lpcl-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.lpcl-sec + .lpcl-row, .lpcl-row:first-child { border-top: 0; }
.lpcl-box {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px;
    border: 2px solid var(--border-strong); border-radius: 5px; color: transparent; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lpcl-row.is-req .lpcl-box { border-color: var(--c-primary); }
.lpcl-row.is-done .lpcl-box { background: var(--c-success); border-color: var(--c-success); color: var(--surface); }
.lpcl-row.is-skip .lpcl-box, .lpcl-row.is-todo .lpcl-box { border-style: dashed; }
.lpcl-row.is-pressed .lpcl-box { transform: scale(.88); }
.lpcl-text { flex: 1 1 auto; min-width: 0; color: var(--text); }
.lpcl-row.is-done .lpcl-text { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
.lpcl-req { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 10px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.lpcl-who { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11px; color: var(--text-2); }
.lpcl-who small { font-variant-numeric: tabular-nums; }
.lpcl-who .lpcl-av { animation: lpcl-pop .3s ease; }
@keyframes lpcl-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.lpcl-state { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.lpcl-list.is-tight .lpcl-row { padding: 5px 0; }
.lpcl-list.is-mini .lpcl-row { font-size: var(--fs-xs); }

.lpcl-ghost { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.lpcl-go { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--lp-a); color: var(--lp-on-a); font-size: var(--fs-xs); font-weight: 700; }
.lpcl-go kbd, .lpcl-ghost kbd { padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; font: inherit; font-size: 10px; opacity: .85; }
.lpcl-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 600; color: var(--text); }
.lpcl-arrow { display: inline-flex; color: var(--lp-a); }
.lpcl-arrow.is-down .icon { transform: rotate(90deg); }
.lpcl-hint { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-2); }
.lpcl-hint .icon { color: var(--c-success); }

/* ---------- Hero ---------- */
.lpcl-hero { position: relative; min-height: 380px; }

/* ---------- Bühne ---------- */
.lpcl-ask { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--lp-a-line); border-radius: 10px; background: var(--surface); }
.lpcl-ask-text { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.lpcl-ask-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: var(--lp-a-soft); color: var(--lp-a); font-size: var(--fs-xs); font-weight: 700; }
.lpcl-s1 .lp-alex { margin: 10px 0; }
.lpcl-gen { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lpcl-gen strong { display: block; font-size: var(--fs-sm); }
.lpcl-gen small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.lpcl-gen ul { list-style: none; margin: 4px 0 0; padding: 0; }
.lpcl-gen li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-xs); color: var(--text); opacity: 0; transform: translateY(6px); }
[data-lp-stage][data-step="1"] .lpcl-s1 .lpcl-gen li,
[data-lp-stage][data-step="2"] .lpcl-s2 .lpcl-gen li { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--d) * .18s + .3s), transform .35s ease calc(var(--d) * .18s + .3s); }
.lpcl-gen li .lpcl-box { width: 14px; height: 14px; }
.lpcl-split { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; }
.lpcl-file { display: grid; justify-items: center; gap: 4px; padding: 14px 12px; border: 1px dashed var(--lp-a-line); border-radius: 12px; background: var(--lp-a-soft); text-align: center; }
.lpcl-file .icon { color: var(--lp-a); }
.lpcl-file strong { font-size: var(--fs-xs); }
.lpcl-file small { font-size: 10px; color: var(--text-2); }
.lpcl-step { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.lpcl-step-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); }
.lpcl-step-top i { font-style: normal; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-weight: 700; }
.lpcl-step-text { margin: 10px 0 6px; font-size: var(--fs-md); font-weight: 650; line-height: 1.3; color: var(--text); }
.lpcl-step-note { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
.lpcl-step-acts { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.lpcl-step.is-small { padding: 12px; }
.lpcl-step.is-small .lpcl-step-text { font-size: var(--fs-base); }
.lpcl-s4 .lpcl-list { margin-top: 8px; }

/* ---------- Arbeitsweisen ---------- */
.lpcl-modes { position: relative; display: grid; gap: 12px; min-height: 230px; }
.lpcl-seg { display: inline-flex; justify-self: start; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.lpcl-seg span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); transition: background .25s ease, color .25s ease; }
.lpcl-seg span.is-on { background: var(--surface); color: var(--lp-a); box-shadow: 0 0 0 1px var(--border); }
.lpcl-mode { transition: opacity .35s ease; }
.lpcl-mode.is-confirm { display: none; }
.lpcl-modes.is-confirm .lpcl-mode.is-steps { display: none; }
.lpcl-modes.is-confirm .lpcl-mode.is-confirm { display: block; }

/* ---------- Lernen ---------- */
.lpcl-learn { position: relative; display: grid; gap: 12px; min-height: 280px; }
.lpcl-fb { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; margin-left: 48px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.lpcl-fb-text { flex: 1; min-height: 18px; font-size: var(--fs-sm); color: var(--text); }
.lpcl-fb-text:empty::before { content: attr(data-ph); color: var(--text-3); }
.lpcl-fb-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
.lpcl-skip { padding-top: 10px; border-top: 1px solid var(--border); }
.lpcl-skip-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 40px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: var(--fs-xs); }
.lpcl-skip-row > span:first-child { flex: 1; color: var(--text); }

/* ---------- Automatik ---------- */
.lpcl-auto { display: grid; justify-items: stretch; gap: 8px; }
.lpcl-event, .lpcl-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lpcl-event .icon, .lpcl-task .icon { color: var(--lp-a); }
.lpcl-event span, .lpcl-task span { display: grid; gap: 2px; }
.lpcl-event strong, .lpcl-task strong { font-size: var(--fs-sm); }
.lpcl-event small, .lpcl-task small, .lpcl-runcard small { font-size: 11px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.lpcl-runcard { padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--c-warning); border-radius: 10px; background: var(--surface); }
.lpcl-auto .lpcl-arrow { justify-self: center; }

/* ---------- Kleine Demos ---------- */
.lpcl-quick { display: grid; gap: 8px; }
.lpcl-paste { padding: 6px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.lpcl-hints { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lpcl-hints li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text); }
.lpcl-hints .icon { color: var(--c-warning); flex: none; }
.lpcl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lpcl-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-2); }
.lpcl-chips span.is-on { background: var(--lp-a-soft); border-color: var(--lp-a-line); color: var(--lp-a); }
.lpcl-share { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lpcl-share .lpcl-av { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.lpcl-share .lpcl-av + .lpcl-av { margin-left: -8px; }
.lpcl-share span { margin-left: 8px; font-size: var(--fs-xs); color: var(--text-2); }

@media (max-width: 640px) {
    .lpcl-split { grid-template-columns: 1fr; justify-items: start; }
    .lpcl-split .lpcl-arrow .icon { transform: rotate(90deg); }
    .lpcl-fb, .lpcl-skip-row { margin-left: 0; }
    .lpcl-who small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lpcl-gen li { opacity: 1; transform: none; transition: none !important; }
    .lpcl-badge.is-live::before, .lpcl-who .lpcl-av { animation: none; }
}