/* Generated from src/connection-animations.mjs. Run: node scripts/build.mjs */
.page-integrations .planning-animation-description { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.anbindung-hero { padding-block:76px 72px;background:var(--paper); }
.anbindung-hero-copy { display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:clamp(35px,5vw,60px); }
.anbindung-hero h1 { font-size:clamp(42px,4.2vw,64px);letter-spacing:-.035em; }
.anbindung-hero-copy>p { margin:0;font-size:20px;line-height:1.7; }
.connection-stories { padding-block:80px; }
.connection-story { display:grid;grid-template-columns:.9fr 1.2fr;align-items:center;gap:clamp(48px,7vw,100px);scroll-margin-top:110px; }
.connection-story+.connection-story { margin-top:100px;padding-top:100px;border-top:1px solid var(--line); }
.connection-story--reverse { grid-template-columns:1.2fr .9fr; }
.connection-copy h2 { font-size:clamp(29px,3vw,40px);letter-spacing:-.025em; }
.connection-story-title { display:flex;align-items:flex-start;gap:18px;margin-bottom:25px; }
.connection-story-title>.icon { width:25px;height:25px;margin-top:6px;color:var(--accent);flex-shrink:0; }
.connection-copy p { font-size:19px;line-height:1.75; }
.connection-copy .text-link { margin-top:24px; }
.connection-setup { background:#f5f9fc;border-block:1px solid #e4edf4; }
.connection-setup-intro { display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px;margin-bottom:48px; }
.connection-setup-intro h2 { font-size:clamp(32px,3.5vw,45px); }
.connection-setup-intro>p { max-width:520px;font-size:19px;line-height:1.75; }
.connection-setup-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0; }
.connection-setup-steps li { position:relative;padding:28px;border:1px solid #d4e2ed;border-radius:10px;background:#fff; }
.connection-setup-steps li>span { display:grid;place-items:center;width:36px;height:36px;margin-bottom:24px;border:1px solid var(--accent-light);border-radius:50%;color:var(--accent);font-size:12px;font-weight:700;background:#fff; }
.connection-setup-steps li+li::before { content:'';position:absolute;left:-29px;top:45px;width:28px;border-top:1px solid var(--accent-light); }
.connection-setup-steps h3 { margin-bottom:14px;font-size:24px; }
.connection-setup-steps p { font-size:17px;line-height:1.7; }
.connection-faq h2 { font-size:clamp(33px,3.4vw,44px); }
.connection-faq .faq-layout>div>p:not(.eyebrow) { font-size:19px;line-height:1.75; }
.connection-data-animation { container-type:inline-size;width:100%;min-width:0;margin:0;color:var(--brand); }
.connection-data-animation * { animation-duration:var(--connection-cycle);animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;animation-fill-mode:both; }
.connection-data-stage { position:relative;aspect-ratio:1.65;isolation:isolate; }
.connection-data-scene { position:absolute;inset:0;background:#fff; }
.connection-data-start * { animation:none!important; }
.connection-data-live { z-index:1;animation-name:connection-data-crossfade; }
.connection-data-panel { position:absolute;inset:0 auto 0 0;width:44%;border:1px solid #d4e2ed;border-radius:12px;background:#f5f9fc;overflow:hidden; }
.connection-data-panel--target { left:56%; }
.connection-data-heading { position:absolute;inset:0 0 auto;height:17%;display:flex;align-items:center;gap:7px;padding:0 7%;border-bottom:1px solid #d4e2ed;background:#e8f2f9;font-size:clamp(10px,2.5cqw,15px);font-weight:700;line-height:1.15; }
.connection-data-heading>.icon { width:clamp(15px,3.6cqw,22px);height:clamp(15px,3.6cqw,22px);color:var(--accent);flex-shrink:0; }
.connection-data-slot { position:absolute;left:8%;right:8%;top:calc(24% + var(--row)*20%);height:16%;border:1px dashed #d9e4ec;border-radius:6px;background:#ffffff65; }
.connection-data-record { position:absolute;left:3.5%;top:calc(24% + var(--row)*20%);width:37%;height:16%;display:flex;align-items:center;gap:7%;padding:2.2%;border:1px solid #d9e4ec;border-radius:6px;background:#fff;box-shadow:0 2px 6px #08234c06;z-index:2; }
.connection-data-source-record { z-index:1; }
.connection-data-source-record .connection-data-check { visibility:hidden; }
.connection-data-record-icon { display:grid;place-items:center;width:18%;aspect-ratio:1;flex-shrink:0;border-radius:5px;background:#edf3f8;color:#6f879d; }
.connection-data-record-icon>.icon { width:65%;height:65%; }
.connection-data-record>div { flex:1;min-width:0; }
.connection-data-record strong { display:block;margin-bottom:9%;font-size:clamp(10px,2.3cqw,13px);line-height:1; }
.connection-data-ghost { display:block;height:clamp(2px,.65cqw,4px);border-radius:4px;background:#8795a9; }
.connection-data-ghost--small { height:clamp(1.5px,.45cqw,3px);margin-top:8%;background:#c5d8e5; }
.connection-data-check { display:grid;place-items:center;width:clamp(11px,2.7cqw,16px);height:clamp(11px,2.7cqw,16px);color:var(--accent);opacity:0; }
.connection-data-check>.icon { width:100%;height:100%; }
.connection-data-ready { position:absolute;left:7%;right:7%;bottom:5%;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--accent);font-size:clamp(9px,2.25cqw,13px);font-weight:700;opacity:0;animation-name:connection-data-ready; }
.connection-data-ready>.icon { width:clamp(12px,3cqw,17px);height:clamp(12px,3cqw,17px); }
.connection-data-arrow { position:absolute;left:45%;top:47%;width:10%;display:grid;place-items:center;color:var(--accent); }
.connection-data-arrow>.icon { width:clamp(19px,5cqw,30px);height:clamp(19px,5cqw,30px); }
@container(max-width:400px) { .connection-data-stage { aspect-ratio:1.35; }.connection-data-heading { gap:5px; }.connection-data-record { gap:6%; }.connection-data-ready { font-size:9px; } }
@media(max-width:900px) {
  .anbindung-hero-copy { grid-template-columns:1fr;gap:26px; }
  .anbindung-hero-copy>p { max-width:690px; }
  .connection-story,.connection-story--reverse { grid-template-columns:1fr;gap:35px; }
  .connection-story--reverse .connection-copy { grid-row:1; }
  .connection-story>figure { max-width:680px;width:100%; }
  .connection-copy p { max-width:650px; }
  .connection-setup-intro { grid-template-columns:1fr;gap:25px; }
  .connection-setup-steps { gap:18px; }
  .connection-setup-steps li { padding:23px; }
  .connection-setup-steps li+li::before { left:-19px;width:18px; }
}
@media(max-width:640px) {
  .anbindung-hero { padding-block:44px 46px; }
  .anbindung-hero h1 { font-size:40px; }
  .anbindung-hero-copy>p { font-size:18px; }
  .connection-stories { padding-block:52px; }
  .connection-story+.connection-story { margin-top:58px;padding-top:58px; }
  .connection-story-title { gap:13px;margin-bottom:21px; }
  .connection-copy h2 { font-size:30px; }
  .connection-copy p,.connection-setup-intro>p,.connection-faq .faq-layout>div>p:not(.eyebrow) { font-size:17px; }
  .connection-setup-steps { grid-template-columns:1fr;gap:18px; }
  .connection-setup-steps li { padding:24px 24px 24px 77px; }
  .connection-setup-steps li>span { position:absolute;top:24px;left:22px;margin:0; }
  .connection-setup-steps li+li::before { top:-19px;left:39px;height:18px;width:0;border-top:0;border-left:1px solid var(--accent-light); }
  .connection-setup-steps h3 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .connection-data-animation * { animation:none!important; }
  .connection-data-start { display:none; }
  .connection-data-moving { left:59.5%;border-color:var(--accent-light); }
  .connection-data-moving .connection-data-record-icon { background:var(--accent-soft);color:var(--accent); }
  .connection-data-moving .connection-data-check,.connection-data-ready { opacity:1; }
}
.connection-data-record--0 { animation-name:connection-data-record-0; }
@keyframes connection-data-record-0 {
  0% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  8.23529% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  20% { left:59.5%;transform:scale(1.04);border-color:var(--accent-light); }
  22.35294% { left:59.5%;transform:scale(1);border-color:var(--accent-light); }
  87.05882% { left:59.5%;transform:scale(1);border-color:var(--accent-light); }
  88.23529% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  100% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
}
.connection-data-record--0 .connection-data-check { animation-name:connection-data-check-0; }
@keyframes connection-data-check-0 {
  0% { opacity:0; }
  18.82353% { opacity:0; }
  22.35294% { opacity:1; }
  87.05882% { opacity:1; }
  88.23529% { opacity:0; }
  100% { opacity:0; }
}
.connection-data-record--0 .connection-data-record-icon { animation-name:connection-data-icon-0; }
@keyframes connection-data-icon-0 {
  0% { background:#edf3f8;color:#6f879d; }
  18.82353% { background:#edf3f8;color:#6f879d; }
  22.35294% { background:var(--accent-soft);color:var(--accent); }
  87.05882% { background:var(--accent-soft);color:var(--accent); }
  88.23529% { background:#edf3f8;color:#6f879d; }
  100% { background:#edf3f8;color:#6f879d; }
}
.connection-data-record--1 { animation-name:connection-data-record-1; }
@keyframes connection-data-record-1 {
  0% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  17.64706% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  29.41176% { left:59.5%;transform:scale(1.04);border-color:var(--accent-light); }
  31.76471% { left:59.5%;transform:scale(1);border-color:var(--accent-light); }
  87.05882% { left:59.5%;transform:scale(1);border-color:var(--accent-light); }
  88.23529% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  100% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
}
.connection-data-record--1 .connection-data-check { animation-name:connection-data-check-1; }
@keyframes connection-data-check-1 {
  0% { opacity:0; }
  28.23529% { opacity:0; }
  31.76471% { opacity:1; }
  87.05882% { opacity:1; }
  88.23529% { opacity:0; }
  100% { opacity:0; }
}
.connection-data-record--1 .connection-data-record-icon { animation-name:connection-data-icon-1; }
@keyframes connection-data-icon-1 {
  0% { background:#edf3f8;color:#6f879d; }
  28.23529% { background:#edf3f8;color:#6f879d; }
  31.76471% { background:var(--accent-soft);color:var(--accent); }
  87.05882% { background:var(--accent-soft);color:var(--accent); }
  88.23529% { background:#edf3f8;color:#6f879d; }
  100% { background:#edf3f8;color:#6f879d; }
}
.connection-data-record--2 { animation-name:connection-data-record-2; }
@keyframes connection-data-record-2 {
  0% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  27.05882% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  38.82353% { left:59.5%;transform:scale(1.04);border-color:var(--accent-light); }
  41.17647% { left:59.5%;transform:scale(1);border-color:var(--accent-light); }
  87.05882% { left:59.5%;transform:scale(1);border-color:var(--accent-light); }
  88.23529% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
  100% { left:3.5%;transform:scale(1);border-color:#d9e4ec; }
}
.connection-data-record--2 .connection-data-check { animation-name:connection-data-check-2; }
@keyframes connection-data-check-2 {
  0% { opacity:0; }
  37.64706% { opacity:0; }
  41.17647% { opacity:1; }
  87.05882% { opacity:1; }
  88.23529% { opacity:0; }
  100% { opacity:0; }
}
.connection-data-record--2 .connection-data-record-icon { animation-name:connection-data-icon-2; }
@keyframes connection-data-icon-2 {
  0% { background:#edf3f8;color:#6f879d; }
  37.64706% { background:#edf3f8;color:#6f879d; }
  41.17647% { background:var(--accent-soft);color:var(--accent); }
  87.05882% { background:var(--accent-soft);color:var(--accent); }
  88.23529% { background:#edf3f8;color:#6f879d; }
  100% { background:#edf3f8;color:#6f879d; }
}
@keyframes connection-data-ready {
  0% { opacity:0; }
  48.23529% { opacity:0; }
  52.94118% { opacity:1; }
  87.05882% { opacity:1; }
  88.23529% { opacity:0; }
  100% { opacity:0; }
}
@keyframes connection-data-crossfade {
  0% { opacity:1; }
  77.64706% { opacity:1; }
  86.47059% { opacity:0; }
  88.23529% { opacity:0; }
  91.76471% { opacity:1; }
  100% { opacity:1; }
}