/* ==========================================================================
   /software/ – Individuelle Software (page-specific, loaded after site.css)
   Sections: 1 Hero (stage + Vorgänge app)  2 Ausgangslage (merge diagram)
             3 Typische Anwendungen (sheet)  4 Klein anfangen (stage, phases)
             5 Kein Lastenheft (input cards)
   Only the breakpoints from DESIGN-SYSTEM.md §3 are used.
   ========================================================================== */

/* Page tokens: glows, rings and textures derived from the brand constants
   (not scoped), so they follow the palette in site.css. */
:root {
  --sw-glow: color-mix(in srgb, var(--brand-blue) 32%, transparent);
  --sw-glow-soft: color-mix(in srgb, var(--brand-blue) 9%, transparent);
  --sw-ring-glow: color-mix(in srgb, var(--brand-blue) 50%, transparent);
  --sw-dot: color-mix(in srgb, var(--brand-navy) 12%, transparent);
  --sw-shade: color-mix(in srgb, var(--brand-navy) 7%, transparent);
}

/* From site.css: .chip-muted (neutral status), .app/.app-* window parts,
   stage glow presets (.sw-hero, .sw-grow-stage), .assurance, .feature-grid. */

/* 1 · Hero ---------------------------------------------------------------- */
.sw-hero-head { display: grid; gap: 1.6rem; }
.sw-hero-title .display-sm { max-width: 21ch; margin-top: 1.2rem; }
.sw-hero-aside .btn-row { margin-top: 1.7rem; }
.sw-hero-aside .assurance { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

.sw-hero-visual { position: relative; margin-top: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }
.sw-hero-visual::before {
  content: ""; position: absolute; inset: 10% 8% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 45%, var(--sw-glow), transparent 72%);
}

/* Vorgänge app: icon rail · list with filters · detail pane */
.sw-app-body { display: grid; grid-template-columns: 60px minmax(0, 1fr) 360px; }
.sw-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-right: 1px solid var(--line); background: var(--surface-2); }
.sw-rail .app-ws-mark { margin-bottom: 8px; }
.sw-rail-i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--fg-3); }
.sw-rail-i .i { width: 17px; height: 17px; }
.sw-rail-i.is-active { color: var(--accent-text); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px var(--sw-shade); }
.sw-rail-end { margin-top: auto; }

.sw-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 14px; }
.sw-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sw-count { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0; vertical-align: 3px; color: var(--fg-2); background: var(--surface-3); }
.sw-tools { display: flex; align-items: center; gap: 8px; }
.sw-search { display: inline-flex; align-items: center; gap: 7px; min-width: 190px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--fg-3); white-space: nowrap; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-search .i { width: 14px; height: 14px; }

.sw-filters { display: flex; align-items: center; gap: 6px; }
.sw-filter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--fg-2); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-filter b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--fg-3); }
.sw-filter.is-active { color: var(--surface); background: var(--fg); box-shadow: none; }
.sw-filter.is-active b { color: var(--surface-3); }
.sw-sort { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.sw-sort .i { width: 12px; height: 12px; }

.sw-table { border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; }
.sw-tr { display: grid; grid-template-columns: 64px minmax(0, 1fr) 70px 56px 104px; align-items: center; gap: 10px; padding: 9px 12px; }
.sw-tr + .sw-tr { border-top: 1px solid var(--line); }
.sw-th { padding-block: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); background: var(--surface-2); }
.sw-c-id, .sw-c-due { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.sw-th .sw-c-id, .sw-th .sw-c-due { font-size: 11px; }
.sw-c-t { display: flex; flex-direction: column; min-width: 0; font-weight: 550; line-height: 1.3; white-space: nowrap; }
.sw-c-t small { font-size: 11.5px; font-weight: 400; color: var(--fg-3); }
.sw-th .sw-c-t { font-weight: 400; }
.sw-c-st { justify-self: start; }
.sw-tr.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--brand-blue); }
.sw-tr.is-selected .sw-c-id { color: var(--accent-text); }

