/* ============================================================
   KI-Prozess-Simulation (QWEB-65), nur auf /leistungen/automation.html.
   Ruhig und klar: oben die Wahl des Vorgangs und die Kette der Systeme,
   links die Schritte, rechts gross die Ansicht des Schritts.
   Farben: Flaeche, Text, eine Hauptfarbe (blue-ink der Website), dazu
   "erledigt" und "Achtung". Alle Klassen tragen das Praefix ks-.
   ============================================================ */

.kisim{
  overflow-anchor:none;
  --ks-bg:var(--card);
  --ks-soft:var(--bg-soft);
  --ks-ink:var(--ink);
  --ks-ink-2:var(--ink-soft);
  --ks-line:color-mix(in srgb,var(--ks-ink) 10%,transparent);
  --ks-line-2:color-mix(in srgb,var(--ks-ink) 22%,transparent);
  --ks-acc:var(--blue-ink);
  --ks-acc-soft:color-mix(in srgb,var(--ks-acc) 11%,transparent);
  --ks-on-acc:#fff;
  --ks-ok:var(--teal-ink);
  --ks-ok-soft:color-mix(in srgb,var(--ks-ok) 12%,transparent);
  --ks-warn:#9A5B00;
  --ks-warn-soft:color-mix(in srgb,var(--ks-warn) 12%,transparent);
  --ks-p-ink:#16283D;
  --ks-p-muted:#465971;
  --ks-p-acc:#3E6BC4;
  --ks-mono:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  --ks-ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"] .kisim{
  --ks-acc:var(--sky);
  --ks-on-acc:var(--bg);
  --ks-warn:#E8B04A;
}

.kisim [hidden]{display:none!important}
.kisim button{font:inherit}

/* Ohne JS: Liste der Vorgaenge */
.ks-fallback{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none}
.ks-fallback li{background:var(--ks-bg);border:1px solid var(--ks-line);border-radius:var(--radius-sm);padding:24px}
.ks-fallback h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;line-height:1.25}
.ks-fallback p{font-size:.95rem;color:var(--ks-ink-2)}
.js .ks-fallback{display:none}
.ks-app{display:none}
.js .ks-app{display:block}

/* Wahl des Vorgangs: Segment-Schalter mit gleitender Markierung */
.ks-seg-w{display:flex;justify-content:center;margin-bottom:40px}
.ks-seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--ks-soft);border:1px solid var(--ks-line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ks-seg::-webkit-scrollbar{display:none}
.ks-seg-mark{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:var(--ks-bg);box-shadow:var(--shadow-sm);transition:transform .45s var(--ks-ease),width .45s var(--ks-ease);pointer-events:none}
.ks-seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:10px 18px;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--ks-ink-2);white-space:nowrap;transition:color .3s}
.ks-seg button:hover{color:var(--ks-ink)}
.ks-seg button[aria-pressed="true"]{color:var(--ks-ink);font-weight:600}
.ks-seg button:focus-visible{outline:3px solid var(--blue-ink);outline-offset:-3px}

