/* ==========================================================================
   /pv-asset-management — the three-stage illustration from
   corporate-identity/collateral/SemanticWorks_Workflow_3-Stufen.html.

   Changed from the standalone file: no font-face and no reset (style.css
   brings both), tokens from style.css, and every class carries `wf-` so
   nothing reaches the form or the rest of the site.
   ========================================================================== */

.wf {
    --navy: var(--color-navy);
    --navy-50: var(--color-navy-50);
    --navy-100: var(--color-navy-100);
    --blue: var(--color-blue);
    --blue-50: var(--color-blue-50);
    --teal: var(--color-teal);
    --teal-600: var(--color-teal-600);
    --teal-50: var(--color-teal-50);
    --teal-100: var(--color-teal-100);
    --amber: var(--color-accent-warm);
    --amber-l: var(--color-accent-warm-light);
    --n50: var(--color-neutral-50);
    --n200: var(--color-neutral-200);
    --n300: var(--color-neutral-300);
    --n500: var(--color-neutral-500);
    --n600: var(--color-neutral-600);
    --n900: var(--color-neutral-900);
    --r: 8px;
    /* Width and side padding come from .container, so the illustration
       lines up with the header's logo. */
    padding-block: 32px 48px;
    line-height: 1.55;
}
.wf p, .wf li { hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Head ---------- */
.wf-head { margin-bottom: 28px; }
.wf-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 10px; }
.wf h1 { font-size: 2.1rem; font-weight: 900; line-height: 1.15; color: var(--navy); letter-spacing: -.01em; }
.wf-lead { color: var(--n600); margin-top: 8px; max-width: 64ch; }

/* ---------- Pause and tempo ----------
   Sticks below the site header inside .wf-anim, so it leaves with the last
   stage. The strip is opaque and takes its own room in the flow. */
.wf-ctl-strip {
    position: sticky; top: var(--header-h); z-index: 10;
    padding-block: 4px; margin-bottom: 10px;
    background: transparent; pointer-events: none;
}
.wf-ctl-strip > * { pointer-events: auto; }
/* A short (landscape) viewport cannot spare the room: the strip scrolls away. */
@media (max-height: 500px) { .wf-ctl-strip { position: static; } }
.wf-ctl {
    display: flex; align-items: center; gap: 4px; font-size: .875rem;
    width: fit-content; max-width: 100%;
    padding: 6px 8px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    border: 1px solid var(--n200); border-radius: 999px;
}
.wf-ctl[hidden] { display: none; }
.wf-ctl-strip:has(.wf-ctl[hidden]) { display: none; }
.wf-ctl button {
    font: inherit; font-weight: 600; color: var(--n600); background: #fff;
    border: 1px solid var(--n200); border-radius: 999px; padding: 4px 11px;
    min-height: 32px; cursor: pointer; line-height: 1.3;
}
.wf-ctl button:hover { border-color: var(--n300); color: var(--navy); }
.wf-ctl button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wf-ctl button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.wf-ctl-pause { margin-right: 8px; min-width: 6.2em; }
/* Drawn, not a glyph: ❚❚ falls back to a square on some phones. */
.wf-ctl-pause::before {
    content: ""; display: inline-block; width: 8px; height: 10px; margin-right: 6px;
    border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box;
}
.wf-ctl-pause[data-state="paused"]::before {
    width: 0; height: 0; border-style: solid; border-color: transparent currentColor;
    border-width: 5px 0 5px 8px;
}
.wf-ctl-lab { color: var(--n500); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; margin-right: 2px; }
@media (pointer: coarse) {
    .wf-ctl { gap: 6px; }
    .wf-ctl button { min-height: 44px; min-width: 44px; }
}
.wf.paused * { animation-play-state: paused !important; }
@media print { .wf-ctl-strip { display: none; } }

/* ---------- Stages ---------- */
.wf-stage { background: #fff; border: 1px solid var(--n200); border-radius: var(--r); margin-bottom: 22px; overflow: hidden; }
.wf-stage-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--n200); }
.wf-stage-num { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.wf .wf-stage-title { font-size: 1.2rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin: 0; }
.wf-stage-sub { font-size: .88rem; color: var(--n600); margin-top: 1px; }
.wf-stage-body { padding: 20px; }

.wf-sub-t { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--n500); }
.wf-card { background: var(--n50); border: 1px solid var(--n200); border-radius: var(--r); padding: 14px 16px; }
.wf .wf-card h3 { font-size: .98rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin: 4px 0 6px; }
.wf-card p { font-size: .86rem; color: var(--n600); }
.wf-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.wf-tag.navy { background: var(--navy-50); color: var(--navy); }
.wf-tag.blue { background: var(--blue-50); color: var(--blue); }
.wf-tag.teal { background: var(--teal-50); color: var(--teal-600); }