.sw-av { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sw-av-2 { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.sw-av-3 { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.sw-av-4 { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }

.sw-list-foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.sw-pager { display: inline-flex; gap: 5px; }
.sw-pager i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-pager i:first-child { background: var(--brand-blue); box-shadow: none; }

.sw-detail { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border-left: 1px solid var(--line); background: var(--surface-2); }
.sw-d-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sw-d-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.sw-d-title { margin-top: -2px; font-size: 18px; font-weight: 620; letter-spacing: -.02em; line-height: 1.2; }
.sw-d-meta { margin-top: -8px; font-size: 12px; color: var(--fg-3); }

.sw-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 0 2px; }
.sw-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; line-height: 1.2; color: var(--fg-3); white-space: nowrap; }
.sw-steps li + li::before { content: ""; position: absolute; top: 5px; left: -50%; right: 50%; height: 2px; border-radius: 1px; background: var(--line-2); }
.sw-steps li.is-done::before, .sw-steps li.is-now::before { background: var(--brand-blue); }
.sw-dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.sw-steps .is-done .sw-dot { background: var(--brand-blue); box-shadow: none; }
.sw-steps .is-done { color: var(--fg-2); }
.sw-steps .is-now { color: var(--fg); font-weight: 600; }
.sw-steps .is-now .sw-dot { background: var(--surface); box-shadow: inset 0 0 0 3px var(--warn), 0 0 0 4px var(--warn-bg); }

.sw-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.sw-fields dt { font-size: 11px; color: var(--fg-3); }
.sw-fields dd { display: flex; align-items: center; gap: 6px; margin: 1px 0 0; font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.sw-fields .sw-av { width: 20px; height: 20px; }
.sw-file { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); }
.sw-file .i { width: 13px; height: 13px; }

.sw-log-h { margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.sw-log ul { list-style: none; display: grid; gap: 8px; }
.sw-log li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; }
.sw-log li:not(:last-child)::after { content: ""; position: absolute; left: 11.5px; top: 25px; height: 7px; width: 1px; background: var(--line-2); }
.sw-log-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--fg-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-log-ic .i { width: 13px; height: 13px; }
.sw-log .is-now .sw-log-ic { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.sw-log-t { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 550; line-height: 1.3; white-space: nowrap; }
.sw-log-t small { font-size: 11px; font-weight: 400; color: var(--fg-3); }

.sw-d-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.sw-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 8px; font-size: 12.5px; font-weight: 550; color: var(--fg-2); white-space: nowrap; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-btn .i { width: 13px; height: 13px; stroke-width: 2.2; }
/* The primary action reuses .app-new from site.css (same fill, no copy). */
.sw-d-actions .app-new { flex: 1; justify-content: center; height: 32px; }

/* 2 · Ausgangslage: many sources → one application ------------------------- */
/* Merge diagram: "viele Quellen → eine Anwendung" (sources, converging SVG
   wires, one highlighted target). Page-specific illustration; promote to
   site.css when a second page uses it. */
.merge {
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 60% 70% at 100% 50%, var(--sw-glow-soft), transparent 70%),
    radial-gradient(var(--sw-dot) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--surface);
  box-shadow: var(--shadow-card);
}
.merge-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); row-gap: 12px; align-items: center; }
.merge-cap { grid-row: 1; grid-column: 1; }
.merge-cap-to { grid-column: 3; }
.merge-from { grid-row: 2; grid-column: 1; list-style: none; }
.merge-from li { padding-block: 5px; }
.merge-src { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.merge-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; color: var(--fg-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.merge-ic .i { width: 16px; height: 16px; }
.merge-t { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.merge-t small { font-size: var(--fs-xs); font-weight: 400; color: var(--fg-3); }
.merge-wires { grid-row: 2; grid-column: 2; width: 100%; height: 100%; overflow: visible; }
.merge-wires path { fill: none; stroke: var(--accent-text); stroke-opacity: .5; stroke-width: 1.6; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.merge-down { display: none; }
.merge-to { position: relative; grid-row: 2; grid-column: 3; padding: 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1.5px var(--brand-blue), 0 18px 40px -20px var(--sw-ring-glow); }
.merge-to::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 0 3px var(--accent-soft); }
.merge-to-h { display: flex; align-items: center; gap: 10px; }
.merge-to-h .merge-t { font-size: var(--fs-md); }
.merge-gains { list-style: none; display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.merge-gains li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); line-height: 1.4; color: var(--fg-2); }
.merge-gains .i { width: 15px; height: 15px; margin-top: 2px; color: var(--ok); stroke-width: 2.2; }
.sw-problem-copy .lead { margin-top: 1.1rem; }
.sw-problem-copy > p:not(.kicker):not(.lead) { margin-top: 1rem; color: var(--fg-2); text-wrap: pretty; }

/* 3 · Typische Anwendungen ------------------------------------------------- */
.sw-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-features .feature { display: flex; flex-direction: column; align-items: flex-start; }
.sw-features .feature > p { margin-bottom: 1.1rem; }
.sw-feature-tags { margin-top: auto; }
.sheet .sw-feature-open { background: none; box-shadow: none; border: 1.5px dashed var(--accent-line); }
.sw-feature-open .link-arrow { margin-top: auto; }

/* 4 · Klein anfangen: Kern → testen → erweitern ------------------------------ */
.sw-grow-stage { --ph-gap: clamp(28px, 1rem + 2.4vw, 52px); }
.sw-ask { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 2rem; margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); padding: 14px 20px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.sw-ask-h { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.sw-ask-list { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.sw-ask-list li { display: flex; align-items: center; gap: .65rem; font-size: var(--fs-md); font-weight: 550; }

.sw-phases { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ph-gap); }
/* --sw-on-stage-lift captures the stage-scope --shadow-lift here (custom
   properties resolve where they are declared), so the light mini window
   inside keeps the stage elevation instead of the paper one. */
.sw-phase { --sw-on-stage-lift: var(--shadow-lift); position: relative; display: flex; flex-direction: column; padding: 12px 12px 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.sw-phase-arrow { position: absolute; top: 72px; left: calc(var(--ph-gap) / -2); z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; color: var(--accent-text); background: linear-gradient(var(--surface-2), var(--surface-2)), var(--bg); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 26px -6px var(--sw-ring-glow); }
.sw-phase-arrow .i { width: 16px; height: 16px; }
.sw-phase-body { padding: 20px 10px 0; }
.sw-phase-num { display: inline-grid; place-items: center; min-width: 2rem; height: 1.45rem; padding: 0 .45rem; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sw-phase h3 { margin: .8rem 0 .4rem; }
.sw-phase p { font-size: var(--fs-md); color: var(--fg-2); text-wrap: pretty; }

/* Light mini window on the dark stage (figure/ground contrast) */
.sw-mini { overflow: hidden; border-radius: 12px; font-size: 12.5px; line-height: 1.3; background: var(--surface); box-shadow: var(--sw-on-stage-lift); }
.sw-mini-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.sw-mini-bar .win-dots { gap: 4px; }
.sw-mini-bar .win-dots i { width: 7px; height: 7px; }
.sw-mini-label { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); white-space: nowrap; }
.sw-mini-body { display: grid; align-content: start; gap: 6px; min-height: 134px; padding: 10px; }
.sw-mod { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 5px; border-radius: 8px; font-weight: 550; white-space: nowrap; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-mod .chip { margin-left: auto; }
.sw-mod-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; color: var(--accent-text); background: var(--accent-soft); }
.sw-mod-ic .i { width: 13px; height: 13px; }
.sw-mod.is-ghost { color: var(--fg-3); background: none; box-shadow: none; border: 1px dashed var(--line-2); }
.sw-mod.is-ghost .sw-mod-ic { color: var(--fg-3); background: var(--surface-2); }
.sw-mod-later { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.sw-mod.is-new { box-shadow: 0 0 0 1.5px var(--brand-blue), 0 6px 16px -8px var(--sw-ring-glow); }
.sw-fb { display: flex; align-items: center; gap: 7px; justify-self: start; margin-left: 18px; padding: 6px 10px; border-radius: 9px 9px 9px 2px; font-size: 12px; font-weight: 550; color: var(--warn); white-space: nowrap; background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.sw-fb .i { width: 13px; height: 13px; }

/* 5 · Kein Lastenheft: three input cards --------------------------------- */
.sw-inputs { --in-gap: clamp(28px, 1rem + 2vw, 44px); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--in-gap); }
.sw-input { position: relative; padding: 12px 12px 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.sw-input h3 { margin: 1.25rem 10px .35rem; }
.sw-input p { margin-inline: 10px; font-size: var(--fs-md); color: var(--fg-2); text-wrap: pretty; }
.sw-or { position: absolute; top: 96px; left: calc(var(--in-gap) / -2); z-index: 1; padding: 2px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-3); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); transform: translate(-50%, -50%); }
.sw-input-art {
  position: relative; display: grid; place-items: center;
  height: 176px; padding-bottom: 30px; border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, var(--sw-glow-soft), transparent 70%),
    radial-gradient(var(--sw-dot) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sw-file-chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-file-chip .i { width: 13px; height: 13px; color: var(--accent-text); }

/* Screenshot: a small list window with the unclear row circled */
.sw-shot { display: block; width: 204px; border-radius: 8px; font-size: 11.5px; line-height: 1.3; white-space: nowrap; background: var(--surface); box-shadow: var(--shadow-lift); transform: rotate(-2.5deg); }
.sw-shot-bar { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--fg-2); }
.sw-shot-dots { display: inline-flex; gap: 3px; }
.sw-shot-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.sw-shot-rows { display: grid; padding: 4px 6px 6px; }
.sw-shot-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px; color: var(--fg); }
.sw-shot-row + .sw-shot-row { border-top: 1px solid var(--line); }
.sw-shot-row b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--fg-3); }
.sw-shot-row.is-hit { border-radius: 4px; background: var(--warn-bg); }
.sw-shot-row.is-hit b { color: var(--warn); }
.sw-shot-row.is-hit::after { content: ""; position: absolute; inset: -3px -5px; border-radius: 8px; border: 1.5px dashed var(--danger); }

/* Excel file: column letters, header row, one questionable cell selected */
.sw-sheet { display: grid; gap: 1px; padding: 1px; border-radius: 6px; font-size: 11px; line-height: 1.2; white-space: nowrap; background: var(--line-2); box-shadow: var(--shadow-lift); transform: rotate(1.5deg); overflow: hidden; }
.sw-sheet-row { display: grid; grid-template-columns: 18px 28px 64px 66px 36px; gap: 1px; }
.sw-sheet i { display: block; padding: 4px 5px 3px; font-style: normal; color: var(--fg); background: var(--surface); }
.sw-sheet i:first-child, .sw-sheet-row.is-cols i { font-family: var(--font-mono); text-align: center; color: var(--fg-3); background: var(--surface-2); }
.sw-sheet-row.is-cols i { padding-block: 2px 1px; }
.sw-sheet-row.is-head i:not(:first-child) { font-weight: 650; color: var(--ok); background: var(--ok-bg); }
.sw-sheet i.is-sel { color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--ok); }

