/* Hero: original handoff animation and responsive layouts. */

html, body { margin: 0; padding: 0; }
body { background: #FFFFFF; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}


/* Prozesskette: original handoff animation and responsive layouts. */

@keyframes dcpDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes dcpTail{from{stroke-dashoffset:16}to{stroke-dashoffset:-84}}
@keyframes dcpTailS{from{stroke-dashoffset:7}to{stroke-dashoffset:-93}}
@keyframes dcpDot{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes dcpBox{0%{fill:#FFFFFF;stroke:#E6ECE9;transform:scale(1)}42%{fill:#2BBF78;stroke:#2BBF78;transform:scale(1.12)}100%{fill:#0E7A4E;stroke:#0E7A4E;transform:scale(1)}}
@keyframes dcpIco{0%{stroke:#C3CFC9}30%{stroke:#FFFFFF}100%{stroke:#FFFFFF}}
@keyframes dcpRing{0%{opacity:0;transform:scale(.78)}22%{opacity:.34}100%{opacity:0;transform:scale(1.75)}}
@keyframes dcpLift{from{opacity:.42}to{opacity:1}}
@keyframes dcpOut{from{opacity:1}to{opacity:0}}
@keyframes dcpPulseIn{from{opacity:0}to{opacity:1}}
@keyframes dcpShimmer{0%{stroke-dashoffset:10;opacity:0}4%{opacity:.4}13%{opacity:0}28%{stroke-dashoffset:-90;opacity:0}100%{stroke-dashoffset:-90;opacity:0}}
[data-dcp][data-state="run"] [data-anim]{animation-play-state:running!important}
[data-dcp][data-state="end"] [data-anim]{animation:none!important}
html:not(.has-diagram-motion) [data-dcp] [data-anim]{animation:none!important}
[data-dcp][data-shimmer="1"][data-state="run"] [data-el="shimmer"]{animation-play-state:running!important}
@media (prefers-reduced-motion:reduce){[data-dcp] [data-anim],[data-dcp] [data-el="shimmer"]{animation:none!important}}
@media (max-width:639px){[data-dcp] [data-lay="wide"]{display:none!important}[data-dcp] [data-lay="narrow"]{display:block!important}}
[data-dcp][data-layout="vertical"] [data-lay="wide"]{display:none!important}
[data-dcp][data-layout="vertical"] [data-lay="narrow"]{display:block!important}
[data-dcp][data-layout="horizontal"] [data-lay="wide"]{display:block!important}
[data-dcp][data-layout="horizontal"] [data-lay="narrow"]{display:none!important}
[data-dcp] a{color:#0E7A4E;text-decoration:none}
[data-dcp] a:hover{color:#2BBF78}


.hero-wordmark {
    display: block;
    height: auto;
    width: clamp(258px, 23vw, 352px);
    margin-bottom: 26px;
}

.hero-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}


/* process elements */
.process-div-1 {
    width:100%;
    background:transparent;
    padding:8px 0;
    box-sizing:border-box
}

.process-svg-1 {
    display:block;
    width:100%;
    height:auto;
    font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif
}

.process-dcpdraw-1 {
    animation:dcpDraw 1.32s cubic-bezier(.4,0,.6,1) .12s both;
    animation-play-state:paused
}

.process-dcpdraw-2 {
    animation:dcpDraw .78s cubic-bezier(.4,0,.6,1) 1.4s both;
    animation-play-state:paused
}

.process-dcpshimmer-1 {
    animation:dcpShimmer 8s linear 6.5s infinite;
    animation-play-state:paused
}

.process-dcpdot-1 {
    animation:dcpDot 1.32s cubic-bezier(.4,0,.6,1) .12s both,dcpOut .22s linear 1.4s both;
    animation-play-state:paused
}

.process-dcptail-1 {
    animation:dcpTail 1.32s cubic-bezier(.4,0,.6,1) .12s both,dcpOut .22s linear 1.4s both;
    animation-play-state:paused
}

.process-dcpdot-2 {
    opacity:0;
    animation:dcpDot .78s cubic-bezier(.4,0,.6,1) 1.4s both,dcpPulseIn .08s linear 1.4s forwards,dcpOut .28s linear 2.18s forwards;
    animation-play-state:paused
}

.process-dcptail-2 {
    opacity:0;
    animation:dcpTail .78s cubic-bezier(.4,0,.6,1) 1.4s both,dcpPulseIn .08s linear 1.4s forwards,dcpOut .28s linear 2.18s forwards;
    animation-play-state:paused
}

.process-dcpring-1 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpRing 1.1s cubic-bezier(.2,.6,.3,1) .12s both;
    animation-play-state:paused
}

.process-dcpbox-1 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) .12s both;
    animation-play-state:paused
}

.process-dcpico-1 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) .12s both;
    animation-play-state:paused
}

.process-dcplift-1 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .12s both;
    animation-play-state:paused
}

.process-dcplift-2 {
    font-size:16.5px;
    font-weight:500;
    letter-spacing:-.005em;
    animation:dcpLift .5s ease-out .12s both;
    animation-play-state:paused
}

.process-dcpring-2 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpRing 1.1s cubic-bezier(.2,.6,.3,1) .6s both;
    animation-play-state:paused
}