/* Buehne */
.ks-stage{background:var(--ks-bg);border:1px solid var(--ks-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.ks-top{padding:28px 32px 0;text-align:center}
.ks-top h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.ks-lead{max-width:60ch;margin:10px auto 0;color:var(--ks-ink-2);font-size:1rem}

/* Kette der Systeme */
.ks-strip-scroll{overflow-x:auto;padding:28px 32px 24px;scrollbar-width:thin}
.ks-strip{position:relative;display:flex;gap:12px;min-width:max-content;justify-content:center;margin-inline:auto}
.ks-node{position:relative;flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.ks-node::after{content:"";position:absolute;top:24px;left:calc(50% + 30px);width:calc(100% - 48px);height:1px;background:var(--ks-line-2)}
.ks-node:last-child::after{display:none}
.ks-node-ic{width:48px;height:48px;border-radius:50%;background:var(--ks-soft);display:grid;place-items:center;color:var(--ks-ink-2);transition:background .4s var(--ks-ease),color .4s,transform .4s var(--ks-ease),box-shadow .4s}
.ks-node-ic svg{width:21px;height:21px}
.ks-node-l{font-weight:500;font-size:.82rem;line-height:1.2;color:var(--ks-ink-2);transition:color .3s}
.ks-node.ks-seen .ks-node-ic{color:var(--ks-ink)}
.ks-node.ks-act .ks-node-ic{background:var(--ks-acc);color:var(--ks-on-acc);transform:scale(1.08);box-shadow:0 0 0 6px var(--ks-acc-soft)}
.ks-node.ks-act .ks-node-l{color:var(--ks-ink);font-weight:600}
.ks-packet{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--ks-acc);z-index:2;transition:transform .8s var(--ks-ease),opacity .3s;pointer-events:none;opacity:0}

/* Raster: Schritte links, Ansicht von der Mitte bis rechts */
.ks-grid{display:grid;grid-template-columns:280px minmax(0,1fr);border-top:1px solid var(--ks-line);min-height:560px}
.ks-steps{grid-column:1;grid-row:1;padding:20px 12px 20px 20px;border-right:1px solid var(--ks-line)}
.ks-detail{grid-column:2;grid-row:1;padding:28px 36px 32px;min-width:0}
.ks-steps ol{list-style:none;display:grid;gap:2px;counter-reset:ks}
.ks-st{all:unset;color:var(--ks-ink);box-sizing:border-box;position:relative;width:100%;cursor:pointer;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:12px;transition:background .3s}
.ks-st:hover{background:var(--ks-soft)}
.ks-st:focus-visible{outline:3px solid var(--blue-ink)}
.ks-st-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;color:var(--ks-ink-2);background:var(--ks-soft);transition:background .3s,color .3s}
.ks-st-t{font-size:.92rem;line-height:1.3;color:var(--ks-ink-2);transition:color .3s}
.ks-st.ks-done .ks-st-n{background:var(--ks-ok-soft);color:var(--ks-ok)}
.ks-st.ks-done .ks-st-t{color:var(--ks-ink)}
.ks-st.ks-cur{background:var(--ks-soft)}
.ks-st.ks-cur .ks-st-n{background:var(--ks-acc);color:var(--ks-on-acc)}
.ks-st.ks-cur .ks-st-t{color:var(--ks-ink);font-weight:600}

/* Steuerung wie ein Player: Neu starten, Abspielen, Weiter. Feste Groesse, damit nichts oval wird */
.ks-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.ks-ctl{flex:0 0 auto;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--ks-line-2);background:var(--ks-bg);color:var(--ks-ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ks-ease)}
.ks-ctl:hover{background:var(--ks-soft);border-color:var(--ks-ink-2)}
.ks-ctl:active{transform:scale(.94)}
.ks-ctl svg{width:18px;height:18px}
.ks-ctl:disabled{opacity:.35;cursor:default;background:var(--ks-bg);border-color:var(--ks-line-2)}
.ks-ctl.ks-play{width:56px;height:56px;border:0;background:var(--ks-ink);color:var(--ks-bg);box-shadow:var(--shadow-sm)}
.ks-ctl.ks-play:hover{background:var(--ks-ink);transform:scale(1.05)}
.ks-ctl.ks-play svg{width:22px;height:22px}
.ks-ctl.ks-attn{background:var(--ks-acc);border-color:var(--ks-acc);color:var(--ks-on-acc);animation:ks-ring 1.4s ease-in-out infinite}
.ks-ctl:focus-visible,.ks-btn2:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px}
.ks-btn2{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid var(--ks-line-2);background:var(--ks-bg);color:var(--ks-ink);cursor:pointer;padding:10px 18px;border-radius:999px;font-size:.9rem;font-weight:600;transition:background .2s,border-color .2s,transform .2s var(--ks-ease)}
.ks-btn2:hover{background:var(--ks-soft);border-color:var(--ks-ink-2)}
.ks-btn2:active{transform:scale(.97)}
.ks-btn2 svg{width:16px;height:16px}
.ks-btn2.ks-main{background:var(--ks-ink);border-color:var(--ks-ink);color:var(--ks-bg)}
.ks-btn2.ks-main:hover{background:var(--ks-ink);transform:translateX(2px)}

/* Ansicht des Schritts */
.ks-head-t{transition:opacity .35s var(--ks-ease),transform .35s var(--ks-ease)}
.ks-head-t.ks-out{opacity:0;transform:translateY(6px)}
.ks-kicker{font-size:.8rem;font-weight:600;color:var(--ks-acc)}
.ks-detail h4{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin-top:6px}
.ks-text{font-size:1.05rem;color:var(--ks-ink-2);margin-top:8px;max-width:56ch}
.ks-view{margin-top:24px;display:grid;gap:14px;align-content:start}
.ks-view>*{animation:ks-rise .6s var(--ks-ease) both}
@keyframes ks-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.ks-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;padding:18px 32px;border-top:1px solid var(--ks-line);font-size:.9rem;color:var(--ks-ink-2)}
.ks-sum b{color:var(--ks-ink);font-weight:600}
.ks-sum .ks-k{color:var(--ks-acc)}

/* Systemansichten */
.ks-sv{border:1px solid var(--ks-line);border-radius:14px;background:var(--ks-bg);overflow:hidden}
.ks-sv-bar{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--ks-line);font-size:.76rem;font-weight:500;color:var(--ks-ink-2)}
.ks-note-p{padding:12px 16px 16px;font-size:.88rem;color:var(--ks-ink-2)}