/* Grid items may shrink below their longest token — file names, balancing
   group codes and German compounds would otherwise widen a column past a
   narrow phone and be clipped by the stage. */
.wf-s1 > *, .wf-s2 > *, .wf-s3 > *, .wf-record > *, .wf-fr > * { min-width: 0; }
.wf-doc-line, .wf-fv, .wf-step, .wf-via, .wf-val, .wf-card p, .wf-card h3, .wf-ex li, .wf-out { overflow-wrap: anywhere; }

/* ---------- Stage 1: recognition ---------- */
.wf-s1 { display: grid; grid-template-columns: 1fr 200px 1.25fr; gap: 18px; align-items: start; }
/* Document and recognition centre against the assignments, the only column
   that needs the full height. */
.wf-s1 > div:first-child, .wf-s1 > .wf-engine { align-self: center; }
.wf-doc {
    margin-top: 8px; background: #fff; border: 1px solid var(--n300); border-radius: var(--r);
    box-shadow: 0 2px 10px rgba(0,0,32,.07); padding: 12px 14px;
    /* Room for six lines — the maintenance report carries that many. */
    min-height: 202px;
    transition: opacity .35s ease, transform .35s ease;
}
.wf-doc.out { opacity: 0; transform: translateX(24px); }
.wf-doc-name { font-size: .86rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-doc-line { font-size: .78rem; color: var(--n600); padding: 2px 0; border-bottom: 1px dashed var(--n200); }
.wf-doc-line b { color: var(--n900); font-weight: 600; }
.wf-doc-line.hl { background: var(--teal-50); border-radius: 3px; padding-left: 4px; }

.wf-engine { text-align: center; position: relative; padding-top: 8px; }
.wf-tetra { width: 132px; height: 132px; margin: 0 auto; }
.wf-face { transition: fill .45s ease; }
.wf-engine-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
.wf-scan {
    position: absolute; left: var(--scan-x, 50%); top: 8px; transform: translateX(-50%);
    width: var(--scan-w, 150px); height: 2px; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.wf-engine.scanning .wf-scan { animation: wf-scan 1.1s ease-in-out; }
@keyframes wf-scan { 0% { opacity: 0; top: 8px; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: var(--scan-end, 132px); } }
.wf-engine-note { font-size: .76rem; color: var(--n600); margin-top: 8px; line-height: 1.4; }
/* Human in the loop: while the person assigns, a box covers the recognition
   column — the machine pauses, the decision is made in-house. The arrow
   points at the assignments. */
.wf-human {
    position: absolute; inset: -6px -4px; z-index: 2; padding: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 2px solid var(--amber); border-radius: var(--r);
    box-shadow: 0 8px 28px rgba(184,96,15,.28);
    text-align: center; pointer-events: none; opacity: 0; transform: scale(.9);
    transition: opacity .3s ease, transform .3s ease;
}
.wf-human.on { opacity: 1; transform: none; }
.wf-human::after {
    content: ""; position: absolute; right: -11px; top: 50%; margin-top: -9px;
    border: 9px solid transparent; border-right: 0; border-left: 10px solid var(--amber);
}
.wf-human svg { width: 40px; height: 40px; margin: 0 0 8px; fill: var(--amber); }
.wf-h-eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.wf-h-title { font-size: 1.2rem; font-weight: 800; color: var(--navy); line-height: 1.2; margin-top: 2px; }

.wf-res { display: flex; flex-direction: column; gap: 10px; }
.wf-res .wf-card { opacity: .45; transition: opacity .35s ease, border-color .35s ease, background-color .35s ease; }
.wf-res .wf-card.on { opacity: 1; }
/* Each assignment carries the colour of the tetrahedron face it fills,
   see-through; amber is the one case the machine does not decide. */
.wf-res .wf-cls.on { border-color: var(--navy); background: rgba(0,0,128,.05); }
.wf-res .wf-plant.on { border-color: var(--blue); background: rgba(37,109,189,.07); }
.wf-res .wf-party.on { border-color: var(--teal); background: rgba(58,176,162,.09); }
.wf-res .wf-plant.warned { border-color: var(--amber); background: rgba(184,96,15,.08); }
.wf-hand {
    display: inline-block; margin-left: 8px; font-size: .72rem; font-weight: 700; vertical-align: 2px;
    padding: 2px 9px; border-radius: 999px; background: var(--amber-l); color: var(--amber);
    border: 1px solid var(--amber); animation: wf-pulse 1s ease-in-out infinite;
}
@keyframes wf-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }
.wf-val { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 2px 0 4px; }
/* Room reserved for two lines or two rows of chips, in em so it holds at
   any width — otherwise stage 1 grows and shrinks with every document. */
.wf-via { font-size: .78rem; color: var(--n500); line-height: 1.4; min-height: 2.8em; }
.wf-via b { color: var(--n900); font-weight: 600; }
.wf-fields { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 5px; margin-top: 6px; min-height: 3.4em; }
.wf-fld { font-size: .74rem; background: #fff; border: 1px solid var(--n200); border-radius: 4px; padding: 2px 7px; color: var(--n600); }
.wf-fld b { color: var(--navy); font-weight: 700; }
.wf-warn { color: var(--amber); font-weight: 600; }

/* ---------- Stage 2: follow-up actions ---------- */
.wf-s2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wf-s2 .wf-wide { grid-column: span 2; }
.wf-record { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; margin-top: 10px; align-items: start; }
.wf-src {
    margin-top: 6px; background: #fff; border: 1px solid var(--n300); border-radius: var(--r);
    padding: 12px 14px; box-shadow: 0 2px 10px rgba(0,0,32,.07); min-height: 200px;
    transition: opacity .35s ease;
}
.wf-src.out { opacity: 0; }
.wf-src .wf-doc-line { transition: background .3s ease; }
.wf-src .wf-doc-line.act { background: var(--teal-100); border-radius: 3px; padding-left: 4px; }
.wf-schema { background: #fff; border: 1px solid var(--n200); border-radius: var(--r); padding: 10px 14px; }
.wf-sh {
    font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
    margin: 4px 0; padding-bottom: 5px; border-bottom: 2px solid var(--navy-100);
}
.wf-sh + .wf-fr ~ .wf-sh { margin-top: 10px; }
.wf-fr { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--n200); font-size: .8rem; }
.wf-fl { color: var(--n600); }
.wf-fv { color: var(--n300); font-weight: 600; min-height: 1.2em; transition: color .3s ease; }
.wf-fv.set { color: var(--navy); }
.wf-fv.flash { background: var(--teal-100); border-radius: 3px; padding: 0 4px; }
.wf-link { font-size: .64rem; color: var(--teal-600); font-weight: 600; margin-left: 6px; opacity: 0; transition: opacity .3s ease; }
.wf-fv.set .wf-link { opacity: 1; }
.wf-fill { font-size: .76rem; color: var(--n600); margin-top: 8px; min-height: 1.55em; }
.wf-fill b { color: var(--navy); }
.wf-bar { height: 8px; background: var(--n200); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.wf-bar i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 4px; transition: width 1.2s ease; }
.wf-bar-l { font-size: .76rem; color: var(--n600); }

.wf-flow { display: flex; flex-direction: column; gap: 6px; }
.wf-step { font-size: .8rem; background: #fff; border: 1px solid var(--n200); border-left: 3px solid var(--navy); border-radius: 5px; padding: 6px 10px; }
.wf-step.t { border-left-color: var(--teal); background: var(--teal-50); }
.wf-lab { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n500); display: block; }
.wf-arrow { text-align: center; color: var(--n300); font-size: .8rem; line-height: .6; }
.wf-kind {
    font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px;
    background: var(--navy-50); color: var(--navy);
}
.wf-kind.ext { background: var(--blue-50); color: var(--blue); }

/* Sequences: steps light up one after another, the result last. Only
   opacity changes, never layout. The dimming applies once the script marks
   the container, so without JS or with reduced motion all is visible. */
.seq-run .seq-item { transition: opacity .4s ease, box-shadow .4s ease; }
.seq-run .seq-item:not(.lit) { opacity: .25; }
.seq-run .wf-step.lit.now { box-shadow: 0 0 0 3px var(--teal-100); }
.seq-run li.lit.now { color: var(--navy); }

/* Cycles: all slides share one grid cell, so the tallest sets the height. */
.wf-cycle { display: grid; margin-top: 8px; }
.wf-cycle > .wf-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.wf-cycle > .wf-slide.cur { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.wf-dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.wf-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--n200); transition: background .3s ease; }
.wf-dots i.cur { background: var(--teal); }

/* ---------- Stage 3: automation ---------- */
.wf-s3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.wf-s3 .wf-big { grid-row: span 2; }
/* The last card fills the row beside the worked examples' column end. */
.wf-s3 .wf-last { grid-column: 2 / span 2; }
.wf-ex { background: #fff; border: 1px solid var(--n200); border-radius: 6px; padding: 10px 12px; }
.wf-ex-t { font-size: .86rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.wf-ex ol { padding-left: 18px; font-size: .8rem; color: var(--n600); }
.wf-ex li { margin-bottom: 2px; }
.wf-out { margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--teal-600); background: var(--teal-50); border-radius: 4px; padding: 5px 8px; }
.wf-out.amb { color: var(--amber); background: var(--amber-l); }
.wf-mini { font-size: .8rem; color: var(--n600); margin-top: 6px; }
.wf-mini b { color: var(--navy); }

/* ---------- Principle ---------- */
.wf-foot { background: var(--navy); color: #fff; border-radius: var(--r); padding: 22px 24px; }
.wf-foot p { font-size: 1rem; font-weight: 600; max-width: 70ch; color: #fff; }
.wf-foot small { display: block; font-weight: 400; color: var(--teal-100); font-size: .86rem; margin-top: 4px; }

@media (max-width: 900px) {
    /* On a phone stage 1 must fit one screen: the recognition lies sideways
       (tetrahedron left, caption right), padding and type one step smaller. */
    .wf { padding-block: 24px 40px; }
    .wf h1 { font-size: 1.7rem; }
    .wf-stage-body { padding: 12px; }
    .wf-ctl { white-space: nowrap; padding: 4px 6px; }
    .wf-ctl button { padding: 3px 9px; }
    .wf-ctl-pause { min-width: 5.6em; margin-right: 4px; }
    .wf-s1 { grid-template-columns: 1fr; gap: 12px; }
    .wf-engine {
        display: grid; grid-template-columns: 76px 1fr; align-items: center;
        gap: 2px 12px; text-align: left; padding-top: 0;
        --scan-x: 38px; --scan-w: 80px; --scan-end: 76px;
    }
    .wf-engine .wf-tetra { width: 76px; height: 76px; grid-row: 1 / 3; margin: 0; }
    .wf-engine-label { margin-top: 0; }
    .wf-engine-note { margin-top: 0; font-size: .72rem; }
    /* Across the recognition row, arrow pointing down to the assignments. */
    .wf-human { flex-direction: row; gap: 10px; padding: 8px 12px; text-align: left; }
    .wf-h-title { font-size: 1.02rem; }
    .wf-human svg { margin: 0; width: 26px; height: 26px; flex: none; }
    .wf-human::after {
        right: auto; top: auto; left: 50%; bottom: -11px; margin: 0 0 0 -9px;
        border: 9px solid transparent; border-bottom: 0; border-top: 10px solid var(--amber);
    }
    .wf-doc { min-height: 184px; padding: 10px 12px; }
    .wf-doc-name { margin-bottom: 6px; }
    .wf-doc-line { padding: 1px 0; }
    .wf-res { gap: 8px; }
    .wf-card { padding: 9px 11px; }
    .wf-sub-t { font-size: .6rem; letter-spacing: .06em; }
    .wf-fld { font-size: .68rem; padding: 1px 6px; }
    .wf-res .wf-card > .wf-tag { margin-right: 4px; }
    /* The reserved room must suffice for every document, or the stage jumps. */
    .wf-val { font-size: .84rem; line-height: 1.25; margin: 1px 0 3px; min-height: 2.6em; }
    .wf-stage-num { width: 28px; height: 28px; font-size: .85rem; }
    .wf .wf-stage-title { font-size: .94rem; line-height: 1.25; }
    .wf-stage-sub { font-size: .78rem; }
    .wf-stage-head { gap: 10px; padding: 12px 14px; }
    .wf-s2 { grid-template-columns: 1fr; }
    .wf-s2 .wf-wide { grid-column: auto; }
    /* Source document above the asset file — side by side it ran off the edge. */
    .wf-record { grid-template-columns: 1fr; gap: 12px; }
    .wf-s3 { grid-template-columns: 1fr; }
    .wf-s3 .wf-big { grid-row: auto; }
    .wf-s3 .wf-last { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .wf *, .wf-ctl { animation: none !important; transition: none !important; }
}

/* ---------- Demo numbers and FAQ ---------- */
.wf-demo, .wf-faq { margin: 3rem auto; max-width: 52rem; }
.wf-demo-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.wf-demo-figures li { background: var(--bg-surface-sunken); border-radius: 8px; padding: 1rem; }
.wf-demo-figures strong { display: block; font-size: 1.75rem; color: var(--color-navy-500); }
.wf-faq details { border-bottom: 1px solid var(--border-subtle); padding: .9rem 0; }
.wf-faq summary { cursor: pointer; font-weight: 700; }
.wf-faq summary:focus-visible { outline: 2px solid var(--color-navy-500); outline-offset: 2px; }
.wf-faq details p { margin: .6rem 0 0; }
.wf-next-step { margin: 0 0 1.25rem; font-weight: 600; }