/* Page styles for work-finanzcheck.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

/* ── designed process figures (replace the wireframe SVG diagrams): visual but restrained ── */
    .pf { margin: clamp(24px,3.5vw,36px) 0 0; }
    .pf__row { display:flex; align-items:stretch; gap:clamp(10px,1.6vw,18px); }
    .pf__col { display:flex; flex-direction:column; gap:9px; flex:1; min-width:0; }
    .pf__k { font-family:inherit; font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin:0 0 10px; }
    .pf__k--accent { color:#3f8d5a; } .pf__k--alert { color:#c0593f; }
    .pf-node { flex:1; background:#fff; border:1px solid var(--rule); border-radius:11px; padding:12px 14px; box-shadow:0 8px 18px -14px rgba(20,18,14,.4); }
    .pf-node__n { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
    .pf-node__s { display:block; font-size:11.5px; color:var(--ink-soft,#4a4a44); line-height:1.45; margin-top:6px; }
    .pf-node__m { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing:.03em; color:var(--muted); margin-top:7px; }
    .pf-node--accent { border-color:rgba(63,141,90,.42); }
    .pf-node--accent .pf-node__m { color:#3b8454; }
    .pf-node--alert { border-color:rgba(192,89,63,.42); }
    .pf-node--alert .pf-node__m { color:#be583e; }
    .pf-num { font-family:var(--font); font-size:26px; font-weight:700; color:var(--ink); line-height:1; margin-top:8px; }
    .pf-num span { font-size:11px; font-weight:500; color:#3f8d5a; margin-left:6px; vertical-align:middle; }
    .pf-arrow { flex:0 0 auto; color:#c3bba8; display:flex; align-items:center; }
    .pf-arrow svg { width:20px; height:20px; }
    .pf-cap { text-align:left; font-size:13px; color:var(--muted); line-height:1.55; margin:16px 0 0; max-width:60ch; }
    @media (max-width: 720px){ .pf__row{ flex-direction:column; } .pf-arrow{ transform:rotate(90deg); align-self:center; margin:2px 0; } }

  /* ── A/B decision read: the experiment call ── */
  .ab { max-width: 860px; margin: clamp(56px, 8vw, 96px) auto; padding: 0 clamp(20px, 5vw, 40px); }
  .ab__eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 12px; }
  .ab__h { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 14px; color: var(--ink); }
  .ab__lede { font-size: 14.5px; color: var(--ink-soft, #4a4a44); line-height: 1.6; margin: 0 0 28px; max-width: 60ch; }

  .ab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px); }
  @media (max-width: 520px) { .ab__grid { grid-template-columns: 1fr; } }

  .ab__card { background: #FCFAF4; border: 1px solid var(--rule); border-radius: 16px; padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; }
  .ab__card--win { border-color: rgba(63,141,90,.42); box-shadow: 0 14px 34px -22px rgba(63,141,90,.45); }
  .ab__card--lose { opacity: .92; }
  .ab__card--lose .ab__tag { color: #686864; }

  .ab__card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
  .ab__tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--muted); }
  .ab__verdict { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
  .ab__verdict--lose { color: #c0593f; background: rgba(192,89,63,.10); }
  .ab__verdict--win { color: #3f8d5a; background: rgba(63,141,90,.12); }

  .ab__name { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
  .ab__desc { font-size: 13px; color: var(--ink-soft, #4a4a44); line-height: 1.5; margin: 0 0 16px; }

  .ab__points { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 8px; }
  .ab__point { position: relative; font-size: 12.5px; color: var(--ink); padding-left: 18px; line-height: 1.4; }
  .ab__point::before { content: ''; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; }
  .ab__point--lose::before { background: #c0593f; }
  .ab__point--win::before { background: #3f8d5a; }

  .ab__result { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 24px 0 0; }
  .ab__reveal { font-family: inherit; font-size: 13px; font-weight: 500; color: #F5EFE2; background: var(--ink); border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: opacity .18s ease, transform .18s ease; }
  .ab__reveal:hover { opacity: .88; }
  .ab[data-revealed="true"] .ab__reveal { display: none; }

  .ab__readout { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
  .ab[data-revealed="true"] .ab__readout { opacity: 1; transform: none; }
  .ab__figure { font-family: var(--font); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1; color: #3f8d5a; letter-spacing: -.02em; }
  .ab__figure-note { font-size: 13px; color: var(--ink-soft, #4a4a44); line-height: 1.5; max-width: 34ch; }

  .ab__cap { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 18px 0 0; max-width: 60ch; }