.ks-mail-h{padding:14px 16px 4px;display:grid;gap:4px;font-size:.88rem}
.ks-mail-h div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px}
.ks-mail-h span{color:var(--ks-ink-2);font-size:.8rem;padding-top:1px}
.ks-mail-h b{font-weight:600;overflow-wrap:anywhere}
.ks-mail-b{padding:12px 16px 16px;white-space:pre-wrap;font-size:.92rem;line-height:1.65;border-top:1px solid var(--ks-line);margin-top:10px}
.ks-mk{transition:background .4s,box-shadow .4s;border-radius:3px}
.ks-mk.ks-on{background:var(--ks-acc-soft);box-shadow:inset 0 -2px 0 var(--ks-acc)}
.ks-att{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.ks-att-i{display:inline-flex;gap:6px;align-items:center;font-size:.8rem;padding:6px 12px;border-radius:999px;background:var(--ks-soft)}
.ks-att-i svg{width:15px;height:15px;color:var(--ks-ink-2)}

.ks-fl{padding:6px 16px 12px;display:grid}
.ks-fl-r{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ks-line);animation:ks-rise .45s var(--ks-ease) both}
.ks-fl-r:last-child{border-bottom:0}
.ks-fl-l{font-size:.8rem;color:var(--ks-ink-2)}
.ks-fl-v{font-weight:500;overflow-wrap:anywhere}
.ks-conf{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.ks-conf-bar{width:48px;height:4px;border-radius:2px;background:var(--ks-line);overflow:hidden}
.ks-conf-bar i{display:block;height:100%;background:var(--ks-ok);transform-origin:left;animation:ks-grow .8s var(--ks-ease) both}
@keyframes ks-grow{from{transform:scaleX(0)}}
.ks-conf-n{font-size:.74rem;color:var(--ks-ink-2);min-width:42px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ks-fl-r.ks-low .ks-conf-bar i{background:var(--ks-warn)}

.ks-q{display:flex;gap:10px;align-items:baseline;padding:14px 16px 4px;font-size:.88rem}
.ks-q-l{color:var(--ks-ink-2);font-size:.8rem}
.ks-q-t{min-height:1.2em;font-weight:500}
.ks-typing::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--ks-acc);vertical-align:-2px;margin-left:2px;animation:ks-blink .9s steps(2) infinite}
@keyframes ks-blink{50%{opacity:0}}
.ks-q-s{padding:2px 16px 12px;font-size:.84rem;color:var(--ks-ink-2);display:flex;gap:8px;align-items:center;min-height:32px}
.ks-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--ks-line-2);border-top-color:var(--ks-acc);animation:ks-spin .8s linear infinite}
@keyframes ks-spin{to{transform:rotate(360deg)}}
.ks-rec{margin:0 16px 16px;border-radius:12px;background:var(--ks-soft);animation:ks-rise .5s var(--ks-ease) both}
.ks-rec-h{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px 4px}
.ks-rec-h b{font-size:1rem}
.ks-rec-d{margin:0;padding:4px 14px 10px}
.ks-rec-r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--ks-line);animation:ks-rise .4s var(--ks-ease) both}
.ks-rec-r:last-child{border-bottom:0}
.ks-rec-r dt{font-size:.8rem;color:var(--ks-ink-2)}
.ks-rec-r dd{margin:0;font-weight:500;overflow-wrap:anywhere}

.ks-pill{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.ks-pill.ks-ok{background:var(--ks-ok-soft);color:var(--ks-ok)}
.ks-pill.ks-warn,.ks-pill.ks-bad{background:var(--ks-warn-soft);color:var(--ks-warn)}

.ks-tbl-w{overflow-x:auto}
.ks-tbl{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.ks-tbl th{text-align:left;font-weight:500;font-size:.76rem;color:var(--ks-ink-2);padding:12px 16px 8px;border-bottom:1px solid var(--ks-line);white-space:nowrap}
.ks-tbl td{padding:10px 16px;border-bottom:1px solid var(--ks-line);vertical-align:top}
.ks-tbl tr{animation:ks-rise .45s var(--ks-ease) both}
.ks-tbl tbody tr:last-child td{border-bottom:0}
.ks-tbl .ks-n{text-align:right;white-space:nowrap}
.ks-tbl-foot{padding:12px 16px;border-top:1px solid var(--ks-line);font-weight:600;font-size:.86rem}

.ks-ck{list-style:none;padding:12px 16px;display:grid;gap:10px}
.ks-ck li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;animation:ks-rise .45s var(--ks-ease) both}
.ks-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.ks-ic.ks-ok{background:var(--ks-ok-soft);color:var(--ks-ok)}
.ks-ic.ks-warn,.ks-ic.ks-bad{background:var(--ks-warn-soft);color:var(--ks-warn)}
.ks-verdict{margin:0 16px 16px;padding:12px 14px;border-radius:12px;font-weight:600;animation:ks-rise .5s var(--ks-ease) both}
.ks-verdict.ks-ok{background:var(--ks-ok-soft);color:var(--ks-ok)}
.ks-verdict.ks-warn{background:var(--ks-warn-soft);color:var(--ks-warn)}

.ks-calc{padding:8px 16px 4px}
.ks-calc-r{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--ks-line);animation:ks-rise .4s var(--ks-ease) both}
.ks-calc-r b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ks-calc-res{margin:12px 16px 16px;padding:16px 18px;border-radius:12px;background:var(--ks-acc-soft);animation:ks-rise .55s var(--ks-ease) both}
.ks-calc-res .ks-big{font-weight:800;font-size:1.8rem;line-height:1.1;letter-spacing:-.03em;color:var(--ks-acc)}
.ks-calc-res .ks-sub{font-size:.86rem;color:var(--ks-ink-2);margin-top:4px}