.process-dcpbox-2 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) .6s both;
    animation-play-state:paused
}

.process-dcpico-2 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) .6s both;
    animation-play-state:paused
}

.process-dcplift-3 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .6s both;
    animation-play-state:paused
}

.process-dcplift-4 {
    font-size:16.5px;
    font-weight:500;
    letter-spacing:-.005em;
    animation:dcpLift .5s ease-out .6s both;
    animation-play-state:paused
}

.process-dcpring-3 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpRing 1.1s cubic-bezier(.2,.6,.3,1) .83s both;
    animation-play-state:paused
}

.process-dcpbox-3 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) .83s both;
    animation-play-state:paused
}

.process-dcpico-3 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) .83s both;
    animation-play-state:paused
}

.process-dcplift-5 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .83s both;
    animation-play-state:paused
}

.process-dcplift-6 {
    font-size:16.5px;
    font-weight:500;
    letter-spacing:-.005em;
    animation:dcpLift .5s ease-out .83s both;
    animation-play-state:paused
}

.process-dcpring-4 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpRing 1.1s cubic-bezier(.2,.6,.3,1) 1.07s both;
    animation-play-state:paused
}

.process-dcpbox-4 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) 1.07s both;
    animation-play-state:paused
}

.process-dcpico-4 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) 1.07s both;
    animation-play-state:paused
}

.process-dcplift-7 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out 1.07s both;
    animation-play-state:paused
}

.process-dcplift-8 {
    font-size:16.5px;
    font-weight:500;
    letter-spacing:-.005em;
    animation:dcpLift .5s ease-out 1.07s both;
    animation-play-state:paused
}

.process-dcpring-5 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpRing 1.2s cubic-bezier(.2,.6,.3,1) 2.1s both;
    animation-play-state:paused
}

.process-dcpbox-5 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .56s cubic-bezier(.3,.8,.3,1) 2.1s both;
    animation-play-state:paused
}

.process-dcpico-5 {
    animation:dcpIco .56s cubic-bezier(.3,.8,.3,1) 2.1s both;
    animation-play-state:paused
}

.process-dcplift-9 {
    font-size:16.5px;
    font-weight:600;
    letter-spacing:-.005em;
    animation:dcpLift .55s ease-out 2.1s both;
    animation-play-state:paused
}

.process-dcplift-10 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11.5px;
    letter-spacing:.1em;
    animation:dcpLift .55s ease-out 2.1s both;
    animation-play-state:paused
}

.process-svg-2 {
    display:none;
    width:100%;
    height:auto;
    font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif
}

.process-dcptails-1 {
    animation:dcpTailS 1.32s cubic-bezier(.4,0,.6,1) .12s both,dcpOut .22s linear 1.4s both;
    animation-play-state:paused
}

.process-dcplift-11 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .12s both;
    animation-play-state:paused
}

.process-dcplift-12 {
    font-size:15.5px;
    font-weight:500;
    animation:dcpLift .5s ease-out .12s both;
    animation-play-state:paused
}

