/* KTB Prozessgrafik „So arbeiten wir" – WordPress-Fassung (Über uns). Port von Projekt 1 (.pf-*), Schriften der
   aktuellen Seite (Roboto / Roboto Slab), Farben KTB. Alle Regeln unter .ktb-pf, damit Elementor nichts überschreibt. */
.ktb-pf{--bg:#F6F4EE;--surface:#fff;--surface-2:#FAF8F3;--ink:#141312;--ink-2:#5E5B54;--ink-3:#8A8781;--line:#E0DBCD;--red:#DB0123;--red-deep:#B3001C;--red-soft:#FBE2E5;--img-bg:#EFEBE2;--inverse:#141312;--r:20px;--rc:14px;--ease:cubic-bezier(.16,1,.3,1);
  font-family:Roboto,Arial,sans-serif;color:var(--ink);padding:clamp(56px,7vw,96px) 0;scroll-margin-top:90px;-webkit-font-smoothing:antialiased}
.ktb-pf *,.ktb-pf *::before,.ktb-pf *::after{box-sizing:border-box}
.ktb-pf__in{max-width:1140px;margin:0 auto;padding:0 20px}
.ktb-pf .pf-head{display:grid;grid-template-columns:6fr 5fr;gap:60px;align-items:end}
.ktb-pf .pf-kick{margin:0 0 14px;color:var(--red);font:700 14px/20px Roboto,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.ktb-pf .pf-h2{margin:0;font:700 clamp(30px,3.6vw,50px)/1.04 "Roboto Slab",Georgia,serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.ktb-pf .pf-h2 em{font-style:normal;color:var(--red);display:block}
.ktb-pf .pf-lead{margin:0;font:400 17px/1.65 Roboto,Arial,sans-serif;color:#4a4642}
.ktb-pf .pf-card{position:relative;margin-top:40px}
.ktb-pf .pf-stage-scroll{border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.ktb-pf .pf-stage{position:relative;aspect-ratio:800/440}
.ktb-pf .pf-stage svg{display:block;width:100%;height:100%;overflow:visible}
.ktb-pf .pf-ground line{stroke:var(--line);stroke-width:.6;opacity:.7}
.ktb-pf .pf-route{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:3 6;stroke-linecap:round;opacity:.55}
.ktb-pf .pf-arrow{fill:var(--red);opacity:.55;stroke:var(--red);stroke-width:1;stroke-linejoin:round}
.ktb-pf .pf-box polygon{stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:.5;stroke-linejoin:round}
.ktb-pf .pf-red .f-t{fill:var(--red)}.ktb-pf .pf-red .f-l{fill:var(--red-deep)}.ktb-pf .pf-red .f-r{fill:color-mix(in srgb,var(--red-deep) 80%,var(--ink))}
.ktb-pf .pf-ink .f-t{fill:color-mix(in srgb,var(--ink) 80%,var(--surface))}.ktb-pf .pf-ink .f-l{fill:var(--ink)}.ktb-pf .pf-ink .f-r{fill:color-mix(in srgb,var(--ink) 85%,var(--ink-2))}
.ktb-pf .pf-white .f-t{fill:var(--surface)}.ktb-pf .pf-white .f-l{fill:var(--img-bg)}.ktb-pf .pf-white .f-r{fill:var(--line)}
.ktb-pf .pf-paper .f-t{fill:#F4F1EA}.ktb-pf .pf-paper .f-l{fill:var(--line)}.ktb-pf .pf-paper .f-r{fill:color-mix(in srgb,var(--line) 80%,var(--ink-3))}
.ktb-pf .pf-wood .f-t{fill:color-mix(in srgb,var(--img-bg) 70%,var(--ink-3))}.ktb-pf .pf-wood .f-l{fill:color-mix(in srgb,var(--img-bg) 45%,var(--ink-3))}.ktb-pf .pf-wood .f-r{fill:color-mix(in srgb,var(--img-bg) 30%,var(--ink-3))}
.ktb-pf .pf-carton .f-t{fill:#D8B98A}.ktb-pf .pf-carton .f-l{fill:#C29F6C}.ktb-pf .pf-carton .f-r{fill:#A98657}
.ktb-pf .pf-tape{fill:var(--red)}
.ktb-pf .pf-roof{fill:color-mix(in srgb,var(--line) 70%,var(--ink-3));stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:.5}
.ktb-pf .pf-glass{fill:color-mix(in srgb,var(--ink-2) 55%,var(--surface))}
.ktb-pf .pf-door{fill:color-mix(in srgb,var(--ink-3) 70%,var(--line))}
.ktb-pf .pf-window{fill:color-mix(in srgb,var(--ink-2) 35%,var(--surface))}
.ktb-pf .pf-screen{fill:var(--surface);animation:pf-screen-glow 4.7s steps(1) infinite}
.ktb-pf .pf-screen-1{animation-duration:5.3s;animation-delay:-1.7s}
.ktb-pf .pf-screen-2{animation-duration:4.1s;animation-delay:-2.8s}
.ktb-pf .pf-screen-3{animation-duration:5.9s;animation-delay:-.9s}
@keyframes pf-screen-glow{0%,27%,53%,83%,100%{fill:#fff}28%,52%,84%,96%{fill:#DB0123}}

.ktb-pf .pf-face{fill:color-mix(in srgb,var(--ink-2) 50%,var(--img-bg))}
.ktb-pf .pf-wheel{fill:var(--ink)}
.ktb-pf .pf-txt{font-family:Poppins,Roboto,Arial,sans-serif;font-weight:900;letter-spacing:-.02em}
.ktb-pf .pf-txt.on-red{fill:var(--surface)}
.ktb-pf .pf-txt.on-grey{fill:var(--ink);font-weight:800}
.ktb-pf .pf-txt.pf-center{text-anchor:middle;dominant-baseline:central}
.ktb-pf .pf-st{transition:opacity .35s var(--ease)}
.ktb-pf .pf-stage:not([data-active=""]) .pf-st{opacity:.35}
.ktb-pf .pf-stage[data-active=kunde] [data-st=kunde],.ktb-pf .pf-stage[data-active=buero] [data-st=buero],.ktb-pf .pf-stage[data-active=lieferanten] [data-st=lieferanten],.ktb-pf .pf-stage[data-active=lager] [data-st=lager],.ktb-pf .pf-stage[data-active=lieferung] [data-st=lieferung]{opacity:1}
.ktb-pf .pf-point{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:transparent;padding:0;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.ktb-pf .pf-point::before{content:"";position:absolute;inset:13px;border-radius:999px;background:var(--red);border:3px solid var(--surface);box-shadow:0 2px 10px color-mix(in srgb,var(--red) 45%,transparent);transition:transform .35s var(--ease)}
.ktb-pf .pf-ring{position:absolute;inset:8px;border-radius:999px;border:2px solid var(--red);animation:pf-pulse 1.8s var(--ease) infinite}
@keyframes pf-pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.ktb-pf .pf-point:hover::before,.ktb-pf .pf-point.is-active::before{transform:scale(1.25)}
.ktb-pf .pf-point:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:999px}
.ktb-pf .pf-tag{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-2px);white-space:nowrap;background:var(--surface);color:var(--ink);font:700 12px/1 Roboto,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:11px 13px;border-radius:4px;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--ink) 40%,transparent);transition:background .35s var(--ease),color .35s var(--ease)}
.ktb-pf .pf-tag b{color:var(--red);margin-inline-end:4px}
.ktb-pf .pf-point:hover .pf-tag,.ktb-pf .pf-point.is-active .pf-tag{background:var(--red);color:var(--surface)}
.ktb-pf .pf-point:hover .pf-tag b,.ktb-pf .pf-point.is-active .pf-tag b{color:var(--surface)}
.ktb-pf .pf-legend{position:absolute;left:20px;bottom:18px;display:flex;gap:16px;font:700 12px/1 Roboto,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.ktb-pf .pf-legend span{display:flex;align-items:center;gap:8px}
.ktb-pf .pf-legend i{width:12px;height:12px;border-radius:3px;background:var(--line)}
.ktb-pf .pf-legend i.is-red{background:var(--red)}
.ktb-pf .pf-tour{position:absolute;top:18px;right:20px;z-index:3;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:4px;background:var(--surface);color:var(--ink);text-decoration:none;font:700 14px/1 Roboto,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--ink) 40%,transparent);transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.ktb-pf .pf-tour svg{color:var(--red);transition:color .35s var(--ease);flex:none}
.ktb-pf .pf-tour:hover,.ktb-pf .pf-tour:focus-visible{background:var(--red);color:#fff;transform:translateY(-2px)}
.ktb-pf .pf-tour:hover svg,.ktb-pf .pf-tour:focus-visible svg{color:#fff}
.ktb-pf .pf-tour:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ktb-pf .pf-overlay{position:absolute;inset:0;z-index:20;border-radius:var(--r);background:color-mix(in srgb,var(--ink) 60%,transparent);display:flex;align-items:center;justify-content:center;padding:16px;animation:pf-fade .3s var(--ease)}
.ktb-pf .pf-overlay[hidden]{display:none}
.ktb-pf .pf-pop{position:relative;width:min(640px,90%);max-height:100%;overflow-y:auto;background:var(--surface);border-radius:var(--rc);padding:36px 40px;box-shadow:0 24px 60px -20px color-mix(in srgb,var(--ink) 50%,transparent);animation:pf-pop-in .3s var(--ease);outline:none}
.ktb-pf .pf-pop[hidden]{display:none}
@keyframes pf-fade{from{opacity:0}}@keyframes pf-pop-in{from{opacity:0;transform:scale(.96)}}
.ktb-pf .pf-pop h3{margin:6px 0 10px;font:700 26px/1.1 "Roboto Slab",Georgia,serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}
.ktb-pf .pf-pop p{margin:0;font:400 16px/1.6 Roboto,Arial,sans-serif;color:var(--ink-2)}
.ktb-pf .pf-step{font:700 14px/1 Roboto,Arial,sans-serif;color:var(--red);letter-spacing:.14em}
.ktb-pf .pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.ktb-pf .pf-tags li{margin:0;font:700 12px/1.2 Roboto,Arial,sans-serif;letter-spacing:.02em;border:1px solid var(--line);border-radius:4px;padding:7px 11px;color:var(--ink)}
.ktb-pf .pf-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:4px;border:0;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ktb-pf .pf-close:hover,.ktb-pf .pf-close:focus-visible{background:var(--red);color:#fff}
.ktb-pf .pf-close:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ktb-pf .pf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ktb-pf:lang(zh) .pf-h2,.ktb-pf:lang(zh) .pf-pop h3{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;letter-spacing:0}
@media(max-width:900px){
  .ktb-pf .pf-head{grid-template-columns:1fr;gap:18px}
  .ktb-pf .pf-stage-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ktb-pf .pf-stage{min-width:760px}
  .ktb-pf .pf-tour{position:static;display:flex;justify-content:center;width:100%;margin-top:14px;height:50px;background:var(--red);color:#fff}
  .ktb-pf .pf-tour svg{color:#fff}
  .ktb-pf .pf-overlay{padding:12px}
  .ktb-pf .pf-pop{width:100%;padding:26px 22px}
  .ktb-pf .pf-pop h3{font-size:22px;padding-right:40px}
}
@media(prefers-reduced-motion:reduce){.ktb-pf .pf-ring{animation:none;opacity:.5}.ktb-pf .pf-overlay,.ktb-pf .pf-pop{animation:none}.ktb-pf .pf-screen{animation:none;fill:#fff}}