/* Belege: bleiben in beiden Ansichten weiss wie Papier */
.ks-doc-st{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ks-ink-2)}
.ks-paper{background:#fff;color:var(--ks-p-ink);border:1px solid var(--ks-line);border-radius:10px;box-shadow:var(--shadow-sm);padding:28px 30px;font-size:.8rem;line-height:1.5;max-width:640px;position:relative;overflow:hidden}
.ks-pp-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ks-pp-logo{font-weight:900;font-size:1.15rem;letter-spacing:.04em}
.ks-pp-logo span{display:block;font-weight:400;font-size:.7rem;letter-spacing:0;color:var(--ks-p-muted)}
.ks-pp-meta{text-align:right;color:var(--ks-p-muted);font-size:.74rem}
.ks-pp-meta b{color:var(--ks-p-ink)}
.ks-pp-addr{margin-top:18px;font-size:.76rem}
.ks-pp-title{font-weight:800;font-size:1.05rem;margin-top:18px}
.ks-pp-intro{margin:4px 0 12px}
.ks-pp-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ks-pp-t th{text-align:left;font-weight:600;font-size:.68rem;color:var(--ks-p-muted);border-bottom:1.5px solid var(--ks-p-ink);padding:4px 6px}
.ks-pp-t td{padding:6px;border-bottom:1px solid color-mix(in srgb,var(--ks-p-ink) 10%,transparent);vertical-align:top}
.ks-pp-t tr{animation:ks-rise .4s var(--ks-ease) both}
.ks-pp-t .ks-n{text-align:right;white-space:nowrap}
.ks-pp-t small{display:block;color:var(--ks-p-muted);font-size:.68rem}
.ks-pp-sum{margin-left:auto;width:min(300px,100%);margin-top:10px;display:grid;gap:2px;animation:ks-rise .5s var(--ks-ease) both;font-variant-numeric:tabular-nums}
.ks-pp-sum div{display:flex;justify-content:space-between;gap:12px}
.ks-pp-sum .ks-tot{border-top:1.5px solid var(--ks-p-ink);padding-top:4px;margin-top:4px;font-weight:700;font-size:.86rem}
.ks-pp-foot{margin-top:14px;color:var(--ks-p-muted);font-size:.72rem;animation:ks-rise .5s var(--ks-ease) both}
.ks-ocr{position:relative;border-radius:3px;transition:box-shadow .35s,background .35s}
.ks-ocr.ks-on{box-shadow:0 0 0 1.5px var(--ks-p-acc);background:color-mix(in srgb,var(--ks-p-acc) 9%,transparent)}
.ks-ocr.ks-on.ks-bad{box-shadow:0 0 0 1.5px #9A5B00;background:color-mix(in srgb,#9A5B00 10%,transparent)}
.ks-ocr::after{content:attr(data-l);position:absolute;left:-1px;bottom:calc(100% + 3px);font-size:.62rem;font-weight:600;line-height:1;padding:3px 6px;background:var(--ks-p-acc);color:#fff;border-radius:999px;white-space:nowrap;opacity:0;transform:translateY(3px);transition:all .35s;pointer-events:none}
.ks-ocr.ks-bad::after{background:#9A5B00}
.ks-ocr.ks-on::after{opacity:1;transform:none}
.ks-scan{position:absolute;left:0;right:0;top:0;height:60px;background:color-mix(in srgb,var(--ks-p-acc) 6%,transparent);border-bottom:1.5px solid var(--ks-p-acc);animation:ks-scan 1.6s var(--ks-ease) forwards;pointer-events:none}
@keyframes ks-scan{from{transform:translateY(-60px)}to{transform:translateY(560px);opacity:0}}

/* Telefonat */
.ks-call-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px}
.ks-call-av{width:44px;height:44px;border-radius:50%;background:var(--ks-acc);color:var(--ks-on-acc);display:grid;place-items:center}
.ks-call-av svg{width:20px;height:20px}
.ks-call-av.ks-ring{animation:ks-ring 1.1s ease-in-out infinite}
@keyframes ks-ring{0%,100%{box-shadow:0 0 0 0 var(--ks-acc-soft)}50%{box-shadow:0 0 0 12px var(--ks-acc-soft)}}
.ks-call-st{font-size:.8rem;color:var(--ks-ink-2)}
.ks-call-n{font-weight:600}
.ks-wave{display:flex;gap:3px;align-items:center;height:30px}
.ks-wave i{display:block;width:3px;height:4px;border-radius:2px;background:var(--ks-line-2)}
.ks-wave.ks-live i{background:var(--ks-acc);animation:ks-wv .7s ease-in-out infinite alternate}
@keyframes ks-wv{from{height:4px}to{height:var(--h,22px)}}
.ks-tr{padding:4px 16px 18px;display:grid;gap:10px}
.ks-bub{max-width:86%;padding:11px 15px;border-radius:18px;font-size:.92rem;line-height:1.5;animation:ks-rise .45s var(--ks-ease) both}
.ks-bub small{display:block;font-size:.7rem;font-weight:600;margin-bottom:3px;opacity:.7}
.ks-bub.ks-caller{background:var(--ks-soft);border-bottom-left-radius:6px}
.ks-bub.ks-bot{justify-self:end;background:var(--ks-acc);color:var(--ks-on-acc);border-bottom-right-radius:6px}
.ks-bub.ks-old{opacity:.55}

/* Karte */
.ks-map{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.ks-map svg{display:block;width:100%;height:auto;background:var(--ks-soft)}
.ks-m-street{stroke:var(--ks-line-2);stroke-width:7;stroke-linecap:round;opacity:.5}
.ks-m-name{fill:var(--ks-ink-2);font-size:9.5px}
.ks-m-route{fill:none;stroke:var(--ks-acc);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.6s var(--ks-ease)}
.ks-m-stop circle{fill:var(--ks-bg);stroke:var(--ks-ink-2);stroke-width:1.5}
.ks-m-stop text{fill:var(--ks-ink);font-size:9px;text-anchor:middle}
.ks-m-stop{opacity:0;transition:opacity .4s}
.ks-m-stop.ks-on{opacity:1}
.ks-m-veh rect{fill:var(--ks-acc)}
.ks-m-veh text{fill:var(--ks-bg);font-size:10px;font-weight:600;text-anchor:middle}
.ks-m-pulse{fill:none;stroke:var(--ks-acc);stroke-width:2;animation:ks-pulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ks-pulse{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}
.ks-m-house path{fill:var(--ks-ink)}
.ks-m-house text{fill:var(--ks-ink);font-size:10.5px;font-weight:600}
.ks-m-dist rect{fill:var(--ks-bg);stroke:var(--ks-acc)}
.ks-m-dist text{fill:var(--ks-acc);font-size:10.5px;font-weight:600;text-anchor:middle}
.ks-m-flake{fill:var(--ks-line-2)}
.ks-map .ks-rec-d{padding:10px 16px}

/* Foto */
.ks-photo{display:block;width:100%;height:auto;border-radius:10px}
.ks-photo-w{padding:16px}
.ks-photo-w .ks-photo{width:min(100%,560px);margin-inline:auto}
.ks-bx{opacity:0;transition:opacity .45s}
.ks-bx.ks-on{opacity:1}

/* Messenger */
.ks-chat{padding:16px;display:grid;gap:10px;background:var(--ks-soft)}
.ks-chat .ks-bub{background:var(--ks-bg);max-width:min(420px,100%)}
.ks-chat .ks-bub .ks-photo{margin-bottom:8px}
.ks-dots{display:inline-flex;gap:4px;padding:12px 14px;background:var(--ks-bg);border-radius:18px;width:max-content}
.ks-dots i{width:6px;height:6px;border-radius:50%;background:var(--ks-ink-2);animation:ks-dt 1s infinite}
.ks-dots i:nth-child(2){animation-delay:.15s}.ks-dots i:nth-child(3){animation-delay:.3s}
@keyframes ks-dt{0%,100%{opacity:.3}50%{opacity:1}}

/* Kalender */
.ks-cal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;padding:16px;overflow-x:auto}
.ks-cal-d h5{margin:0 0 8px;font-size:.8rem;font-weight:600;color:var(--ks-ink-2)}
.ks-slot{display:grid;grid-template-columns:44px 1fr;gap:6px;font-size:.8rem;padding:7px 9px;border-radius:10px;margin-bottom:4px;background:var(--ks-soft);transition:background .3s,color .3s}
.ks-slot b{font-weight:600;font-variant-numeric:tabular-nums}
.ks-slot.ks-busy{color:var(--ks-ink-2);opacity:.6}
.ks-slot.ks-scan-on{background:var(--ks-line)}
.ks-slot.ks-pick.ks-on{background:var(--ks-acc);color:var(--ks-on-acc);font-weight:600}

/* Freigabe */
.ks-dec{border:1.5px solid var(--ks-acc);border-radius:14px;background:var(--ks-bg);overflow:hidden}
.ks-dec-h{padding:16px 16px 4px;font-weight:700;font-size:1.02rem}
.ks-dec .ks-rec-d{padding:4px 16px 8px}
.ks-dec-a{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:8px 16px 16px}
.ks-dec-btn{border:0;cursor:pointer;padding:11px 20px;border-radius:999px;background:var(--ks-acc);color:var(--ks-on-acc);font-weight:600;font-size:.9rem;animation:ks-ring 1.4s ease-in-out infinite}
.ks-dec-btn:disabled{animation:none;background:var(--ks-ok-soft);color:var(--ks-ok);cursor:default}
.ks-dec-btn:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px}
.ks-dec-alt{font-size:.8rem;color:var(--ks-ink-2)}
.ks-dec-s{padding:11px 16px;border-top:1px solid var(--ks-line);font-size:.84rem;color:var(--ks-warn);font-weight:500}
.ks-dec-s.ks-ok{color:var(--ks-ok)}

/* Versand */
.ks-snd{padding:14px 16px;display:grid;gap:4px;font-size:.88rem}
.ks-snd div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px}
.ks-snd span{color:var(--ks-ink-2);font-size:.8rem}
.ks-snd-b{white-space:pre-wrap;font-size:.9rem;line-height:1.65;padding:12px 16px 14px;border-top:1px solid var(--ks-line);min-height:2em}
.ks-snd-st{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--ks-line);font-size:.86rem;font-weight:600}
.ks-snd-st.ks-ok{color:var(--ks-ok)}
.ks-extra{list-style:none;padding:4px 16px 16px;display:grid;gap:8px;font-size:.86rem}
.ks-extra li{display:grid;grid-template-columns:22px 1fr;gap:8px;animation:ks-rise .45s var(--ks-ease) both}
.ks-extra li::before{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--ks-ok-soft);color:var(--ks-ok);display:grid;place-items:center;font-size:.7rem;font-weight:700;margin-top:2px}

