/* ablauf-terminal.css  -  Modul: Interaktives Zwei-Fenster-Ablauf-Terminal (Styling)
   Eigenstaendiges Feature-Modul, per system/config/modules.php zuschaltbar.
   Laedt nach main.css und liest die globalen :root-Variablen (--cvw). */
/* ---- Ablauf als interaktives Zwei-Fenster-Terminal: links die Kommando-Liste,
   rechts der Output-Screen, auf dem jede Ausfuehrung ablaeuft (Kommando tippt,
   Progress fuellt, Details drucken, ASCII-Grafik, rotierende Hints, Log stapelt) ---- */
.proc-term { margin-top: 8px; }
.proc-term__body { padding: 28px 34px 36px; }
.proc-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .proc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; } }
.proc-h { margin: 0; }
.proc-step + .proc-step { margin-top: 6px; }
.proc-line { display: block; width: 100%; text-align: left; font: inherit; padding: 15px 14px 13px; margin: 0 -14px; border-radius: 10px; transition: background-color .2s; }
.proc-line:hover { background: rgba(255,255,255,.045); }
.proc-line.is-run { background: rgba(143,176,255,.08); }
.proc-row1 { display: flex; align-items: baseline; gap: 14px; }
.proc-title { flex: none; color: #fff; font-size: clamp(16px, 1.5 * var(--cvw), 20px); font-weight: 600; }
.proc-line.is-run .proc-title { color: #8fb0ff; }
.proc-log { flex: none; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; color: #8fb0ff; }
.proc-dots { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(255,255,255,.16); transform: translateY(-5px); }
.proc-plus { flex: none; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 17px; font-weight: 700; color: #5be0a0; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.proc-line.is-run .proc-plus { transform: translateX(4px); }
.proc-sub { display: block; margin: 4px 0 0 47px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .03em; color: rgba(179,185,187,.6); }
.proc-final { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; padding: 0 0 0 12px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(16px, 1.6 * var(--cvw), 21px); font-weight: 700; color: #eaf0ff; text-align: left; transition: color .2s; }
.proc-final:hover { color: #fff; }
.proc-final__arr { color: #6aa8ff; }
/* Output-Screen: eigenes inneres Terminal-Feld, Ausgaben stapeln sich wie ein Log */
/* scroll-margin-top: Ziel des Mobile-Auto-Scrolls (site.js revealScreen) landet
   unter dem fixen Header statt dahinter */
.proc-screen { background: #0d0f14; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 24px 28px; min-height: 460px; max-height: 620px; overflow-y: auto; scroll-margin-top: 96px; scrollbar-width: thin; scrollbar-color: rgba(143,176,255,.3) transparent; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.proc-cmd { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #eaf0ff; }
.proc-cmd span { color: #5be0a0; margin-right: 8px; }
.proc-prog { margin: 0 0 10px; font-size: 14.5px; color: #8fb0ff; letter-spacing: .04em; }
.proc-art { margin: 6px 0 14px; font-size: 13px; line-height: 1.45; color: rgba(91,224,160,.6); white-space: pre; overflow-x: auto; }
.proc-done { margin: 0 0 12px; font-size: 13.5px; color: #5be0a0; }
.proc-sep { margin: 16px 0; border: 0; border-top: 1px dashed rgba(255,255,255,.1); }
.proc-out { margin: 0 0 7px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.7; color: rgba(155,193,255,.95); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.proc-out.is-on { opacity: 1; transform: none; }
.proc-out--hint { color: #5be0a0; }
.proc-clink { display: inline-block; margin-top: 6px; color: #eaf0ff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(143,176,255,.5); transition: color .2s, border-color .2s; }
.proc-clink:hover { color: #8fb0ff; border-color: #8fb0ff; }
.proc-btn { display: inline-block; margin: 10px 12px 2px 0; padding: 12px 22px; border: 1px solid rgba(143,176,255,.55); border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 700; color: #eaf0ff; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.proc-btn:hover { background: #3359b5; border-color: #3359b5; color: #fff; }
/* Einspalten-Layout: schmale Polster, damit Titel + Pfeil in die Zeile passen
   (proc-title darf schrumpfen/umbrechen, die negative Zeilen-Ausdehnung entfaellt) */
.proc-list { scroll-margin-top: 96px; }
@media (max-width: 1023.98px) {
  .proc-term__body { padding: 22px 14px 26px; }
  .proc-line { margin: 0; padding: 14px 10px 12px; }
  .proc-title { flex: 0 1 auto; min-width: 0; }
  .proc-screen { padding: 20px 14px; min-height: 400px; }
}
/* Ohne JS: der Screen entfaellt, die vorgerenderten Detail-Bloecke werden sichtbar */
html:not(.js) .proc-screen { display: none; }
html:not(.js) .proc-detail[hidden] { display: block; padding: 4px 12px 16px clamp(16px, 3 * var(--cvw), 56px); }
html:not(.js) .proc-detail .proc-out { opacity: 1; transform: none; }
html.rmo .proc-out { transition: none; transform: none; }
html.rmo .proc-plus { transition: none; }