/* Description: a short message and a reply */
.sw-chat { display: grid; gap: 8px; width: 214px; font-size: 12px; line-height: 1.4; }
.sw-bubble { padding: 9px 12px; border-radius: 14px 14px 14px 4px; color: var(--fg); background: var(--surface); box-shadow: var(--shadow-lift); }
.sw-bubble-2 { justify-self: end; padding: 7px 12px; border-radius: 14px 14px 4px 14px; font-weight: 550; color: var(--accent-text); white-space: nowrap; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }


/* Responsive --------------------------------------------------------------- */
@media (min-width: 1100px) {
  /* Two rows: title | lead, then assurance (under the H1) | buttons.
     The aside's children join the head grid; the lead starts level with the
     H1's first line (eyebrow height + H1 margin). */
  .sw-hero-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 0; align-items: start; }
  .sw-hero-aside { display: contents; }
  .sw-hero-title { grid-column: 1; grid-row: 1; }
  .sw-hero-aside .lead { grid-column: 2; grid-row: 1; padding-top: calc(var(--fs-xs) * 1.5 + 1.2rem + .45rem); }
  .sw-hero-aside .btn-row { grid-column: 2; grid-row: 2; align-self: end; }
  .sw-hero-aside .assurance { grid-column: 1; grid-row: 2; align-self: end; max-width: 640px; }
  /* Wide-visual hero (documented in DESIGN-SYSTEM §4): the app is kept short
     enough that its bottom edge stays above a 1440×900 fold – three list rows,
     the detail pane without its Verlauf block. */
  .sw-hero-visual { margin-top: 2.25rem; }
  .sw-tr.is-optional, .sw-log { display: none; }

  /* Vorab geklärt: label on its own line, the three questions on the same
     3-column grid and gap as the phases, text aligned with the phase text. */
  .sw-ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ph-gap); row-gap: .7rem; padding: 16px 0 18px; }
  .sw-ask-h { grid-column: 1 / -1; padding-inline: 22px; }
  .sw-ask-list { display: contents; }
  .sw-ask-list li { padding-inline: 22px; }
}
@media (min-width: 1100px) and (max-width: 1319.98px) {
  .sw-app-body { grid-template-columns: 60px minmax(0, 1fr) 320px; }
  .sw-search { min-width: 0; }
}