/* Protokoll */
.ks-log{list-style:none;padding:8px 16px 14px;display:grid}
.ks-log li{display:grid;grid-template-columns:48px 150px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--ks-line);font-size:.86rem;animation:ks-rise .45s var(--ks-ease) both}
.ks-log li:last-child{border-bottom:0}
.ks-log time{font-size:.78rem;color:var(--ks-ink-2);padding-top:1px;font-variant-numeric:tabular-nums}
.ks-log b{font-weight:600}
.ks-log li.ks-later{background:var(--ks-acc-soft);margin-top:6px;border-radius:12px;padding:10px 12px;border-bottom:0}

/* Notizen und Entwuerfe */
.ks-note{padding:14px 16px;display:grid;gap:8px}
.ks-note p{font-size:.92rem;min-height:1.4em}
.ks-drafts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;padding:16px}
.ks-draft{border-radius:12px;padding:12px 14px;background:var(--ks-soft);font-size:.86rem}
.ks-draft small{display:block;font-size:.74rem;color:var(--ks-ink-2);margin-bottom:6px}
.ks-draft .ks-tone{float:right}

/* Ergebnis */
.ks-result{padding:4px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.ks-res-k{font-size:.8rem;font-weight:600;color:var(--ks-acc)}
.ks-bars{display:grid;gap:14px;margin-top:14px}
.ks-bar-l{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;margin-bottom:6px}
.ks-bar-l b{font-weight:600;font-variant-numeric:tabular-nums}
.ks-bar{height:8px;border-radius:4px;background:var(--ks-soft);overflow:hidden}
.ks-bar i{display:block;height:100%;width:0;border-radius:4px;transition:width 1.4s var(--ks-ease)}
.ks-bar.ks-man i{background:var(--ks-line-2)}
.ks-bar.ks-kib i{background:var(--ks-acc)}
.ks-pts{list-style:none;margin-top:12px;display:grid;gap:10px}
.ks-pts li{position:relative;padding-left:26px;font-size:.95rem;color:var(--ks-ink);animation:ks-rise .5s var(--ks-ease) both}
.ks-pts li:nth-child(2){animation-delay:.12s}.ks-pts li:nth-child(3){animation-delay:.24s}
.ks-pts li::before{content:"✓";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--ks-ok-soft);color:var(--ks-ok);display:grid;place-items:center;font-size:.68rem;font-weight:700}
.ks-res-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}