.process-dcpbox-6 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) .57s both;
    animation-play-state:paused
}

.process-dcpico-6 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) .57s both;
    animation-play-state:paused
}

.process-dcplift-13 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .57s both;
    animation-play-state:paused
}

.process-dcplift-14 {
    font-size:15.5px;
    font-weight:500;
    animation:dcpLift .5s ease-out .57s both;
    animation-play-state:paused
}

.process-dcpbox-7 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) .78s both;
    animation-play-state:paused
}

.process-dcpico-7 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) .78s both;
    animation-play-state:paused
}

.process-dcplift-15 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .78s both;
    animation-play-state:paused
}

.process-dcplift-16 {
    font-size:15.5px;
    font-weight:500;
    animation:dcpLift .5s ease-out .78s both;
    animation-play-state:paused
}

.process-dcpbox-8 {
    transform-box:fill-box;
    transform-origin:center;
    animation:dcpBox .52s cubic-bezier(.3,.8,.3,1) .99s both;
    animation-play-state:paused
}

.process-dcpico-8 {
    animation:dcpIco .52s cubic-bezier(.3,.8,.3,1) .99s both;
    animation-play-state:paused
}

.process-dcplift-17 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.12em;
    animation:dcpLift .5s ease-out .99s both;
    animation-play-state:paused
}

.process-dcplift-18 {
    font-size:15.5px;
    font-weight:500;
    animation:dcpLift .5s ease-out .99s both;
    animation-play-state:paused
}

.process-dcplift-19 {
    font-size:15.5px;
    font-weight:600;
    animation:dcpLift .55s ease-out 2.1s both;
    animation-play-state:paused
}

.process-dcplift-20 {
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.1em;
    animation:dcpLift .55s ease-out 2.1s both;
    animation-play-state:paused
}

