/* ═══════════════════════════════════════════════════════════════════════════
   INVOSPAN — Der Weg einer Rechnung.
   Sieben Bilder, eine Geschichte. Bewusst ruhig gesetzt: wenig pro Bild, viel
   Luft, große Schrift. Wer hier etwas verstehen soll, darf nicht suchen müssen.
   Alles unter .sc- gescoped.
   ═══════════════════════════════════════════════════════════════════════════ */

.sc {
    --sc-bg:      #06171f;
    --sc-panel:   #0a2430;
    --sc-line:    #1a4054;
    --sc-soft:    #12303e;
    --sc-text:    #eaf3f8;
    --sc-muted:   #93b3c4;
    --sc-dim:     #5d8195;
    --sc-accent:  #9ccef0;
    --sc-deep:    #2f6f9f;
    --sc-ok:      #6fd3b2;
    --sc-warn:    #e8b86d;

    /* Alte Software sieht alt aus — das ist der halbe Punkt der Geschichte. */
    --sc-old-bg:   #d9dbd6;
    --sc-old-face: #eceee9;
    --sc-old-line: #a9aca6;
    --sc-old-text: #23272b;
    --sc-old-blue: #1c3f6e;

    --sc-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    color: var(--sc-text);
    font-variant-numeric: tabular-nums;
}

/* ── Rahmen ──────────────────────────────────────────────────────────────── */

.sc-shell {
    background: var(--sc-bg);
    border: 1px solid var(--sc-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .85);
}

.sc-stage {
    position: relative;
    min-height: clamp(430px, 52vh, 560px);
    display: grid;
}

/* Alle Bilder liegen übereinander; nur eines ist sichtbar. */
.sc-scene {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.25rem, 2.6vw, 2rem);
    padding: clamp(1.75rem, 4.2vw, 3.25rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .5s;
}
.sc-scene.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}

/* ── Text im Bild ────────────────────────────────────────────────────────── */

.sc-kicker {
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sc-accent);
}
.sc-head {
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    font-weight: 650;
    line-height: 1.28;
    letter-spacing: -.01em;
    max-width: 26ch;
    margin: .5rem 0 0;
}
.sc-lead {
    font-size: clamp(.95rem, 1.15vw, 1.06rem);
    line-height: 1.78;
    color: var(--sc-muted);
    max-width: 58ch;
    margin: 0;
}
.sc-lead strong { color: var(--sc-text); font-weight: 600; }
.sc-note {
    font-size: .82rem;
    line-height: 1.7;
    color: var(--sc-dim);
    max-width: 56ch;
    margin: 0;
    padding-left: .9rem;
    border-left: 2px solid var(--sc-soft);
}

.sc-top { display: flex; flex-direction: column; }

/* ── Fensterattrappe ─────────────────────────────────────────────────────── */

.sc-win {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--sc-line);
    background: var(--sc-panel);
    min-width: 0;
}
.sc-win__bar {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .9rem;
    font-size: .78rem;
    color: var(--sc-muted);
    background: var(--sc-soft);
    border-bottom: 1px solid var(--sc-line);
}
.sc-win__mark { width: 8px; height: 8px; border-radius: 2px; background: var(--sc-deep); flex: none; }
.sc-win__body { padding: 1.1rem 1.2rem; }