/* Drei Aussagen unter der Buehne */
.ks-why{padding-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ks-why h3{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.ks-why p{color:var(--ks-ink-2);font-size:.95rem}
.ks-foot{margin-top:32px;color:var(--ks-ink-2);font-size:.8rem;text-align:center}

@media (max-width:980px){
  .ks-fallback{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-seg-w{justify-content:flex-start}
  .ks-grid{grid-template-columns:1fr;min-height:0}
  .ks-detail,.ks-steps{grid-column:auto;grid-row:auto}
  .ks-steps{border-right:0;border-top:1px solid var(--ks-line);padding:16px}
  .ks-steps ol{display:none}
  .ks-controls{margin-top:0}
  .ks-result{grid-template-columns:1fr;gap:24px}
  .ks-why{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .ks-fallback{grid-template-columns:1fr}
  .ks-top{padding:22px 18px 0}
  .ks-strip-scroll{padding:22px 18px 18px}
  .ks-strip{justify-content:flex-start}
  .ks-node{width:84px}
  .ks-node::after{width:calc(100% - 36px);left:calc(50% + 28px)}
  .ks-detail{padding:22px 18px 24px}
  .ks-sum{padding:16px 18px}
  .ks-fl-r{grid-template-columns:1fr auto;gap:2px 12px}
  .ks-fl-l{grid-column:1/-1}
  .ks-rec-r{grid-template-columns:1fr;gap:0}
  .ks-map{grid-template-columns:1fr}
  .ks-log li{grid-template-columns:44px minmax(0,1fr)}
  .ks-log li span{grid-column:2}
  .ks-paper{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){
  .kisim *,.kisim *::before,.kisim *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Systemfenster heller und klarer: weisse Karten auf weicher Flaeche, Kopfzeile in der Hauptfarbe */
.ks-detail{background:var(--ks-soft)}
[data-theme="dark"] .kisim .ks-detail{background:var(--bg)}
.ks-sv,.ks-dec{background:var(--ks-bg);border-color:var(--ks-line);box-shadow:0 1px 2px color-mix(in srgb,var(--ks-ink) 6%,transparent),0 12px 32px -18px color-mix(in srgb,var(--ks-ink) 35%,transparent)}
.ks-sv-bar{background:var(--ks-acc-soft);color:var(--ks-acc);font-weight:600;border-bottom-color:transparent}
.ks-sv-bar>span:first-child{display:inline-flex;align-items:center;gap:8px}
.ks-sv-bar>span:first-child::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ks-acc);box-shadow:0 0 0 3px var(--ks-acc-soft)}
.ks-sv-bar>span:last-child{color:var(--ks-ink-2);font-weight:500}
.ks-bar{background:var(--ks-line)}

/* Blickfuehrung: das Wichtige leuchtet kurz auf, der Rest tritt zurueck */
.ks-key{animation:ks-glow 1.3s ease-out 2;border-radius:10px}
@keyframes ks-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ks-acc) 45%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.ks-tbl tr.ks-key{animation:none}
.ks-tbl tr.ks-key td{background:var(--ks-acc-soft);animation:ks-tint 1.3s ease-out 2}
.ks-tbl tr.ks-key td:first-child{box-shadow:inset 3px 0 0 var(--ks-acc)}
@keyframes ks-tint{50%{background:color-mix(in srgb,var(--ks-acc) 22%,transparent)}}
.ks-fl-r.ks-key,.ks-log li.ks-key{background:var(--ks-acc-soft);padding-inline:10px;border-bottom-color:transparent}
.ks-rec-h.ks-key,.ks-snd-st.ks-key{background:var(--ks-acc-soft)}
.ks-tot.ks-key{background:color-mix(in srgb,var(--ks-p-acc) 10%,transparent);padding-inline:6px}
.ks-spot :is(.ks-tbl tbody tr,.ks-fl-r,.ks-ck li,.ks-calc-r,.ks-log li,.ks-bub,.ks-rec-r):not(.ks-key){opacity:.42;transition:opacity .7s var(--ks-ease)}

/* Kette: durchlaufene Strecke in der Hauptfarbe, aktuelle Strecke fliesst */
.ks-node.ks-pass::after{background:var(--ks-acc);height:2px}
.ks-node.ks-flow::after{height:2px;background:repeating-linear-gradient(90deg,var(--ks-acc) 0 5px,transparent 5px 11px);background-size:22px 2px;animation:ks-flowmv .5s linear infinite}
@keyframes ks-flowmv{to{background-position:22px 0}}
.ks-node.ks-bump .ks-node-ic{animation:ks-bump .55s var(--ks-ease)}
@keyframes ks-bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1.08)}}

