/* Kernflow · Terminal-Film (aus hero-terminal.html ausgelagert) */
  /* ---------- Fensterstapel ---------- */
  .term-wrap { position: relative; perspective: 1500px; }
  .term-ghost {
    position: absolute; inset: 0; z-index: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #111118, #0C0C11);
    border: 1px solid rgba(255,255,255,.07);
    transform-origin: 50% 60%;
    padding: 14px 16px;
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    display: flex; align-items: center; gap: 12px;
    will-change: transform;
  }
  .term-ghost::before { content: ''; width: 24px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
  .term-ghost--1 { transform: translate(-26px, 30px) scale(.965); opacity: .75; }
  .term-ghost--2 { transform: translate(-52px, 60px) scale(.93); opacity: .45; }
  .term {
    position: relative; z-index: 1;
    width: 100%;
    border-radius: 18px;
    background: linear-gradient(180deg, #14141B, #0E0E13);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.6),
      0 40px 90px -30px rgba(0,0,0,.95),
      0 0 140px -40px rgba(245,165,36,.28);
    font-family: var(--mono);
    transform-origin: 50% 60%;
    overflow: hidden;
    will-change: transform;
  }
  .term::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4) 40%, rgba(255,255,255,.4) 60%, transparent);
    pointer-events: none;
  }
  .term__sheen {
    position: absolute; inset: -20% 0; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, transparent 45%, rgba(255,255,255,.055) 50%, transparent 55%);
    transform: translateX(-120%);
  }
  .term__bar {
    display: flex; align-items: center; gap: 14px;
    height: 46px; padding: 0 14px 0 16px;
    border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--muted);
    background: rgba(255,255,255,.015);
  }
  .term__dots { display: flex; gap: 7px; }
  .term__dots i { width: 11px; height: 11px; border-radius: 50%; }
  .term__dots i:nth-child(1) { background: #FF5F57; }
  .term__dots i:nth-child(2) { background: #FEBC2E; }
  .term__dots i:nth-child(3) { background: #28C840; }
  .term__title { flex: 1; text-align: center; letter-spacing: .02em; }
  .term__title b { color: var(--ink-2); font-weight: 500; }
  .term__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #7CE0A0; }
  .term__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34D06B; box-shadow: 0 0 10px #34D06B; animation: blink 1.6s infinite; }
  .term.is-paused .term__live { color: var(--c-auto); }
  .term.is-paused .term__live::before { background: var(--c-auto); box-shadow: 0 0 10px var(--c-auto); animation: none; }
  @keyframes blink { 50% { opacity: .35; } }
  .term__timer { min-width: 64px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .term__play {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    border: 1px solid var(--line-2); color: var(--ink-2); background: rgba(255,255,255,.03);
  }
  .term__play svg { width: 11px; height: 11px; }
  .term__play .i-pause { display: block; } .term__play .i-play { display: none; }
  .term.is-paused .term__play .i-pause { display: none; } .term.is-paused .term__play .i-play { display: block; }

  .term__body { padding: 18px 20px 14px; display: grid; gap: 16px; }

  /* Befehlszeilen */
  .term__log { display: grid; gap: 7px; min-height: 128px; align-content: start; font-size: 13px; }
  .cmd { display: flex; gap: 10px; align-items: baseline; opacity: 0; color: var(--ink-2); white-space: nowrap; }
  .cmd__p { color: var(--c-auto); }
  .cmd__t { color: var(--ink); }
  .cmd.is-done { color: var(--muted); }
  .cmd.is-done .cmd__t { color: var(--muted); }
  .cmd__ok { color: #34D06B; margin-left: 6px; opacity: 0; }
  .cmd__ms { margin-left: auto; color: var(--muted); font-size: 11px; opacity: 0; }
  .caret { display: inline-block; width: 7px; height: 14px; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: blink .9s steps(1) infinite; }

  /* Bühne */
  .stage { position: relative; height: 310px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); overflow: hidden; }
  .stage::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 110%, rgba(245,165,36,.08), transparent 70%);
  }
  .stage__label {
    position: absolute; left: 14px; top: 12px; z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 9px 5px 6px; border-radius: 7px;
    background: rgba(10,10,14,.7); border: 1px solid var(--line-2);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
    opacity: 0;
    backdrop-filter: blur(6px);
  }
  .stage__label i { width: 3px; height: 12px; border-radius: 2px; background: var(--c-auto); box-shadow: 0 0 10px var(--c-auto); }
  .stage__label span { color: var(--muted); }
  .scene { position: absolute; inset: 0; padding: 20px; padding-top: 44px; opacity: 0; will-change: transform, opacity, filter; }

  /* Szene 1: Mail */
  .mail {
    position: absolute; left: 20px; top: 44px; width: calc(100% - 40px);
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    font-family: var(--font);
    transform-origin: 0 0;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.7);
  }
  .mail__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .mail__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5B8CFF, #B27CFF); font-size: 12px; font-weight: 600; color: #fff; }
  .mail__from { font-size: 13px; font-weight: 500; }
  .mail__from small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
  .mail__time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .mail__subject { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
  .mail__body { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
  .mail__body mark { background: transparent; color: inherit; border-radius: 4px; padding: 0 2px; transition: background .4s, color .4s; }
  .mail__body mark.is-hot { background: rgba(245,165,36,.22); color: #FFD08A; }
  .mail__attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 8px; border-radius: 6px; border: 1px dashed rgba(255,255,255,.2); font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .scan {
    position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4;
    background: linear-gradient(90deg, transparent, var(--c-auto), transparent);
    box-shadow: 0 0 24px 4px rgba(245,165,36,.35);
    opacity: 0;
  }
  .chips { position: absolute; right: 20px; top: 44px; width: 44%; display: grid; gap: 8px; }
  .chip {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 9px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    font-size: 12px; opacity: 0;
    box-shadow: 0 10px 24px -14px rgba(0,0,0,.8);
  }
  .chip__k { color: var(--muted); }
  .chip__v { color: var(--ink); font-weight: 500; }
  .chip__ok { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(52,208,107,.15); color: #34D06B; font-size: 10px; transform: scale(0); }
  .chip.is-ok .chip__ok { transform: scale(1); transition: transform .35s var(--ease); }

  /* Szene 3: Kalkulation */
  .calc { display: grid; gap: 10px; font-size: 13px; }
  .calc__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; position: relative; padding: 8px 0; opacity: 0; }
  .calc__row::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--line); }
  .calc__bar { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--c-auto); box-shadow: 0 0 10px var(--c-auto); }
  .calc__k { color: var(--ink-2); }
  .calc__k small { color: var(--muted); margin-left: 8px; }
  .calc__v { color: var(--ink); font-variant-numeric: tabular-nums; }
  .calc__row--sum { margin-top: 6px; padding-top: 12px; font-size: 17px; }
  .calc__row--sum .calc__v { color: #FFD08A; font-weight: 500; }
  .calc__row--sum::after { display: none; }
  .calc__note { font-size: 11px; color: var(--muted); opacity: 0; }

  /* Szene 4: PDF */
  .pdf { position: absolute; left: 50%; top: 40px; margin-left: -66px; width: 132px; filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)); }
  .pdf__paper { fill: #F6F5F1; }
  .pdf__ln { stroke: #C9C8CF; stroke-width: 5; stroke-linecap: round; }
  .pdf__ln--dark { stroke: #2A2A33; }
  .pdf__logo { fill: #E76624; }
  .pdf__stamp { fill: none; stroke: #E76624; stroke-width: 3; opacity: 0; }
  .pdf__price { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: #E76624; opacity: 0; }
  .pdf__badge {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,.06); border: 1px solid var(--line-2);
    font-size: 11px; color: var(--ink-2); white-space: nowrap; opacity: 0;
  }
  .pdf__prog { position: absolute; left: 20px; right: 20px; bottom: 62px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
  .pdf__prog i { display: block; height: 100%; width: 0; background: var(--c-auto); box-shadow: 0 0 12px var(--c-auto); }

  /* Szene 5: Versand */
  .sent { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
  .sent__ring { width: 74px; height: 74px; margin: 0 auto 14px; }
  .sent__ring circle { fill: none; stroke: #34D06B; stroke-width: 2; stroke-dasharray: 220; stroke-dashoffset: 220; }
  .sent__ring path { fill: none; stroke: #34D06B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
  .sent__t { font-family: var(--font); font-size: 15px; font-weight: 500; opacity: 0; }
  .sent__s { font-size: 12px; color: var(--muted); margin-top: 4px; opacity: 0; }
  .sent__cmp {
    display: inline-flex; gap: 14px; margin-top: 18px; padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line);
    font-size: 12px; opacity: 0;
  }
  .sent__cmp b { color: #FFD08A; font-weight: 500; }
  .sent__cmp s { color: var(--muted); }
  .sent__burst { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #34D06B; opacity: 0; }

  /* Kapitel-Leiste (klickbar) */
  .term__chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0 20px 16px; }
  .ch { display: grid; gap: 7px; font-size: 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; padding: 4px 0 0; border: 0; text-align: left; }
  .ch:hover { color: var(--ink-2); }
  .ch__bar { height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
  .ch__bar i { display: block; height: 100%; width: 0; background: var(--ink-2); }
  .ch.is-on { color: var(--ink); }
  .ch.is-on .ch__bar i { background: var(--c-auto); box-shadow: 0 0 8px var(--c-auto); }