/* ==========================================================================
   /automatisierung/ – page styles (loaded after site.css)
   1 Hero + flow map   2 Ausgangslage   3 Flow lanes (centrepiece)
   4 Klein anfangen    5 Vorher prüfen  6 Motion   7 Responsive
   Only the breakpoints from DESIGN-SYSTEM.md §3 are used.
   ========================================================================== */

/* 1 · Hero ----------------------------------------------------------------- */
/* Glow preset and the ruled hero assurance (.assurance-ruled) live in site.css */

/* Flow map: vertical workflow diagram in an app window (WENN/DANN caps, nodes
   with state, side branches for exceptions and parallel actions, animated
   pulses along the connectors). Page-specific illustration (the larger sibling
   of the .wf service-card art); promote when reused. */
.flowmap { max-width: 600px; }
.flowmap-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.flowmap-title .i { width: 15px; height: 15px; color: var(--accent-text); }
.fm-canvas {
  --cap-w: 76px;
  --pad: 10px;          /* node padding-left */
  --ic: 30px;           /* node icon size – the rail runs through its centre */
  display: grid;
  grid-template-columns: var(--cap-w) minmax(0, 1.12fr) 40px minmax(0, .88fr);
  padding: 22px 22px 22px 16px;
  background:
    radial-gradient(ellipse 60% 50% at 30% 0%, rgba(47, 91, 255, .07), transparent 70%),
    radial-gradient(rgba(20, 25, 80, .12) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--surface-2);
}
.fm-r1 { grid-row: 1; } .fm-r2 { grid-row: 2; } .fm-r3 { grid-row: 3; } .fm-r4 { grid-row: 4; } .fm-r5 { grid-row: 5; }
.fm-r6 { grid-row: 6; } .fm-r7 { grid-row: 7; } .fm-r8 { grid-row: 8; } .fm-r9 { grid-row: 9; }
.fm-cap { grid-column: 1; align-self: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.fm-node {
  grid-column: 2; position: relative;
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px;
  padding: 9px 10px 9px var(--pad);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(20, 25, 80, .06), 0 10px 22px -14px rgba(20, 25, 80, .35);
}
.fm-ic { display: grid; place-items: center; flex: none; width: var(--ic); height: var(--ic); border-radius: 9px; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.fm-ic .i { width: 16px; height: 16px; }
.fm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.fm-t small { font-size: 11.5px; font-weight: 400; color: var(--fg-3); }
.fm-state { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; }
.fm-state.is-done { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.fm-state.is-done .i { width: 11px; height: 11px; stroke-width: 2.4; }
.fm-state.is-run { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.fm-state.is-run i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fm-state.is-run i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; }
.fm-node.is-trigger { box-shadow: 0 0 0 1.5px var(--brand-blue), 0 12px 26px -14px rgba(47, 91, 255, .6); }
.fm-node.is-trigger .fm-ic, .fm-node.is-result .fm-ic { color: #fff; background: var(--grad-brand-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.fm-node.is-result { background: var(--grad-brand-strong); box-shadow: 0 14px 30px -14px rgba(39, 72, 216, .8); }
.fm-node.is-result .fm-t { color: #fff; }
.fm-node.is-result .fm-t small { color: rgba(255, 255, 255, .84); }
.fm-node.is-result .fm-ic { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
/* Side branches (exception, parallel action) */
.fm-side { grid-column: 4; min-height: 50px; }
.fm-side-a { grid-row: 3; }
.fm-side-b { grid-row: 7; }
.fm-node.is-exception { box-shadow: inset 0 0 0 1px var(--warn-line), 0 10px 22px -14px rgba(20, 25, 80, .35); outline: 1px dashed var(--warn); outline-offset: -1px; }
.fm-node.is-exception .fm-ic { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
/* Vertical connectors: the line runs through the icon centres (the rail) */
.fm-wire { grid-column: 2; display: flex; align-items: center; gap: 10px; min-height: 26px; padding-left: calc(var(--pad) + var(--ic) / 2 - 1px); }
.fm-wire i { position: relative; flex: none; align-self: stretch; width: 2px; overflow: hidden; background: var(--accent-line); }
.fm-wire i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--brand-azure) 50%, transparent); transform: translateY(-100%); }
.fm-wire b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--fg-3); }
/* Horizontal connectors to the side branches */
.fm-link { grid-column: 3; position: relative; align-self: center; height: 2px; margin-inline: 2px; background: var(--accent-line); }
.fm-link i { position: absolute; inset: 0; overflow: hidden; }
.fm-link i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-azure) 50%, transparent); transform: translateX(-100%); }
.fm-link.is-exception { background: repeating-linear-gradient(90deg, var(--warn) 0 4px, transparent 4px 8px); opacity: .85; }
.fm-link b { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--warn); }
.fm-foot { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-3); background: var(--surface); }
.fm-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ok); }
.fm-last { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.fm-foot .chip { margin-left: auto; }

/* 2 · Ausgangslage: signals + method card ---------------------------------- */
.handoff-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; }
.handoff-copy .lead { margin-top: 1.1rem; }
/* Signal list: stacked "kommt dir das bekannt vor" rows (icon tile + sentence
   with a bold key phrase); lighter than the ledger. */