/* Die alte Welt: eckig, grau, Systemschrift. */
.sc-win--old { border-color: var(--sc-old-line); background: var(--sc-old-face); border-radius: 4px; }
.sc-win--old .sc-win__bar {
    background: var(--sc-old-blue);
    color: #e8eef6;
    border-bottom-color: var(--sc-old-line);
    font-weight: 600;
    letter-spacing: .01em;
}
.sc-win--old .sc-win__mark { background: #7fa8d8; border-radius: 1px; }
.sc-win--old .sc-win__body { color: var(--sc-old-text); background: var(--sc-old-bg); }

/* ── Formularzeilen ──────────────────────────────────────────────────────── */

.sc-form { display: grid; gap: .55rem; }
.sc-field {
    display: grid;
    grid-template-columns: minmax(112px, auto) 1fr;
    align-items: center;
    gap: .9rem;
    font-size: .88rem;
}
.sc-field__k { color: var(--sc-dim); }
.sc-win--old .sc-field__k { color: #4c5762; }
.sc-field__v {
    padding: .42rem .65rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--sc-line);
    font-family: var(--sc-mono);
    font-size: .82rem;
    color: var(--sc-text);
    min-height: 2.05em;
}
.sc-win--old .sc-field__v {
    background: #fff;
    border: 1px solid #9aa0a6;
    border-radius: 2px;
    color: #1a1d20;
}
/* Werte laufen ein, statt einfach dazustehen. */
.sc-field__v > span { display: inline-block; opacity: 0; transform: translateY(3px); }
.sc-field.is-set .sc-field__v > span { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.sc-field.is-set .sc-field__v { border-color: var(--sc-deep); }
.sc-win--old .sc-field.is-set .sc-field__v { border-color: var(--sc-old-blue); }

.sc-btn-fake {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    padding: .55rem 1.1rem;
    border-radius: 5px;
    font-size: .86rem;
    font-weight: 600;
    background: var(--sc-deep);
    color: #eef7ff;
    align-self: flex-start;
}
.sc-win--old .sc-btn-fake { border-radius: 2px; background: #dfe1dc; color: #1a1d20; border: 1px solid #8b918c; box-shadow: inset 0 0 0 1px #fff; }
.sc-btn-fake.is-hit { animation: sc-press .45s ease; }
@keyframes sc-press {
    40% { transform: scale(.96); filter: brightness(1.25); }
    100% { transform: none; }
}

/* ── Zwei Systeme mit Flugbahn ───────────────────────────────────────────── */

.sc-flight {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(90px, .55fr) 1fr;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.5rem);
}
.sc-flight__path { position: relative; height: 2px; background: var(--sc-soft); border-radius: 2px; }
.sc-flight__path::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--sc-accent), transparent);
    opacity: 0;
}
.sc-flight.is-flying .sc-flight__path::after { animation: sc-sweep 1.5s ease-in-out; }
@keyframes sc-sweep { 0% { opacity: 0; } 40% { opacity: .8; } 100% { opacity: 0; } }

.sc-parcel {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) scale(.9);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .7rem;
    border-radius: 6px;
    background: var(--sc-panel);
    border: 1px solid var(--sc-deep);
    font-size: .74rem;
    white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
    z-index: 2;
}
.sc-flight.is-flying .sc-parcel { animation: sc-fly 1.5s cubic-bezier(.5, 0, .4, 1) forwards; }
@keyframes sc-fly {
    0%   { left: 0;    opacity: 0; transform: translate(-50%, -50%) scale(.9); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.9); }
}
.sc-parcel__tag {
    font-family: var(--sc-mono);
    font-size: .6rem;
    letter-spacing: .06em;
    padding: .16rem .34rem;
    border-radius: 3px;
    background: var(--sc-deep);
    color: #f2f9ff;
}