/* Schritte: Haekchen springt rein, laufender Schritt fuellt sich */
.ks-st.ks-done .ks-st-n{animation:ks-pop .45s var(--ks-ease)}
@keyframes ks-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.ks-st::after{content:"";position:absolute;left:48px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--ks-acc);transform:scaleX(0);transform-origin:left;opacity:0}
.ks-st.ks-run::after{opacity:1;animation:ks-fill 5s cubic-bezier(.1,.6,.3,1) forwards}
@keyframes ks-fill{from{transform:scaleX(0)}to{transform:scaleX(.92)}}

/* Ergebnis: grosses Haekchen, das sich zeichnet */
.ks-bigcheck{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-size:1.05rem;color:var(--ks-ink-2)}
.ks-bigcheck b{color:var(--ks-ok);font-weight:700}
.ks-bigcheck svg{width:52px;height:52px;flex:0 0 52px;fill:none;stroke:var(--ks-ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ks-bigcheck circle{fill:var(--ks-ok-soft);stroke-dasharray:145;stroke-dashoffset:145;animation:ks-draw .7s var(--ks-ease) forwards}
.ks-bigcheck path{stroke-dasharray:40;stroke-dashoffset:40;animation:ks-draw .45s var(--ks-ease) .55s forwards}
@keyframes ks-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .ks-bigcheck circle,.ks-bigcheck path{stroke-dashoffset:0}
}

/* Ruhiger: Fenster ohne Rahmenlinie, Markierungen als weiche Flaeche statt Unterstrich */
.ks-sv,.ks-dec{border:0}
.ks-dec{box-shadow:0 0 0 1.5px var(--ks-acc),0 12px 32px -18px color-mix(in srgb,var(--ks-ink) 35%,transparent)}
.ks-sv-bar{border-radius:0}
.ks-mail-b{border-top:0;padding-top:4px}
.ks-mail-h{padding-bottom:10px;border-bottom:1px solid var(--ks-line)}
.ks-mk{padding:1px 3px;margin:0 -1px;border-radius:5px}
.ks-mk.ks-on{background:color-mix(in srgb,var(--ks-acc) 16%,transparent);box-shadow:none;color:var(--ks-ink)}
.ks-ocr.ks-on{box-shadow:none;background:color-mix(in srgb,var(--ks-p-acc) 14%,transparent)}
.ks-ocr.ks-on.ks-bad{box-shadow:none;background:color-mix(in srgb,#9A5B00 16%,transparent)}
.ks-tbl tr.ks-key td:first-child{box-shadow:none}

/* Schrittwechsel: Buehne hebt sich kurz an, alte Ansicht blendet aus */
.ks-stage.ks-zoom{animation:ks-zoom .7s var(--ks-ease)}
@keyframes ks-zoom{0%{transform:none}40%{transform:scale(1.006);box-shadow:var(--shadow)}100%{transform:none}}
.ks-view.ks-leave>*{opacity:0;transform:translateY(-4px) scale(.99);filter:blur(2px);transition:opacity .2s ease-in,transform .2s ease-in,filter .2s ease-in;animation:none}

/* Beim Nachfuellen gleiten Zeilen von unten ein: ohne diese Zeile blitzt rechts kurz eine Bildlaufleiste auf */
.ks-tbl-w,.ks-cal,.ks-strip-scroll,.ks-seg{overflow-y:hidden}
.ks-tbl .ks-short{white-space:nowrap}
.ks-tbl .ks-empty{color:var(--ks-line-2)}
.ks-tbl tr,.ks-pp-t tr{animation-name:ks-fade}
@keyframes ks-fade{from{opacity:0}to{opacity:1}}

/* Nichts am Rand abschneiden: Leuchten nach innen, Beschriftungen am rechten Belegrand nach links */
@keyframes ks-glow{0%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ks-acc) 70%,transparent)}100%{box-shadow:inset 0 0 0 2px transparent}}
.ks-pp-meta .ks-ocr::after{left:auto;right:-1px}
.ks-seg-mark{box-shadow:0 1px 3px color-mix(in srgb,var(--ks-ink) 14%,transparent)}
.ks-ctl.ks-attn,.ks-dec-btn:not(:disabled),.ks-call-av.ks-ring{animation-name:ks-ring-in}
@keyframes ks-ring-in{0%,100%{box-shadow:0 0 0 0 var(--ks-acc-soft)}50%{box-shadow:0 0 0 7px var(--ks-acc-soft)}}
/* Hervorgehobene Zeilen als Insel: Abstand zu den Trennlinien statt Flaeche bis an die Linie */
.ks-fl-r.ks-key,.ks-log li.ks-key{margin:6px -8px;padding:10px 12px;border-radius:12px;border-bottom-color:transparent}
.ks-fl-r:has(+ .ks-key),.ks-log li:has(+ .ks-key){border-bottom-color:transparent}
.ks-tbl tr.ks-key td{box-shadow:inset 0 5px 0 var(--ks-bg),inset 0 -5px 0 var(--ks-bg);border-bottom-color:transparent}
.ks-tbl tr:has(+ tr.ks-key) td{border-bottom-color:transparent}
.ks-snd-st.ks-key{margin:4px 12px 12px;border-top:0;border-radius:12px}
.ks-rec-h.ks-key{border-radius:12px 12px 0 0}