.signal-list { list-style: none; display: grid; gap: 10px; margin-top: 1.9rem; }
.signal-list li { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: var(--r-md); font-size: var(--fs-md); line-height: 1.45; color: var(--fg-2); background: var(--surface); box-shadow: var(--shadow-card); }
.signal-list strong { color: var(--fg); }

.method { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lift); }
.method-h { padding: 24px 28px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.method-kicker { margin-bottom: .65rem; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: var(--accent-text); }
.method-lead { font-size: 1.0625rem; font-weight: 550; line-height: 1.5; letter-spacing: -.01em; color: var(--fg); text-wrap: pretty; }
.method-list { list-style: none; padding: 8px 14px 14px; }
.method-list li { display: grid; grid-template-columns: 30px 38px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; }
.method-list li + li { border-top: 1px dashed var(--line-2); }
.method-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.method-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--icon); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.method-ic .i { width: 18px; height: 18px; }
.method-t { display: flex; flex-direction: column; gap: .15rem; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.method-t small { font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; color: var(--fg-2); }
.method-list li.is-exception { grid-template-columns: 30px minmax(0, 1fr); margin-top: 8px; border-top: 0; border-radius: var(--r-md); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.method-list li.is-exception .method-num { color: var(--accent-text); }
.method-list li.is-exception .method-num .i { width: 22px; height: 22px; }

/* 3 · Flow lanes (centrepiece on a stage) ---------------------------------- */
/* Flow lanes (page centrepiece): the .flow-rows idea as a board – aligned
   Auslöser / Schritt / Ergebnis columns, a legend, nodes with sub-labels,
   exception and "oder" variants, bidirectional sync wires and pulses. */
.lanes {
  --wire-w: 56px;
  --node-h: 66px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012));
  box-shadow: var(--shadow-card), 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.lanes-legend, .lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.45fr); column-gap: clamp(24px, 3vw, 48px); }