.sc-endpoint {
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 1rem 1.05rem;
    background: var(--sc-panel);
    min-width: 0;
}
.sc-endpoint--old { background: var(--sc-old-face); border-color: var(--sc-old-line); border-radius: 4px; }
.sc-endpoint__k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-dim); }
.sc-endpoint--old .sc-endpoint__k { color: #5d666f; }
.sc-endpoint__n { font-size: .95rem; font-weight: 600; margin-top: .3rem; line-height: 1.4; }
.sc-endpoint--old .sc-endpoint__n { color: var(--sc-old-text); }
.sc-endpoint__s { font-size: .78rem; color: var(--sc-dim); margin-top: .25rem; line-height: 1.5; }
.sc-endpoint--old .sc-endpoint__s { color: #5d666f; }

/* ── Invospan: vier Schritte ─────────────────────────────────────────────── */

.sc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
.sc-step {
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 1rem .95rem 1.05rem;
    background: var(--sc-panel);
    opacity: .42;
    transition: opacity .4s ease, border-color .4s ease, transform .4s ease, background .4s ease;
}
.sc-step.is-on { opacity: 1; border-color: var(--sc-deep); transform: translateY(-3px); background: var(--sc-soft); }
.sc-step.is-done { opacity: 1; border-color: rgba(111, 211, 178, .5); }
.sc-step__n { font-family: var(--sc-mono); font-size: .68rem; color: var(--sc-dim); }
.sc-step__t { font-size: .95rem; font-weight: 600; margin-top: .35rem; }
.sc-step__d { font-size: .78rem; line-height: 1.6; color: var(--sc-muted); margin-top: .4rem; min-height: 3.1em; }
.sc-step__r { font-size: .76rem; font-family: var(--sc-mono); color: var(--sc-ok); margin-top: .55rem; min-height: 1.2em; opacity: 0; transition: opacity .35s ease; }
.sc-step.is-done .sc-step__r { opacity: 1; }

/* ── Datei-Karte ─────────────────────────────────────────────────────────── */

.sc-file {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    border-radius: 7px;
    border: 1px solid var(--sc-line);
    background: var(--sc-panel);
    align-self: flex-start;
    max-width: 100%;
}
.sc-file--drop { animation: sc-drop .6s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.sc-file__ext {
    font-family: var(--sc-mono);
    font-size: .62rem;
    letter-spacing: .07em;
    padding: .24rem .42rem;
    border-radius: 3px;
    background: var(--sc-deep);
    color: #f2f9ff;
    flex: none;
}
.sc-file__ext--ok { background: #2f7f68; }
.sc-file__n { font-family: var(--sc-mono); font-size: .82rem; color: var(--sc-text); overflow-wrap: anywhere; }
.sc-file__s { font-size: .74rem; color: var(--sc-dim); }

.sc-open {
    appearance: none;
    background: none;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    color: var(--sc-muted);
    font: inherit;
    font-size: .8rem;
    padding: .42rem .8rem;
    cursor: pointer;
    align-self: flex-start;
    transition: border-color .16s ease, color .16s ease;
}
.sc-open:hover { border-color: var(--sc-deep); color: var(--sc-text); }

/* ── Posteingang ─────────────────────────────────────────────────────────── */

.sc-inbox { border: 1px solid var(--sc-line); border-radius: 8px; overflow: hidden; background: var(--sc-panel); }
.sc-inbox__bar {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .9rem; font-size: .78rem; color: var(--sc-muted);
    background: var(--sc-soft); border-bottom: 1px solid var(--sc-line);
}
.sc-inbox__count { margin-left: auto; font-size: .72rem; color: var(--sc-accent); font-weight: 700; }
.sc-mailrow {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sc-soft);
}
.sc-mailrow:last-child { border-bottom: 0; }
.sc-mailrow--new { animation: sc-drop .5s cubic-bezier(.2, .8, .3, 1) both; background: rgba(156, 206, 240, .07); }
.sc-mailrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.sc-mailrow--old .sc-mailrow__dot { background: transparent; }
.sc-mailrow__from { font-size: .86rem; font-weight: 600; }
.sc-mailrow--old .sc-mailrow__from { color: var(--sc-dim); font-weight: 500; }
.sc-mailrow__sub { font-size: .8rem; color: var(--sc-muted); margin-top: .18rem; }
.sc-mailrow--old .sc-mailrow__sub { color: var(--sc-dim); }
.sc-mailrow__time { font-size: .74rem; color: var(--sc-dim); }

/* ── Ergebnis-Zeilen ─────────────────────────────────────────────────────── */

.sc-result { display: grid; gap: .6rem; }
.sc-result__i {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: .75rem;
    align-items: start;
    font-size: .92rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(6px);
}
.sc-result__i.is-on { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
.sc-result__m {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--sc-ok);
    margin-top: .22rem;
    position: relative;
}
.sc-result__m::after {
    content: ""; position: absolute;
    left: 3px; top: 6px; width: 6px; height: 3px;
    border-left: 2px solid var(--sc-ok); border-bottom: 2px solid var(--sc-ok);
    transform: rotate(-45deg);
}
.sc-result__i--warn .sc-result__m { border-color: var(--sc-warn); }
.sc-result__i--warn .sc-result__m::after { display: none; }
.sc-result__t { color: var(--sc-muted); }
.sc-result__t b { color: var(--sc-text); font-weight: 600; }

/* ── Steuerung ───────────────────────────────────────────────────────────── */

.sc-ctrl {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
    background: var(--sc-panel);
    border-top: 1px solid var(--sc-line);
    flex-wrap: wrap;
}
.sc-play {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--sc-accent); color: #05141c;
    border: 0; border-radius: 7px;
    padding: .55rem 1.05rem;
    font: inherit; font-size: .86rem; font-weight: 650;
    cursor: pointer;
    transition: filter .16s ease, transform .12s ease;
}
.sc-play:hover { filter: brightness(1.08); }
.sc-play:active { transform: translateY(1px); }
.sc-play__i { width: 0; height: 0; border-left: 8px solid #05141c; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sc-play[data-on="1"] .sc-play__i { width: 8px; height: 10px; border: 0; background: #05141c; box-shadow: inset 3px 0 0 var(--sc-accent); }

.sc-nav { display: inline-flex; gap: .4rem; }
.sc-nav button {
    appearance: none; background: none; border: 1px solid var(--sc-line);
    color: var(--sc-muted); border-radius: 6px;
    width: 34px; height: 34px; cursor: pointer; font-size: 1rem; line-height: 1;
    transition: border-color .16s ease, color .16s ease;
}
.sc-nav button:hover:not(:disabled) { border-color: var(--sc-deep); color: var(--sc-text); }
.sc-nav button:disabled { opacity: .35; cursor: default; }

/* Kapitelleiste */
.sc-rail { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.sc-chapter {
    appearance: none; background: none; border: 0; cursor: pointer;
    padding: .3rem .1rem .5rem; font: inherit; font-size: .74rem;
    color: var(--sc-dim); position: relative; min-width: 0;
    transition: color .2s ease;
}
.sc-chapter + .sc-chapter { margin-left: 1.1rem; }
.sc-chapter::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--sc-soft); border-radius: 2px;
}
.sc-chapter__fill {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--sc-accent); border-radius: 2px; z-index: 1;
}
.sc-chapter:hover { color: var(--sc-muted); }
.sc-chapter.is-on { color: var(--sc-text); }
.sc-chapter.is-past { color: var(--sc-muted); }
.sc-chapter.is-past .sc-chapter__fill { width: 100%; background: var(--sc-deep); }

/* ── Beleg-Fenster ───────────────────────────────────────────────────────── */

.sc-ov {
    position: fixed; inset: 0; z-index: 200; display: none;
    background: rgba(2, 10, 15, .84); backdrop-filter: blur(4px);
    padding: 4vh 3vw; overflow: auto;
}
.sc-ov.is-open { display: flex; animation: sc-fade .18s ease both; }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
.sc-ov__win {
    margin: auto; width: min(880px, 100%);
    background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 12px;
    display: flex; flex-direction: column; max-height: 92vh; overflow: hidden;
    animation: sc-rise .24s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes sc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sc-ov__bar { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; background: var(--sc-panel); border-bottom: 1px solid var(--sc-line); }
.sc-ov__name { font-family: var(--sc-mono); font-size: .82rem; }
.sc-ov__x { margin-left: auto; background: none; border: 0; color: var(--sc-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.sc-ov__x:hover { color: var(--sc-text); }
.sc-ov__tabs { display: flex; padding: 0 1.1rem; background: var(--sc-panel); border-bottom: 1px solid var(--sc-line); }
.sc-ov__tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    padding: .65rem .1rem; margin-right: 1.5rem; font: inherit; font-size: .84rem;
    color: var(--sc-muted); cursor: pointer;
}
.sc-ov__tab[aria-selected="true"] { color: var(--sc-accent); border-bottom-color: var(--sc-accent); }
.sc-ov__body { overflow: auto; padding: 1.4rem 1.5rem 1.7rem; }

.sc-doc__top { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; margin-bottom: 1.4rem; }
.sc-doc__p { font-size: .86rem; line-height: 1.7; color: var(--sc-muted); }
.sc-doc__p b { display: block; color: var(--sc-text); font-weight: 600; margin-bottom: .2rem; }
.sc-doc__no { text-align: right; font-size: .86rem; line-height: 1.8; color: var(--sc-muted); }
.sc-doc__no b { color: var(--sc-text); }
.sc-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sc-tbl th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-dim); font-weight: 600; padding: .55rem .6rem; border-bottom: 1px solid var(--sc-line); }
.sc-tbl td { padding: .6rem .6rem; border-bottom: 1px solid var(--sc-soft); color: var(--sc-muted); }
.sc-tbl .n { text-align: right; font-family: var(--sc-mono); font-size: .82rem; color: var(--sc-text); }
.sc-sum { margin-left: auto; margin-top: 1.1rem; width: min(330px, 100%); font-size: .88rem; }
.sc-sum div { display: flex; justify-content: space-between; padding: .35rem 0; color: var(--sc-muted); }
.sc-sum div.t { border-top: 1px solid var(--sc-line); margin-top: .35rem; padding-top: .6rem; color: var(--sc-text); font-weight: 650; }
.sc-sum span:last-child { font-family: var(--sc-mono); }

.sc-xml { margin: 0; font-family: var(--sc-mono); font-size: .76rem; line-height: 1.75; color: var(--sc-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-xml .t { color: var(--sc-accent); }
.sc-xml .a { color: #8fbfa8; }
.sc-xml .v { color: #d9c48a; }
.sc-xml .x { color: var(--sc-text); }

/* ── Enger ───────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-flight { grid-template-columns: 1fr; gap: .9rem; }
    .sc-flight__path { display: none; }
    .sc-parcel { display: none; }
    .sc-rail { width: 100%; margin-left: 0; order: 3; }
    .sc-chapter { flex: 1 1 auto; }
    .sc-chapter + .sc-chapter { margin-left: .5rem; }
    .sc-stage { min-height: 500px; }
}
@media (max-width: 560px) {
    .sc-steps { grid-template-columns: 1fr; }
    .sc-step__d { min-height: 0; }
    .sc-field { grid-template-columns: 1fr; gap: .28rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sc *, .sc *::before, .sc *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERWEITERUNG · 2026-08-18b
   1. Echte Überblendung: zwei Ebenen, die sich kreuzen — vorher wurde der
      Inhalt derselben Ebene ausgetauscht, es gab also gar keinen Übergang.
   2. Der Invospan-Schritt zerfällt in vier eigene Bilder mit eigener Bildsprache.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Überblendung ────────────────────────────────────────────────────────── */

.sc-scene {
    /* setzt die knappere Fassung von oben außer Kraft */
    transition: opacity .62s cubic-bezier(.4, 0, .2, 1),
                transform .62s cubic-bezier(.22, .7, .28, 1),
                filter .62s ease,
                visibility 0s linear .62s;
    will-change: opacity, transform;
    pointer-events: none;
}
.sc-scene.is-on {
    pointer-events: auto;
    transition: opacity .62s cubic-bezier(.4, 0, .2, 1),
                transform .62s cubic-bezier(.22, .7, .28, 1),
                filter .62s ease,
                visibility 0s;
}

/* Richtung: Vorwärts kommt von rechts herein, das alte Bild geht nach links. */
.sc-scene.from-next { transform: translateX(34px) scale(.985); filter: blur(2px); }
.sc-scene.from-prev { transform: translateX(-34px) scale(.985); filter: blur(2px); }
.sc-scene.to-prev   { transform: translateX(-34px) scale(.985); filter: blur(2px); opacity: 0; }
.sc-scene.to-next   { transform: translateX(34px) scale(.985); filter: blur(2px); opacity: 0; }
.sc-scene.is-on.from-next,
.sc-scene.is-on.from-prev { transform: none; filter: none; }

/* Innerhalb eines Kapitels wird nur weich geblendet, nicht geschoben. */
.sc-scene.from-act { transform: translateY(10px); filter: blur(1.5px); }
.sc-scene.to-act   { transform: translateY(-8px); filter: blur(1.5px); opacity: 0; }
.sc-scene.is-on.from-act { transform: none; filter: none; }

/* ── Kapitelleiste mit Gruppe ────────────────────────────────────────────── */

.sc-group {
    display: flex;
    align-items: flex-end;
    gap: .9rem;
    padding: .1rem .75rem .05rem;
    border-radius: 7px;
    background: rgba(156, 206, 240, .07);
    border: 1px solid rgba(156, 206, 240, .16);
    position: relative;
}
.sc-group__k {
    position: absolute;
    top: -.62rem;
    left: .7rem;
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sc-accent);
    background: var(--sc-panel);
    padding: 0 .3rem;
}
.sc-group .sc-chapter + .sc-chapter { margin-left: 0; }

/* ── Bild: Lesen ─────────────────────────────────────────────────────────── */

.sc-read { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 1.4rem; align-items: start; }

.sc-raw {
    border: 1px solid var(--sc-line);
    border-radius: 7px;
    background: #04141c;
    padding: .7rem 0;
    overflow: hidden;
}
.sc-rawrow {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: .6rem;
    padding: .16rem 1rem .16rem 0;
    font-family: var(--sc-mono);
    font-size: .72rem;
    line-height: 1.65;
    color: #4e7285;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .35s ease, background .35s ease, opacity .35s ease;
}
.sc-rawrow__n { text-align: right; color: #2f5266; }
.sc-rawrow__t { overflow: hidden; text-overflow: ellipsis; }
.sc-rawrow.is-head { color: var(--sc-accent); background: rgba(156, 206, 240, .09); }
.sc-rawrow.is-data { color: var(--sc-text); }
.sc-rawrow.is-out  { color: #33566a; opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }

.sc-detect { display: grid; gap: .7rem; }
.sc-detect__i {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: baseline;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--sc-soft);
    font-size: .82rem;
    opacity: 0;
    transform: translateY(5px);
}
.sc-detect__i.is-on { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
.sc-detect__k { color: var(--sc-dim); }
.sc-detect__v { font-family: var(--sc-mono); font-size: .8rem; color: var(--sc-text); }

/* ── Bild: Zuordnen ──────────────────────────────────────────────────────── */

.sc-map {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(52px, 9vw, 118px) minmax(0, 1fr);
    gap: 0;
    align-items: start;
}
.sc-map__col { display: grid; gap: .42rem; min-width: 0; }
.sc-map__k {
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sc-dim);
    margin-bottom: .3rem;
}
.sc-map__i {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .48rem .7rem;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    background: var(--sc-panel);
    font-size: .82rem;
    color: var(--sc-muted);
    transition: border-color .35s ease, color .35s ease, background .35s ease, transform .35s ease;
    min-width: 0;
}
.sc-map__i span {
    margin-left: auto;
    font-family: var(--sc-mono);
    font-size: .66rem;
    color: var(--sc-dim);
    white-space: nowrap;
}
.sc-map__col--src .sc-map__i { font-family: var(--sc-mono); font-size: .76rem; }
.sc-map__i.is-lit {
    border-color: var(--sc-deep);
    color: var(--sc-text);
    background: var(--sc-soft);
    transform: translateX(0);
}
.sc-map__col--src .sc-map__i.is-lit { transform: translateX(3px); }
.sc-map__col--dst .sc-map__i.is-lit { transform: translateX(-3px); }

.sc-map__wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sc-map__wire path {
    fill: none;
    stroke: var(--sc-deep);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: .9;
}
.sc-map__wire path.is-drawn { animation: sc-draw .55s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }

.sc-mapnote {
    font-size: .8rem;
    line-height: 1.7;
    color: var(--sc-dim);
    max-width: 62ch;
    opacity: 0;
    transition: opacity .5s ease;
}
.sc-mapnote.is-on { opacity: 1; }

/* ── Bild: Prüfen ────────────────────────────────────────────────────────── */

.sc-rules { display: grid; gap: .5rem; }
.sc-rule {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: .8rem;
    align-items: center;
    padding: .62rem .8rem;
    border: 1px solid var(--sc-soft);
    border-radius: 6px;
    font-size: .84rem;
    color: var(--sc-dim);
    opacity: .45;
    transition: opacity .35s ease, border-color .35s ease, color .35s ease;
}
.sc-rule.is-on { opacity: 1; border-color: var(--sc-line); color: var(--sc-muted); }
.sc-rule.is-ok { opacity: 1; border-color: rgba(111, 211, 178, .38); color: var(--sc-text); }
.sc-rule__id { font-family: var(--sc-mono); font-size: .7rem; color: var(--sc-dim); white-space: nowrap; }
.sc-rule.is-ok .sc-rule__id { color: var(--sc-ok); }

.sc-tick { width: 16px; height: 16px; position: relative; }
.sc-tick::before {
    content: "";
    position: absolute; inset: 0;
    border: 2px solid var(--sc-line);
    border-radius: 50%;
    transition: border-color .3s ease;
}
.sc-rule.is-ok .sc-tick::before { border-color: var(--sc-ok); }
.sc-tick::after {
    content: "";
    position: absolute;
    left: 3px; top: 6px;
    width: 6px; height: 3px;
    border-left: 2px solid var(--sc-ok);
    border-bottom: 2px solid var(--sc-ok);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.2, 1.4, .4, 1);
}
.sc-rule.is-ok .sc-tick::after { transform: rotate(-45deg) scale(1); }

.sc-verdict {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    font-size: .9rem;
    color: var(--sc-dim);
    opacity: 0;
    transition: opacity .5s ease;
}
.sc-verdict.is-on { opacity: 1; }
.sc-verdict b { color: var(--sc-ok); font-size: 1.15rem; font-weight: 700; }

/* ── Bild: Erzeugen ──────────────────────────────────────────────────────── */

.sc-gen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.4rem; align-items: start; }
.sc-code {
    border: 1px solid var(--sc-line);
    border-radius: 7px;
    background: #04141c;
    padding: .85rem 1rem;
    font-family: var(--sc-mono);
    font-size: .72rem;
    line-height: 1.75;
    overflow: hidden;
    min-height: 12.5rem;
}
.sc-code__l {
    opacity: 0;
    transform: translateY(4px);
    color: var(--sc-muted);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-code__l.is-on { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.sc-code__l .t { color: var(--sc-accent); }
.sc-code__l .v { color: #d9c48a; }
.sc-code__l .c { color: #3f6376; }

.sc-out { display: grid; gap: .9rem; }

@media (max-width: 860px) {
    .sc-read, .sc-gen { grid-template-columns: 1fr; }
    .sc-map { grid-template-columns: 1fr; gap: 1rem; }
    .sc-map__wire { display: none; }
    .sc-group { width: 100%; flex-wrap: wrap; }
}