/* A single responsive diagram, with one connection in focus at a time. */
.integration-hub {
    container-type: inline-size;
    color: #14232B;
}
.integration-hub ::selection { background: #DCEFE3; color: #0B6340; }
.hub-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.hub-network {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 23vw, 280px) minmax(0, 1fr);
    gap: 48px 32px;
    align-items: center;
    padding: 28px 12px;
}
.hub-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    visibility: hidden;
    pointer-events: none;
}
[data-hub-ready] .hub-connections { visibility: visible; }
.hub-connections path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hub-connection-line { fill: none; stroke: #CDDED3; stroke-width: 1.5; stroke-dasharray: 1; transition: stroke 240ms; }
.hub-connection-light { stroke: #0E7A4E; stroke-width: 1.75; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.hub-connection-signal { stroke: #2BBF78; stroke-width: 4; stroke-dasharray: .1 1.1; stroke-dashoffset: .1; opacity: 0; }
.hub-connection-port { fill: #F5F9F7; stroke: #AFCBBA; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: fill 240ms, stroke 240ms; }
.hub-connection-line[data-hub-active] { stroke: #0E7A4E; }
[data-hub-active] .hub-connection-port { fill: #0E7A4E; stroke: #0E7A4E; }
.hub-core {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1 / 4;
    display: grid;
    justify-items: center;
    gap: 0;
    align-self: center;
}
.hub-core-mark {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: 0 14px 30px rgb(18 66 43 / 12%), 0 2px 5px rgb(18 66 43 / 5%);
}
.hub-core-mark svg { display: block; width: 100%; height: 100%; }
.hub-brand {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    width: 160px;
    transform: translateX(-50%);
}
.hub-brand .hero-wordmark { display: block; width: 100%; height: auto; aspect-ratio: 2330 / 630; margin: 0; }
.hub-brand .hero-wordmark > rect, .hub-brand .hero-wordmark > path:nth-of-type(n+3) { display: none; }
.hub-brand .hero-wordmark > path:nth-of-type(-n+2) { fill: #14232B; }
.hub-brand .hero-wordmark > path:nth-of-type(2) { transform: translateX(455px); }
.hub-nodes { display: contents; margin: 0; padding: 0; list-style: none; }
.hub-node { position: relative; z-index: 1; grid-column: 3; min-width: 0; }
.hub-node:nth-child(-n+3) { grid-column: 1; }
.hub-node:nth-child(3n+1) { grid-row: 1; }
.hub-node:nth-child(3n+2) { grid-row: 2; }
.hub-node:nth-child(3n) { grid-row: 3; }
.hub-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 350px;
    min-height: 84px;
    margin-left: auto;
    padding: 14px 16px;
    border: 1px solid #DBE6DF;
    border-radius: 14px;
    background: #FFFFFF;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 240ms, background-color 240ms;
}
.hub-node:nth-child(-n+3) .hub-card { flex-direction: row-reverse; margin-left: 0; text-align: right; }
.hub-card:disabled { opacity: 1; cursor: default; }
.hub-card[data-hub-active] { background: #F0F8F3; border-color: #97C9AD; }
.hub-card:focus-visible { outline: 3px solid #0E7A4E; outline-offset: 4px; }
.hub-card-wash {
    --sweep-start: -100%;
    --sweep-end: 100%;
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(220 239 227 / 55%) 38%, rgb(220 239 227 / 55%) 62%, transparent);
    opacity: 0;
    pointer-events: none;
}
.hub-node:nth-child(-n+3) .hub-card-wash { --sweep-start: 100%; --sweep-end: -100%; }
.hub-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #0E7A4E;
    background: #EAF5EE;
    transition: background-color 240ms, color 240ms;
}
.hub-icon svg { display: block; width: 25px; height: 25px; }
.hub-card[data-hub-active] .hub-icon { color: #FFFFFF; background: #0E7A4E; }
.hub-label { display: grid; gap: 5px; min-width: 0; }
.hub-label strong { font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.hub-label > span { color: #53665B; font-size: 14px; line-height: 20px; text-wrap: pretty; }
@container (max-width: 900px) {
    .hub-network { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 8px 0; }
    .hub-core { grid-column: 1; grid-row: 1; justify-self: center; margin: 0 0 68px; }
    .hub-core-mark { width: 76px; height: 76px; padding: 7px; border-radius: 23px; box-shadow: 0 8px 20px rgb(18 66 43 / 10%); }
    .hub-brand { top: calc(100% + 16px); }
    .hub-network .hub-node { grid-column: 1; grid-row: auto; margin-left: 40px; }
    .hub-network .hub-node .hub-card { flex-direction: row; max-width: none; min-height: 78px; margin-left: 0; padding: 14px 16px; text-align: left; }
    .hub-network .hub-node .hub-card-wash { --sweep-start: -100%; --sweep-end: 100%; }
}
@container (max-width: 340px) {
    .hub-network .hub-node { margin-left: 28px; }
    .hub-network .hub-node .hub-card { gap: 10px; padding: 13px 12px; }
    .hub-icon { width: 36px; height: 36px; border-radius: 10px; }
    .hub-icon svg { width: 23px; height: 23px; }
    .hub-label strong { font-size: 16px; line-height: 22px; }
    .hub-label > span { font-size: 14px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .integration-hub *, .integration-hub *::before, .integration-hub *::after { transition: none !important; }
}
@media screen and (prefers-reduced-motion: no-preference) {
    [data-hub-ready][data-hub-state="idle"] .hub-core,
    [data-hub-ready][data-hub-state="idle"] .hub-card,
    [data-hub-ready][data-hub-state="idle"] .hub-connection-port { opacity: 0; }
    [data-hub-ready][data-hub-state="idle"] .hub-connection-line { stroke-dashoffset: 1; }
}

/* Static final frames are the default; motion is progressive enhancement. */
[data-dcp][data-state="end"] [data-el^="pulse-"] { display: none; }
[data-dcp][data-state="idle"] [data-el^="pulse-"],
html:not(.has-diagram-motion) [data-dcp] [data-el^="pulse-"] { display: none; }
@media (prefers-reduced-motion: reduce) {
    [data-dcp] [data-el^="pulse-"] { display: none; }
    [data-anim] { animation: none !important; transition: none !important; }
}
@media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}