/* Mobile behaviour of the Vorgänge app (hero):
   ≤1099.98 the detail pane narrows; ≤1020 the rail, the Nr./Zuständig columns, the sort label,
   the search field and the "Erledigt" filter go; ≤760 the detail pane moves
   under the list and drops fields + Verlauf (title, progress and actions stay),
   the table header, due dates and .is-optional rows go; ≤520 the
   "In Arbeit" filter (.is-optional-sm) goes.
   Mobile behaviour of the other sections (≤760):
   – Hero buttons stack full width (as on the homepage).
   – Vorgehen: "Vorab geklärt" (.sw-ask) is hidden, the lead above says the
     same. Phase cards show number + title in one row and the text first, then
     the mini window without its title bar; the "Beispiel · …" label becomes a
     tag on the window's top edge. The repeated "Vorgänge · im Einsatz" row in
     phases 02/03 (.sw-mod.is-optional) is hidden; ghost "später" rows stay.
   – Kein Lastenheft: the input illustrations are hidden, only the file chip
     stays above each heading; "oder" is a small pill in the 30px gap. */
@media (max-width: 1099.98px) {
  .sw-problem { grid-template-columns: minmax(0, 1fr); }
  .sw-problem-copy, .merge { max-width: 760px; }
  .sw-app-body { grid-template-columns: 60px minmax(0, 1fr) 300px; }
  .sw-hero-title .display-sm { max-width: 24ch; }
  .sw-hero-aside { max-width: 680px; }
  .sw-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .sw-app-body { grid-template-columns: minmax(0, 1fr) 290px; }
  .sw-rail, .sw-search, .sw-sort, .sw-filter.is-optional, .sw-c-id, .sw-c-own { display: none; }
  .sw-tr { grid-template-columns: minmax(0, 1fr) 52px 100px; }

  /* Phases: vertical, mini window beside the text */
  .sw-phases { grid-template-columns: minmax(0, 1fr); }
  .sw-phase { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px; }
  .sw-phase-body { padding: 8px 12px; }
  .sw-phase-arrow { top: calc(var(--ph-gap) / -2); left: 50%; margin: -17px 0 0 -17px; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .sw-hero-aside .btn-row { gap: .6rem; margin-top: 1.5rem; }
  .sw-hero-aside .btn { flex: 1 1 100%; font-size: .9375rem; }
  .sw-hero-aside .assurance { flex-direction: column; gap: .45rem; }

  .sw-app-body { grid-template-columns: minmax(0, 1fr); }
  .sw-list { gap: 10px; padding: 14px 12px 12px; }
  .sw-list-head .app-head-t strong { font-size: 18px; }
  .sw-th, .sw-c-due, .sw-tr.is-optional, .sw-list-foot, .sw-fields, .sw-log { display: none; }
  .sw-filters { flex-wrap: wrap; }
  .sw-tr { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px; }
  .sw-detail { gap: 10px; padding: 14px 12px 14px; border-left: 0; border-top: 1px solid var(--line); }
  .sw-d-title { font-size: 16px; }
  .sw-d-actions { padding-top: 2px; }

  /* Merge: sources as 2 × 2 grid, arrow down, then the target */
  .merge-grid { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .merge-cap-to { grid-column: 1; grid-row: 4; }
  .merge-from { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .merge-from li { padding: 0; }
  .merge-src { height: 100%; }
  .merge-wires, .merge-to::before { display: none; }
  .merge-down { grid-row: 3; display: grid; place-items: center; justify-self: center; width: 34px; height: 34px; border-radius: 50%; color: var(--accent-text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
  .merge-down .i { width: 16px; height: 16px; }
  .merge-to { grid-column: 1; grid-row: 5; }

  /* Features: compact rows (icon + text); the tag rows are hidden */
  .sw-features { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sw-features .feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; }
  .sw-features .feature > * { grid-column: 2; }
  .sw-features .feature > .icon-tile { grid-column: 1; grid-row: 1 / span 3; }
  .sw-features .feature h3 { margin: 0 0 .3rem; }
  .sw-features .feature > p { margin-bottom: 0; font-size: var(--fs-sm); }
  .sw-feature-tags { display: none; }
  .sw-feature-open .link-arrow { margin-top: .25rem; }

  /* Phases (see "Mobile behaviour" above): the "Vorab geklärt" strip is hidden
     (the lead says the same), each card shows number + title + text first, then
     a compact mini window without its title bar; its "Beispiel" label becomes a
     corner tag level with the number. Repeated rows (.sw-mod.is-optional) go. */
  .sw-grow-stage { --ph-gap: 22px; }
  .sw-ask, .sw-mini-bar .win-dots, .sw-mod.is-optional { display: none; }
  .sw-phase { display: flex; align-items: stretch; padding: 16px 14px 14px; }
  .sw-phase-body { order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 0 2px 14px; }
  .sw-phase-body p { grid-column: 1 / -1; }
  .sw-phase h3 { margin: 0; }
  .sw-phase p { margin-top: .45rem; }
  .sw-phase-arrow { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .sw-phase-arrow .i { width: 14px; height: 14px; }
  .sw-mini { position: relative; overflow: visible; }
  .sw-mini-bar { display: contents; }
  .sw-mini-label { position: absolute; top: 0; right: 10px; padding: 1px 8px; border-radius: 999px; line-height: 1.6; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-50%); }
  .sw-mini-body { min-height: 0; gap: 5px; padding: 15px 7px 7px; }
  .sw-mod { height: 30px; }

  /* Input cards: the illustration is dropped, only its file chip stays
     above the heading; "oder" sits as a small divider in the gap. */
  .sw-inputs { --in-gap: 30px; grid-template-columns: minmax(0, 1fr); }
  .sw-input { padding: 16px 16px 18px; }
  .sw-input-art { display: block; height: auto; padding: 0; background: none; box-shadow: none; }
  .sw-input-art > :not(.sw-file-chip) { display: none; }
  .sw-file-chip { position: static; }
  .sw-input h3 { margin: .7rem 0 .3rem; }
  .sw-input p { margin-inline: 0; }
  .sw-or { top: calc(var(--in-gap) / -2); left: 50%; }
}
@media (max-width: 520px) {
  .sw-filter.is-optional-sm, .sw-tr.is-optional-sm { display: none; }
  .merge-src .merge-t small { display: none; }
  .merge-src { padding: 8px; gap: 8px; }
}