/* Hinweis an Stellen, an denen der Besucher selbst klicken soll */
.ks-hint{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--ks-acc)}
.ks-hint svg{width:18px;height:18px;animation:ks-nudge 1s ease-in-out infinite}
@keyframes ks-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.ks-dec-alt{padding:0 16px 14px;margin-top:-6px}
.ks-wait{margin:14px 4px 0;padding:12px 14px;border-radius:12px;background:var(--ks-acc-soft);color:var(--ks-ink);font-size:.86rem;line-height:1.45;text-align:center;animation:ks-rise .45s var(--ks-ease) both}
.ks-wait b{display:block;color:var(--ks-acc);margin-bottom:2px}
/* Text der hervorgehobenen Feldzeile bleibt in der Flucht der anderen Zeilen */
.ks-fl-r.ks-key{padding-inline:8px}
.ks-res-hint{margin-top:20px;padding:12px 14px;border-radius:12px;background:var(--ks-acc-soft);font-size:.86rem;color:var(--ks-ink);line-height:1.45}
.ks-res-hint b{color:var(--ks-acc)}
.ks-res-hint+.ks-res-a{margin-top:12px}

/* Tipps fuer Besucher: was man selbst anklicken kann */
.ks-seg-w{flex-direction:column;align-items:center;gap:10px}
.ks-seg-l{font-size:.82rem;font-weight:600;color:var(--ks-ink-2)}
.ks-tip{margin:12px 4px 0;font-size:.8rem;line-height:1.45;color:var(--ks-ink-2);text-align:center}
.ks-tip b{color:var(--ks-ink);font-weight:600}
@media (max-width:980px){.ks-seg-w{align-items:flex-start}}