.lanes-legend { padding: 12px 28px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .025); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.lanes-legend-chain { display: grid; grid-template-columns: minmax(0, 1fr) var(--wire-w) minmax(0, 1fr) var(--wire-w) minmax(0, 1fr); }
.lanes-legend-chain span:nth-child(2) { grid-column: 3; }
.lanes-legend-chain span:nth-child(3) { grid-column: 5; color: var(--accent-text); }
.lanes-list { list-style: none; }
.lane { align-items: start; padding: 26px 28px; }
.lane + .lane { border-top: 1px solid var(--line); }
.lane-info { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.lane-num { padding-top: .3rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.lane-info h3 { text-wrap: balance; }
.lane-info p { margin-top: .35rem; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-2); }
.lane-chain { display: grid; grid-template-columns: minmax(0, 1fr) var(--wire-w) minmax(0, 1fr) var(--wire-w) minmax(0, 1fr); align-items: start; }
.lane-col { display: grid; gap: 10px; min-width: 0; }
.lane-node {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: var(--node-h);
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.lane-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--icon); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.lane-ic .i { width: 18px; height: 18px; }
.lane-t { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--fg); }
.lane-l { display: block; }
.lane-t small { margin-top: .1rem; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--fg-3); }
/* Role label: announced to screen readers; the legend shows it on desktop */
.lane-role { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lane-node.is-trigger { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.lane-node.is-trigger .lane-ic { color: var(--icon); background: rgba(79, 109, 255, .22); box-shadow: inset 0 0 0 1px var(--accent-line); }
.lane-node.is-result { background: var(--grad-brand-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 34px -16px rgba(47, 91, 255, .85); }
.lane-node.is-result .lane-t { color: #fff; }
.lane-node.is-result .lane-t small, .lane-node.is-result .lane-role { color: rgba(255, 255, 255, .84); }
.lane-node.is-result .lane-ic { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.lane-node.is-result.is-alt { background: rgba(79, 109, 255, .16); box-shadow: inset 0 0 0 1px var(--accent-line); }
.lane-node.is-result.is-alt .lane-t small { color: var(--fg-3); }
.lane-node.is-result.is-alt .lane-ic { color: var(--icon); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Connectors: line + clipped pulse (i) + arrow head */
.lane-wire { position: relative; align-self: start; height: 2px; margin: calc(var(--node-h) / 2 - 1px) 8px 0; border-radius: 2px; background: linear-gradient(90deg, var(--line-2), var(--accent-line)); }
.lane-wire i { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.lane-wire i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-cyan) 50%, transparent); transform: translateX(-100%); }
.lane-wire .i { position: absolute; max-width: none; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--accent-text); stroke-width: 2; }
.lane-wire.is-sync { background: var(--accent-line); }
.lane-wire.is-sync .i { right: auto; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 5px; border-radius: 50%; stroke-width: 1.8; background: var(--bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* Exception under a step, and the "oder" between two results */
.lane-exc { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.lane-exc::before { content: ""; position: absolute; left: 28px; bottom: 100%; height: 10px; border-left: 1.5px dashed var(--warn); opacity: .8; }
.lane-exc .wf-warn { flex: none; }
.lane-or { gap: 6px; }
.lane-or-t { justify-self: center; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.lanes-stage .note { margin-top: 1.75rem; }
.lanes-more { margin-top: .75rem; text-align: center; }

/* 4 · Klein anfangen: track ------------------------------------------------ */
.start-copy .lead { margin-top: 1.1rem; }
.start-list { margin: 1.6rem 0 1.1rem; }
.track {
  padding: 22px 26px 28px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(47, 91, 255, .07), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-lift);
}
.track-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.track-title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.track-label { padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--fg-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.track-list { display: grid; }
.track-stop, .track-link { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.track-dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.track-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.track-stop.is-on .track-dot { background: var(--grad-brand-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(30, 123, 255, .7); }
.track-stop.is-on .track-dot::after { background: #fff; }
.track-t { display: flex; flex-direction: column; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.track-t small { font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; color: var(--fg-3); }
.track-stop:not(.is-on) .track-t { color: var(--fg-2); }
.track-link { min-height: 62px; }
.track-line { position: relative; justify-self: center; align-self: stretch; width: 2px; margin-block: 5px; overflow: hidden; background: repeating-linear-gradient(180deg, var(--line-2) 0 4px, transparent 4px 8px); }
.track-link.is-auto .track-line { background: var(--grad-rule); }
.track-line i { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95) 50%, transparent); transform: translateY(-100%); }
.track-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.track-tag .i { width: 14px; height: 14px; }
.track-tag.is-later { color: var(--fg-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }

/* 5 · Vorher prüfen: preflight --------------------------------------------- */
/* Preflight: numbered check cards that lead into a dark result card
   (checks → outcome), with chevron connectors on desktop. */
.preflight { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pf-item { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.pf-num { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.pf-item h3 { margin-bottom: .35rem; }
.pf-item p { font-size: var(--fs-md); color: var(--fg-2); }
.pf-item:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; right: -21px; top: 45px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232d4bdc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px -2px rgba(20, 25, 80, .2);
}
/* Result card = the site.css dark-card surface (overrides the .pf-item fill) */
.pf-result { background: var(--card-dark-bg); box-shadow: var(--card-dark-shadow); }
.pf-result .pf-num { color: var(--accent-text); }

/* 6 · Motion (opt-in; transform + opacity only) ---------------------------- */
@keyframes auto-pulse-x { 0% { transform: translateX(-100%); } 32%, 100% { transform: translateX(100%); } }
@keyframes auto-pulse-x-rev { 0% { transform: translateX(100%); } 32%, 100% { transform: translateX(-100%); } }
@keyframes auto-pulse-y { 0% { transform: translateY(-100%); } 32%, 100% { transform: translateY(100%); } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero flow map: one signal travels down the rail, rows in sequence */
  .fm-wire i::after, .fm-link i::after { animation: auto-pulse-y 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .fm-link i::after { animation-name: auto-pulse-x; animation-delay: 1.5s; }
  .fm-wire.fm-r4 i::after { animation-delay: .55s; }
  .fm-wire.fm-r6 i::after { animation-delay: 1.1s; }
  .fm-wire.fm-r8 i::after { animation-delay: 1.65s; }
  .fm-state.is-run i::after { animation: zf-halo 1.6s ease-out infinite; }
  /* Lanes: each lane fires in turn, left to right */
  .lane-wire i::after { animation: auto-pulse-x 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .lane-wire.is-sync i + i::after { animation-name: auto-pulse-x-rev; }
  .lane-wire ~ .lane-wire i::after { animation-delay: .6s; }
  .lane:nth-child(2) .lane-wire i::after { animation-delay: .7s; }
  .lane:nth-child(2) .lane-wire ~ .lane-wire i::after { animation-delay: 1.3s; }
  .lane:nth-child(3) .lane-wire i::after { animation-delay: 1.4s; }
  .lane:nth-child(3) .lane-wire ~ .lane-wire i::after { animation-delay: 2s; }
  .lane:nth-child(4) .lane-wire i::after { animation-delay: 2.1s; }
  .lane:nth-child(4) .lane-wire ~ .lane-wire i::after { animation-delay: 2.7s; }
  .lane:nth-child(5) .lane-wire i::after { animation-delay: 2.8s; }
  .lane:nth-child(5) .lane-wire ~ .lane-wire i::after { animation-delay: 3.4s; }
  /* Track: the one automated link */
  .track-line i { animation: auto-pulse-y 2.8s cubic-bezier(.45, 0, .55, 1) infinite; }
}

/* 7 · Responsive ----------------------------------------------------------- */
@media (min-width: 1100px) {
  .flowmap { margin-left: auto; }
}
/* Narrow split hero: the flow map drops its WENN/DANN caps */
@media (min-width: 1100px) and (max-width: 1319.98px) {
  .fm-canvas { --cap-w: 0px; padding-left: 18px; }
  .fm-cap { display: none; }
}

@media (max-width: 1099.98px) {
  /* Stacked hero: the flow map is centred instead of hugging the left edge */
  .flowmap { max-width: 720px; margin-inline: auto; }
  /* Lanes: info above, the chain gets the full width; roles move into the nodes */
  .lanes { --node-h: 84px; }
  .lanes-legend { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .lane-info p { max-width: 60ch; }
  .lane-role { position: static; width: auto; height: auto; margin: 0 0 .15rem; overflow: visible; clip: auto; white-space: normal; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .lane-node.is-trigger .lane-role { color: var(--accent-text); }
  .preflight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-item:not(:last-child)::after { display: none; }
}

@media (max-width: 1020px) {
  .handoff-grid { grid-template-columns: minmax(0, 1fr); }
  .handoff-copy { max-width: 720px; }
  .method { max-width: 720px; }
  .track { max-width: 560px; }
}

@media (max-width: 760px) {
  .fm-canvas { --cap-w: 0px; padding: 18px 16px; }
  .fm-cap { display: none; }

  .signal-list { margin-top: 1.4rem; }
  .method-h { padding: 18px 18px 16px; }
  .method-lead { font-size: 1rem; }
  .method-list { padding: 4px 8px 10px; }
  .method-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 10px; }
  .method-num { display: none; }
  .method-list li.is-exception { grid-template-columns: 36px minmax(0, 1fr); }
  .method-list li.is-exception .method-num { display: grid; place-items: center; }
  .method-ic { width: 36px; height: 36px; }

  /* Lanes: one compact row per lane – small chips (icon + name) joined by
     short wires, wrapping onto a second line where needed. The sub-lines and
     role tags go (the roles stay for screen readers, the legend order is
     Auslöser · Schritt · Ergebnis); an exception note sits on its own line. */
  .lane { padding: 16px 14px 18px; row-gap: 12px; }
  .lane-info { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
  .lane-info p { display: none; }
  .lane-chain { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .lane-col { display: contents; }
  .lane-node { min-height: 36px; padding: 3px 12px 3px 3px; gap: 8px; border-radius: 999px; }
  .lane-ic { width: 30px; height: 30px; border-radius: 50%; }
  .lane-ic .i { width: 15px; height: 15px; }
  .lane-t { font-size: var(--fs-sm); white-space: nowrap; }
  .lane-t small { display: none; }
  .lane-role { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Wires become small chevrons, which still read right at a line end */
  .lane-wire { flex: none; align-self: center; width: 20px; height: 20px; margin: 0 2px; background: none; }
  .lane-wire i { display: none; }
  .lane-wire .i { right: auto; left: 50%; margin-left: -6px; }
  .lane-wire.is-sync { width: 22px; background: none; }
  .lane-wire.is-sync .i { width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 4px; }
  .lane-or-t { margin: 0 8px; }
  .lane-exc { order: 1; flex-basis: 100%; width: fit-content; max-width: 100%; }
  .lane-exc::before { display: none; }
  .lanes-stage .note { margin-top: 1.25rem; }

  .track { padding: 18px 16px 22px; }
  .track-stop, .track-link { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .track-dot { width: 36px; height: 36px; }
  .track-link { min-height: 54px; }

  .preflight { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pf-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; }
  .pf-top { grid-row: span 2; align-self: start; margin: 0; }
  .pf-num { display: none; }
}

@media (max-width: 520px) {
  /* Flow map: single column; the side branches hang off the rail */
  .fm-canvas { grid-template-columns: minmax(0, 1fr); padding: 16px 12px; }
  .fm-node, .fm-wire { grid-column: 1; }
  .fm-link, .fm-wire b, .fm-last, .fm-optional { display: none; }
  .fm-side { grid-column: 1; min-height: 0; margin: 8px 0 8px 46px; }
  .fm-side-a { grid-row: 4; }
  .fm-side-b { grid-row: 8; }
  .fm-side::before { content: ""; position: absolute; left: -21px; top: 50%; width: 20px; border-top: 1.5px solid var(--accent-line); }
  .fm-side.is-exception::before { border-top: 1.5px dashed var(--warn); }
  .fm-foot { gap: 10px; padding: 10px 12px; }
}