/* K&M Grafiken · v1 (2026-09-26)
   Leichte, textbasierte Grafiken ohne externe Bibliotheken.
   Nutzt die Tokens aus km-calm.css (--ink, --line, --muted, --accent, --accent-dark). */

.km-viz{margin:44px 0 0;padding:0}
.km-viz>figcaption,.km-viz-note{margin-top:16px;color:var(--muted);font-size:13px;line-height:1.6;max-width:78ch}
.dark .km-viz>figcaption,.dark .km-viz-note{color:#b4b7b9}
.km-viz-title{margin:0 0 6px;font-size:13px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark)}
.dark .km-viz-title{color:var(--accent-soft)}

/* 1 · Patientenweg vorher / nachher */
.km-flow-compare{display:grid;gap:22px;border-top:1px solid var(--line);padding-top:26px}
.km-flow-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:start}
.km-flow-label{font-weight:650;font-size:15px;line-height:1.35}
.km-flow-label small{display:block;margin-top:4px;color:var(--muted);font-weight:500;font-size:13px}
.km-flow-steps{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:0;list-style:none}
.km-flow-steps li{display:flex;align-items:center;font-size:14px;line-height:1.3}
.km-flow-steps li span{display:inline-block;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:#fff}
.km-flow-steps li+li::before{content:"→";padding:0 8px;color:var(--muted)}
.km-flow-steps li.is-friction span{border-color:var(--accent);background:#fdf1ec;color:#7a3419}
.km-flow-steps li.is-auto span{border-color:#b9c8bd;background:#f0f5f1}
.km-flow-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px;font-size:13px;color:var(--muted)}
.km-flow-legend i{display:inline-block;width:12px;height:12px;margin-right:7px;border-radius:3px;vertical-align:-1px;border:1px solid var(--line);background:#fff}
.km-flow-legend i.is-friction{border-color:var(--accent);background:#fdf1ec}
.km-flow-legend i.is-auto{border-color:#b9c8bd;background:#f0f5f1}

/* 2 · Gestapelte Balken (Inhaberwoche) */
.km-week{display:grid;gap:22px;border-top:1px solid #ffffff29;padding-top:26px}
.section:not(.dark) .km-week{border-top-color:var(--line)}
.km-week-row{display:grid;grid-template-columns:170px minmax(0,1fr) 64px;gap:18px;align-items:center}
.km-week-label{font-weight:650;font-size:15px;line-height:1.35}
.km-week-label small{display:block;margin-top:3px;font-weight:500;font-size:13px;opacity:.72}
.km-week-bar{display:flex;height:42px;border-radius:6px;overflow:hidden;background:#ffffff14}
.km-week-bar>span{display:flex;align-items:center;justify-content:center;min-width:0;font-size:12px;font-weight:650;color:#202123;white-space:nowrap;overflow:hidden}
.km-week-total{font-size:20px;font-weight:650;text-align:right;letter-spacing:-.02em}
.km-seg-treat{background:#d4d5d3}
.km-seg-lead{background:#9fc2a9}
.km-seg-org{background:var(--accent-soft)}
.km-seg-admin{background:var(--accent)}
.km-seg-evening{background:#c9502a;color:#fff!important}
.km-week-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;opacity:.85}
.km-week-legend i{display:inline-block;width:12px;height:12px;margin-right:7px;border-radius:3px;vertical-align:-1px}

/* 3 · Zeitstrahl */
.km-timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.km-timeline li{display:grid;grid-template-columns:150px 22px minmax(0,1fr);gap:0 18px;padding:0;position:relative}
.km-timeline time{padding:22px 0;font-weight:650;font-size:15px;line-height:1.35}
.km-timeline .km-tl-dot{position:relative}
.km-timeline .km-tl-dot::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line)}
.km-timeline .km-tl-dot::after{content:"";position:absolute;left:4px;top:26px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--muted)}
.km-timeline li.is-done .km-tl-dot::after{background:var(--muted)}
.km-timeline li.is-next .km-tl-dot::after{border-color:var(--accent);background:var(--accent)}
.km-timeline .km-tl-body{padding:20px 0;border-bottom:1px solid var(--line)}
.km-timeline h3{margin:0 0 6px;color:var(--text);font-size:19px;line-height:1.3;letter-spacing:-.015em}
.km-timeline p{margin:0;color:var(--muted);line-height:1.65}
.km-tl-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;background:#ececea;color:var(--muted)}
.is-next .km-tl-tag{background:#fdf1ec;color:#7a3419}

/* 4 · Kreisläufe (Bindung) */
.km-cycles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.km-cycle{border-top:2px solid var(--line);padding-top:22px}
.km-cycle.is-bad{border-top-color:var(--accent)}
.km-cycle.is-good{border-top-color:#7fa58b}
.km-cycle h3{margin:0 0 16px;font-size:22px;letter-spacing:-.02em}
.km-cycle ol{list-style:none;margin:0;padding:0;counter-reset:cyc}
.km-cycle li{counter-increment:cyc;position:relative;padding:12px 0 12px 42px;line-height:1.5}
.km-cycle li::before{content:counter(cyc);position:absolute;left:0;top:10px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:650;background:#ececea}
.km-cycle.is-bad li::before{background:#fdf1ec;color:#7a3419}
.km-cycle.is-good li::before{background:#e8f1eb;color:#2f5a3c}
.km-cycle li+li::after{content:"↓";position:absolute;left:9px;top:-10px;font-size:12px;color:var(--muted)}
.km-cycle .km-cycle-back{margin-top:6px;padding-left:42px;font-size:13px;color:var(--muted)}

/* 5 · Einfache Balken */
.km-hbars{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:24px}
.dark .km-hbars{border-top-color:#ffffff29}
.km-hbar{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;align-items:center}
.km-hbar b{font-size:15px}
.km-hbar-track{position:relative;height:36px;background:#ececea;border-radius:6px;overflow:hidden}
.dark .km-hbar-track{background:#ffffff14}
.km-hbar-fill{height:100%;display:flex;align-items:center;padding-left:12px;font-size:14px;font-weight:650;color:#202123;background:#d4d5d3;white-space:nowrap}
.km-hbar-fill.is-accent{background:var(--accent);color:#fff}

/* 6 · Große Kennzahl */
.km-bignum{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;border-top:1px solid var(--line);padding-top:30px}
.dark .km-bignum{border-top-color:#ffffff29}
.km-bignum strong{display:block;font-size:clamp(46px,7vw,84px);line-height:1;letter-spacing:-.05em;font-weight:600;color:var(--accent-dark)}
.dark .km-bignum strong{color:var(--accent-soft)}
.km-bignum span{display:block;margin-top:12px;font-size:15px;color:var(--muted)}
.dark .km-bignum span{color:#b4b7b9}
.km-bignum-calc{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;font-size:17px;line-height:1.5}
.km-bignum-calc em{font-style:normal;color:var(--muted)}
.dark .km-bignum-calc em{color:#b4b7b9}

/* 7 · Phasenmodell */
.km-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.km-phases li{position:relative;padding:26px 26px 26px 0}
.km-phases li+li{padding-left:26px;border-left:1px solid var(--line)}
.km-phases li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:34px;width:12px;height:12px;background:var(--paper,#f5f5f3);border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);z-index:1}
.section.white .km-phases li:not(:last-child)::after{background:#fff}
.km-phase-step{font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark)}
.km-phases h3{margin:10px 0 8px;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.km-phases p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
.km-phase-price{display:inline-block;margin-top:14px;padding:4px 10px;border-radius:999px;background:#ececea;font-size:13px;font-weight:650}
.km-phases li.is-key .km-phase-price{background:#292a2c;color:#fff}

/* 8 · Mini-Rechner */
.km-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);border-top:1px solid var(--line);padding-top:30px}
.km-calc-inputs{display:grid;gap:18px}
.km-calc label{display:grid;gap:7px;font-size:14px;font-weight:600}
.km-calc label small{font-weight:500;color:var(--muted)}
.km-calc input{width:100%;max-width:260px;padding:11px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:16px}
.km-calc input:focus{outline:2px solid var(--accent-dark);outline-offset:1px}
.km-calc-out{display:grid;gap:0;align-content:start}
.km-calc-out div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.km-calc-out div:first-child{border-top:1px solid var(--line)}
.km-calc-out span{color:var(--muted)}
.km-calc-out strong{font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.km-calc-out .is-result strong{color:var(--accent-dark);font-size:26px}

/* 9 · Hinweis-Leiste für Transparenz */
.km-transparency{margin-top:22px;padding:14px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6}

@media(max-width:860px){
  .km-cycles,.km-bignum,.km-calc{grid-template-columns:1fr}
  .km-phases{grid-template-columns:1fr 1fr}
  .km-phases li:nth-child(3){padding-left:0;border-left:0}
  .km-phases li:nth-child(2)::after{display:none}
  .km-phases li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .km-flow-row,.km-week-row{grid-template-columns:1fr;gap:10px}
  .km-week-total{text-align:left}
  .km-timeline li{grid-template-columns:22px minmax(0,1fr);gap:0 14px}
  .km-timeline time{grid-column:2;padding:18px 0 0}
  .km-timeline .km-tl-dot{grid-row:1/3;grid-column:1}
  .km-timeline .km-tl-body{grid-column:2;padding-top:6px}
  .km-timeline .km-tl-dot::after{top:22px}
  .km-phases{grid-template-columns:1fr}
  .km-phases li,.km-phases li+li{padding:22px 0;border-left:0}
  .km-phases li+li{border-top:1px solid var(--line)}
  .km-phases li::after{display:none}
  .km-hbar{grid-template-columns:1fr;gap:6px}
}