/* DsInnovative · Schaubilder: Plattform, Chat-Animation, Workflow-Baum.
   Ohne JavaScript ist alles sichtbar; Animationen laufen einmal bei Sichtbarkeit. */

/* ---------- 1. Plattform-Schaubild ---------- */
.dg{--dg-panel:#101a29;--dg-tile:#16253a;--dg-edge:#3b4e6a;display:grid;gap:0;margin-top:48px}
.dg-row{display:grid;gap:16px}
.dg-users{grid-template-columns:repeat(3,1fr);max-width:900px;width:100%;margin-inline:auto}
.dg-card{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 14px;min-height:64px;border:1px solid var(--dg-edge);border-radius:12px;background:var(--dg-panel);font-weight:600;font-size:.95rem;text-align:center}
.dg-ico{width:22px;height:22px;flex:none;color:var(--accent)}
.dg-links{display:grid;justify-items:center;height:52px;width:100%;max-width:900px;margin-inline:auto}
.dg-links-3{grid-template-columns:repeat(3,1fr)}
.dg-links-2{grid-template-columns:1fr 1fr;max-width:none;height:56px}
.dg-link{position:relative;width:2px;height:100%;background:linear-gradient(var(--dg-edge),var(--accent));transform-origin:top}
.dg-link::after{content:"";position:absolute;left:50%;bottom:-1px;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateX(-50%) rotate(45deg)}
.dg-link-both::before{content:"";position:absolute;left:50%;top:-1px;width:9px;height:9px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);transform:translateX(-50%) rotate(45deg)}
.dg-platform{padding:clamp(20px,3vw,36px);border:2px solid var(--accent);border-radius:20px;background:linear-gradient(180deg,#14233a,#0f1a2b);box-shadow:0 0 0 8px rgba(169,193,255,.06)}
.dg-platform-head{text-align:center;max-width:720px;margin:0 auto 28px}
.dg-eyebrow{margin:0 0 8px;color:var(--accent);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.dg-platform-head h3{margin:0 0 8px;font-size:clamp(1.4rem,2.6vw,2.1rem)}
.dg-platform-head p:last-child{margin:0;color:var(--muted);font-size:.86rem}
.dg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dg-tile{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--dg-edge);border-radius:14px;background:var(--dg-tile);transition:border-color .3s,transform .4s var(--ease),background .3s}
.dg-tile:hover{border-color:var(--accent);transform:translateY(-4px);background:#1a2c46}
.dg-tile-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#0d1626;border:1px solid var(--dg-edge);margin-bottom:4px}
.dg-tile h3{margin:0;font-size:1.02rem;line-height:1.3}
.dg-tile p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}
.dg-note{margin:20px 0 0;text-align:center;color:var(--accent);font-size:.78rem}
.dg-resources{grid-template-columns:1fr 1fr;gap:20px}
.dg-panel{padding:clamp(18px,2.4vw,28px);border:1px solid var(--dg-edge);border-radius:18px;background:var(--dg-panel)}
.dg-panel>h3{margin:0 0 6px;font-size:1.35rem}
.dg-panel>p{margin:0 0 20px;color:var(--muted);font-size:.86rem}
.dg-group{padding:14px 0;border-top:1px solid #243349}
.dg-group h4{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:.8rem;letter-spacing:.04em;font-weight:650;color:#d6e3f7}
.dg-group h4 .dg-ico{width:18px;height:18px}
.dg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.dg-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px 6px 9px;border:1px solid var(--dg-edge);border-radius:999px;background:#0d1626;font-size:.82rem;font-weight:550;color:#e6eefc;transition:border-color .25s,transform .3s var(--ease),background .25s}
.dg-chip img{width:18px;height:18px;flex:none}
.dg-chip:hover{border-color:var(--accent);transform:translateY(-2px);background:#14233a}
.dg-tile .dg-chips{margin-top:auto;padding-top:10px}
.dg-banner{display:flex;align-items:center;gap:18px;margin-top:20px;padding:20px 26px;border:1px solid var(--dg-edge);border-radius:14px;background:#14233a}
.dg-banner .dg-ico{width:30px;height:30px}
.dg-banner p{margin:0;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.45;border-left:1px solid var(--dg-edge);padding-left:18px}
.dg-banner strong{color:var(--accent)}
.dg-legal{margin:18px 0 0;color:var(--muted);font-size:.74rem;line-height:1.6;max-width:820px}

/* Einblend-Choreografie (nur mit JS) */
.dg.is-armed [data-s]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0ms)}
.dg.is-armed .dg-link[data-s]{transform:scaleY(0)}
.dg.is-armed.is-live [data-s]{opacity:1;transform:none}
.dg.is-armed.is-live .dg-link[data-s]{transform:scaleY(1)}

/* ---------- 2. Chat-Animation ---------- */
.chat-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:center}
.chat-copy .check-list{margin:24px 0}
.chat-note{color:var(--muted);font-size:.78rem;border-left:2px solid var(--line);padding-left:14px}
.chatdemo{min-width:0;display:grid;justify-items:start;gap:16px}
.site-mock{width:100%;border:1px solid #536887;border-radius:14px;overflow:hidden;background:#0e1726;box-shadow:16px 20px 0 #121e33}
.site-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#1a263a;border-bottom:1px solid #3a4b65}
.site-bar span{width:10px;height:10px;border-radius:50%;background:#5a6d8a}
.site-bar em{margin-left:12px;padding:4px 14px;border-radius:999px;background:#0e1726;color:#b4c3dc;font-size:.7rem;font-style:normal}
.site-body{position:relative;min-height:540px;padding:26px 24px}
.site-skeleton{display:grid;gap:14px;max-width:62%}
.sk{display:block;border-radius:6px;background:#1a283f}
.sk-logo{width:90px;height:20px;margin-bottom:20px}
.sk-title{height:30px;width:100%}.sk-title.short{width:68%}
.sk-line{height:11px;width:88%}.sk-line+.sk-line{width:70%}
.sk-btn{width:130px;height:38px;border-radius:8px;background:#27406e;margin-top:8px}
.sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.sk-cards i{display:block;height:90px;border-radius:10px;background:#142036;border:1px solid #243349}
.chat-widget{position:absolute;right:20px;bottom:20px;width:min(380px,calc(100% - 40px));display:flex;flex-direction:column;border:1px solid #4a6082;border-radius:18px;overflow:hidden;background:#f4f7ff;color:#14213a;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#1d3a72;color:#fff}
.chat-head strong{display:block;font-size:.92rem}
.chat-head small{display:block;color:#c9d8f5;font-size:.72rem}
.chat-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#a9c1ff;color:#102347}
.chat-avatar .dg-ico{color:#102347;width:20px;height:20px}
.chat-body{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px;min-height:340px;background:#eaf0fc}
.chat-msg{margin:0;max-width:88%;padding:11px 14px;border-radius:16px;font-size:.88rem;line-height:1.5}
.chat-bot{align-self:flex-start;background:#fff;color:#14213a;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(20,33,58,.12)}
.chat-user{align-self:flex-end;background:#1d3a72;color:#fff;border-bottom-right-radius:4px}
.chat-typing{align-self:flex-start;display:none;gap:5px;background:#fff;border-bottom-left-radius:4px;padding:14px 16px}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:#6a7d9e;animation:chat-dot 1s ease-in-out 3 both}
.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.chat-actions{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;padding:0;max-width:100%}
.chat-actions small{flex:0 0 100%;color:#4d5f80;font-size:.72rem}
.chat-chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1.5px solid #1d3a72;border-radius:999px;background:#fff;color:#1d3a72;font-size:.82rem;font-weight:650;text-decoration:none;transition:background .2s,color .2s}
.chat-chip:hover{background:#1d3a72;color:#fff}
.chat-input{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border-top:1px solid #d3deef}
.chat-field{flex:1;min-width:0;display:flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid #c1cfe6;border-radius:999px;font-size:.84rem;color:#14213a;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.chat-placeholder{color:#5a6b89;white-space:nowrap}
.chat-typed{white-space:nowrap;overflow:hidden;text-overflow:clip;direction:rtl;text-align:left}
.chat-typed:not(:empty){direction:ltr}
.chat-caret{display:none;width:1.5px;height:1.1em;margin-left:1px;background:#1d3a72;flex:none}
.chat-send{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1d3a72;color:#fff;flex:none;transition:transform .2s,background .2s}
.chat-send .dg-ico{color:#fff;width:20px;height:20px}
.chat-input.is-typing .chat-field{border-color:#1d3a72;box-shadow:0 0 0 3px rgba(29,58,114,.18)}
.chat-input.is-typing .chat-placeholder{display:none}
.chat-input.is-typing .chat-caret{display:block}
.chat-input.is-sent .chat-send{transform:scale(.88);background:#2f5bb7}
.chatdemo.is-armed .chat-msg.is-hidden{display:none}
.chatdemo.is-armed .chat-msg.is-in{animation:chat-in .45s var(--ease) both}
.chatdemo.is-armed .chat-typing.is-in{display:flex}
@keyframes chat-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- 3. Workflow-Baum (horizontal) ---------- */
.wf{--wf-w:178px;--wf-gap:44px;--wf-line:#5b6f8c;margin-top:40px}
.wf-scroll{overflow-x:auto;padding:24px 8px 20px;border:1px solid var(--line-dark);border-radius:16px;background:#0e1726;scrollbar-color:#5b6f8c #0e1726}
.wf-scroll:focus-visible{outline-offset:3px}
.wf-canvas{min-width:max-content;padding:0 28px 0 20px}
.wf-cols{display:flex;margin-bottom:18px}
.wf-cols span{flex:none;width:calc(var(--wf-w) + var(--wf-gap));padding-left:2px;color:#b4c3dc;font-size:.7rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.wf-tree,.wf-tree ul{margin:0;padding:0;list-style:none}
.wf-tree ul{position:relative;display:flex;flex-direction:column;justify-content:center;padding-left:var(--wf-gap)}
.wf-tree li{position:relative;display:flex;align-items:center;padding:7px 0}
.wf-tree ul::before{content:"";position:absolute;left:0;top:50%;width:calc(var(--wf-gap)/2);height:2px;margin-top:-1px;background:var(--wf-line);transition:background .4s}
.wf-tree ul>li::before{content:"";position:absolute;left:calc(var(--wf-gap) / -2);top:50%;width:calc(var(--wf-gap)/2);height:2px;margin-top:-1px;background:var(--wf-line);transition:background .4s}
.wf-tree ul>li::after{content:"";position:absolute;left:calc(var(--wf-gap) / -2);top:0;bottom:0;width:2px;margin-left:-1px;background:var(--wf-line);transition:background .4s}
.wf-tree ul>li:first-child::after{top:50%}
.wf-tree ul>li:last-child::after{bottom:50%}
.wf-tree ul>li:only-child::after{display:none}
.wf-node{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:12px;width:var(--wf-w);min-height:64px;padding:10px 12px;border:1.5px solid var(--wf-line);border-radius:12px;background:#142036;transition:border-color .4s,background .4s,box-shadow .4s,transform .4s var(--ease)}
.wf-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:#0b1320;color:var(--accent)}
.wf-ico .dg-ico{width:20px;height:20px}
.wf-ico img{width:20px;height:20px}
.wf-text{min-width:0;display:grid;gap:2px}
.wf-text small{color:#b4c3dc;font-size:.64rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.wf-text strong{font-size:.82rem;line-height:1.3;font-weight:650;color:#f4f7ff}
.wf-switch{border-style:dashed}
.wf-ai{background:#18294a}
.wf-human{border-color:#d9a94f}
.wf-human .wf-ico{color:#f0c36f}
.wf-trigger{border-color:var(--accent)}
.wf-tree li.is-run>.wf-node{border-color:var(--accent);background:#1c3157;box-shadow:0 0 0 4px rgba(169,193,255,.12)}
.wf-tree li.is-run>.wf-human{border-color:#f0c36f;box-shadow:0 0 0 4px rgba(240,195,111,.12)}
.wf-tree li.is-run::before,.wf-tree li.is-run::after,.wf-tree li.is-run>ul::before{background:var(--accent)}
.wf-tree ul>li.is-run:first-child::after,.wf-tree ul>li.is-run:last-child::after{background:var(--accent)}
.wf-tree li:hover>.wf-node{transform:translateY(-2px)}
.wf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:18px}
.wf-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:.76rem;color:#b4c3dc}
.wf-key{display:flex;align-items:center;gap:8px}
.wf-key::before{content:"";width:14px;height:14px;border:1.5px solid var(--wf-line);border-radius:4px;background:#142036}
.wf-key-trigger::before{border-color:var(--accent)}
.wf-key-ai::before{background:#18294a;border-color:var(--accent)}
.wf-key-switch::before{border-style:dashed}
.wf-key-human::before{border-color:#d9a94f}
.wf-caption{margin:14px 0 0;color:#b4c3dc;font-size:.78rem}
/* Aufbau-Animation nur mit JS */
.wf.is-armed .wf-tree li:not(.is-run)>.wf-node{opacity:0;transform:translateX(-14px)}
.wf.is-armed .wf-tree li:not(.is-run)::before,.wf.is-armed .wf-tree li:not(.is-run)::after,.wf.is-armed .wf-tree li:not(.is-run)>ul::before{opacity:0}
.wf.is-armed .wf-tree li>.wf-node,.wf.is-armed .wf-tree li::before,.wf.is-armed .wf-tree li::after{transition-property:opacity,transform,border-color,background,box-shadow}

/* ---------- 4. Telefonagent: Anruf-Szene ---------- */
.calldemo{margin-top:44px}
.call-stage{display:grid;grid-template-columns:minmax(300px,360px) 72px minmax(300px,420px);justify-content:center;align-items:center;gap:0}
.phone{display:flex;flex-direction:column;gap:14px;padding:18px 18px 20px;border:1.5px solid #536887;border-radius:34px;background:#0b1220;box-shadow:14px 18px 0 #121e33}
.phone-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.74rem;color:#b4c3dc}
.phone-state{font-weight:650;color:#e6eefc}
.phone-timer{font-variant-numeric:tabular-nums}
.phone-who{display:grid;justify-items:center;gap:4px;padding-top:4px;text-align:center}
.phone-who strong{font-size:1.05rem}
.phone-who small{color:#b4c3dc;font-size:.74rem}
.phone-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#1d3a72;margin-bottom:4px}
.phone-avatar .dg-ico{width:24px;height:24px;color:#d6e3f7}
.call-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:34px}
.call-wave i{display:block;width:3px;height:6px;border-radius:2px;background:#3b4e6a;transition:background .2s}
.call-log{display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.call-line{margin:0;max-width:92%;padding:9px 12px;border-radius:14px;font-size:.84rem;line-height:1.45}
.call-who{display:block;margin-bottom:2px;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.82}
.call-agent{align-self:flex-start;background:#1d3a72;color:#fff;border-bottom-left-radius:4px}
.call-caller{align-self:flex-end;background:#e8eefb;color:#14213a;border-bottom-right-radius:4px}
.phone-actions{display:flex;justify-content:center;gap:36px;padding-top:4px}
.phone-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#2a8a5a;transition:transform .3s var(--ease),opacity .3s}
.phone-decline{background:#b4423b}
.phone-decline .dg-ico{transform:rotate(135deg)}
.phone-btn .dg-ico{width:22px;height:22px;color:#fff}
.call-flow{position:relative;height:2px;background:linear-gradient(90deg,#3b4e6a,var(--accent))}
.call-flow span{position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg)}
.callcard-wrap{display:grid;gap:14px}
.callcard{padding:22px;border:1.5px solid var(--dg-edge,#3b4e6a);border-radius:18px;background:#f4f7ff;color:#14213a;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:border-color .5s,box-shadow .5s,transform .5s var(--ease)}
.callcard-head{display:grid;gap:2px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #d3deef}
.callcard-head small{color:#4d5f80;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.callcard-head strong{font-size:1.1rem}
.callcard-fields{display:grid;gap:12px;margin:0}
.call-field{display:grid;gap:3px;min-height:48px}
.call-field dt{color:#4d5f80;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.call-field dd{margin:0;font-size:.95rem;font-weight:600;color:#14213a;padding-bottom:6px;border-bottom:1px dashed #b9c8e2;min-height:1.6em}
.call-handover{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--accent);border-radius:14px;background:#14233a}
.handover-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#0d1626}
.handover-ico .dg-ico{width:22px;height:22px;color:var(--accent)}
.call-handover p{margin:0;display:grid;gap:2px;font-size:.86rem;min-width:0}
.call-handover p span{color:#b4c3dc;font-size:.78rem}
.handover-check{display:grid;place-items:center;flex:none;width:30px;height:30px;margin-left:auto;border-radius:50%;background:var(--accent)}
.handover-check .dg-ico{width:18px;height:18px;color:#0c1526}
.call-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin:40px auto 0;max-width:820px}
.call-note{margin:0;flex:1 1 360px;color:#b4c3dc;font-size:.78rem;line-height:1.6;border-left:2px solid var(--line);padding-left:14px}
/* Animation (nur mit JS) */
.calldemo.is-armed .call-log{height:316px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3b4e6a transparent}
.calldemo.is-armed .call-log::before{content:"";margin-top:auto}
.calldemo.is-armed .call-log{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px);mask-image:linear-gradient(to bottom,transparent 0,#000 30px)}
.calldemo.is-armed .call-log:focus-visible{outline-offset:2px}
.calldemo.is-armed .call-line.is-hidden{display:none}
.calldemo.is-armed .call-line.is-in{animation:chat-in .45s var(--ease) both}
.calldemo.is-armed .call-field dd{min-height:1.6em}
.calldemo.is-armed .call-value{opacity:0;transition:opacity .5s}
.calldemo.is-armed .call-field.is-filled .call-value{opacity:1}
.calldemo.is-armed .call-field.is-filled dd{border-bottom-color:var(--accent);border-bottom-style:solid}
.calldemo.is-armed .call-handover{opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.calldemo.is-armed[data-state="done"] .call-handover{opacity:1;transform:none}
.calldemo.is-armed:not([data-state="done"]) .callcard{transform:scale(.985)}
.calldemo.is-armed[data-state="done"] .callcard{border-color:var(--accent);box-shadow:0 0 0 5px rgba(169,193,255,.2),0 18px 50px rgba(0,0,0,.35)}
.calldemo.is-armed[data-state="ring"] .phone-btn.phone-accept{animation:ring-pulse .9s ease-in-out infinite}
.calldemo.is-armed[data-state="ring"] .phone{animation:ring-shake 1.1s ease-in-out infinite}
.calldemo.is-armed[data-state="live"] .phone-decline,.calldemo.is-armed[data-state="done"] .phone-accept{opacity:.35}
.calldemo.is-armed[data-state="done"] .phone-decline{opacity:1}
@keyframes ring-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes ring-shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-1.2deg)}30%{transform:rotate(1.2deg)}45%{transform:rotate(-.8deg)}60%{transform:rotate(0)}}
.call-wave i.is-caller{background:#e8eefb}
.call-wave i.is-agent{background:var(--accent)}
.call-wave i.is-caller,.call-wave i.is-agent{animation:wave .7s ease-in-out infinite alternate;animation-delay:calc(var(--k,0) * -90ms)}
@keyframes wave{from{height:5px}to{height:var(--h,26px)}}
/* ---------- Responsiv ---------- */
@media(max-width:1000px){
 .call-stage{grid-template-columns:minmax(0,380px);justify-content:center;gap:0}
 .call-flow{width:2px;height:48px;margin:0 auto;background:linear-gradient(var(--dg-edge,#3b4e6a),var(--accent))}
 .call-flow span{right:auto;top:auto;left:-4px;bottom:-1px;transform:rotate(135deg)}
 .callcard-wrap{width:100%}
 .dg-tiles{grid-template-columns:1fr 1fr}
 .chat-layout{grid-template-columns:1fr;gap:36px}
 .chatdemo{max-width:620px}
}
@media(max-width:820px){
 .dg-resources{grid-template-columns:1fr}
 .dg-links-2{height:44px}
 .dg-links-2 .dg-link:nth-child(2){display:none}
 .dg-links-2{grid-template-columns:1fr}
}
@media(max-width:620px){
 .calldemo{margin-top:32px}
 .phone{padding:14px 14px 18px;border-radius:28px;box-shadow:7px 10px 0 #121e33}
 .calldemo.is-armed .call-log{height:340px}
 .call-line{font-size:.82rem}
 .callcard{padding:18px}
 .dg{margin-top:32px}
 .dg-users{gap:8px}
 .dg-card{flex-direction:column;gap:6px;padding:12px 4px;font-size:.78rem;min-height:76px;overflow-wrap:anywhere;hyphens:auto}
 .dg-tiles{grid-template-columns:1fr}
 .dg-banner{align-items:flex-start;gap:14px;padding:18px}
 .dg-banner p{padding-left:14px}
 .site-body{min-height:0;padding:18px 14px 14px}
 .site-skeleton{max-width:100%;margin-bottom:200px}
 .sk-cards{display:none}
 .chat-widget{right:12px;bottom:12px;width:calc(100% - 24px)}
 .chat-body{padding:12px;min-height:320px}
 .site-mock{box-shadow:8px 10px 0 #121e33}
}
@media(prefers-reduced-motion:reduce){
 .calldemo.is-armed[data-state="ring"] .phone,.calldemo.is-armed[data-state="ring"] .phone-btn.phone-accept,.call-wave i{animation:none}
 .dg.is-armed [data-s],.wf.is-armed .wf-tree li:not(.is-run)>.wf-node{opacity:1;transform:none;transition:none}
 .dg-tile:hover,.dg-chip:hover,.wf-tree li:hover>.wf-node{transform:none}
 .chat-typing i{animation:none}
}

.wf-hint{display:none;margin:10px 0 0;color:#b4c3dc;font-size:.74rem}
@media(max-width:1100px){.wf-hint{display:block}}

/* ---------- 5. Runde 3: schlankes Schaubild, Anbindungen, Leistungsliste, Projekte ---------- */
.dg-platform-head{margin-bottom:22px}
.dg-platform-head h3{margin:0}
.dg-tile{align-items:center;text-align:center;gap:12px;padding:22px 16px}
.dg-tile h3{font-size:1rem}
.dg-tile-ico{width:52px;height:52px;border-radius:12px;margin-bottom:0}
.dg-tile-ico .dg-ico{width:28px;height:28px}
.dg-panel>h3{margin:0 0 18px;font-size:1.25rem}
.dg-logos{display:flex;flex-wrap:wrap;gap:12px 10px;margin:0;padding:0;list-style:none}
.dg-logo{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;width:92px;padding:12px 6px 10px;border:1px solid var(--dg-edge);border-radius:12px;background:#0d1626;text-align:center;font-size:.78rem;font-weight:550;line-height:1.25;color:#e6eefc;transition:border-color .3s,transform .4s var(--ease),background .3s}
.dg-logo img,.dg-logo-ico{width:32px;height:32px;flex:none}
.dg-logo-ico{color:var(--accent)}
.dg-logo:hover{border-color:var(--accent);transform:translateY(-3px);background:#14233a}
.dg-banner{padding:16px 22px}
.dg-banner p{font-size:clamp(1rem,1.5vw,1.15rem)}
.dg-legal{margin-top:28px}

.conn-section{padding-top:clamp(40px,6vw,80px)}
.conn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.conn-card{padding:clamp(18px,2.4vw,28px);border:1px solid var(--dg-edge,#3b4e6a);border-radius:18px;background:#101a29}
.conn-card h3{margin:0 0 6px;font-size:1.25rem}
.conn-card>p{margin:0 0 18px;color:var(--muted);font-size:.9rem}
.conn-card:first-child,.conn-card:nth-child(3){grid-column:auto}

@media (max-width:900px){
  .conn-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .dg-logo{width:calc(33.333% - 7px);min-width:84px}
  }
@media (prefers-reduced-motion:reduce){.dg-logo:hover{transform:none}}

/* ---------- Runde 4 ---------- */
/* Chat-Eingabe: Text bricht um, die ganze Nachricht bleibt sichtbar */
.chat-input{align-items:flex-end}
.chat-field{flex-wrap:wrap;align-content:center;align-items:center;min-height:100px;padding:10px 16px;border-radius:22px;overflow:visible;line-height:1.4;overflow-wrap:anywhere}
.chat-typed{white-space:normal;overflow:visible;direction:ltr;text-align:left}
.chat-send{margin-bottom:0}

/* Anruf-Hinweis */
.call-try{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;max-width:900px;margin:48px auto 0;padding:clamp(20px,3vw,32px);border:1px solid var(--accent);border-radius:18px;background:linear-gradient(180deg,#14233a,#101a29)}
.call-try>div{flex:1 1 380px}
.call-try .eyebrow{margin-bottom:10px}
.call-try h3{margin:0 0 10px;font-size:1.5rem}
.call-try p{margin:0;color:#c9d6ec;font-size:.92rem;line-height:1.6}
.call-try p a{color:var(--accent);text-decoration:underline}
.call-try .button{flex:none}

/* Workflow mobil: vertikaler Baum, Äste laufen nach unten */
@media (max-width:760px){
  .wf{--wf-w:100%}
  .wf-scroll{overflow:visible;padding:20px 14px 16px}
  .wf-canvas{min-width:0;padding:0}
  .wf-cols,.wf-hint{display:none}
  .wf-tree,.wf-tree ul{display:block}
  .wf-tree ul{margin:0 0 0 12px;padding-left:28px;border:0}
  .wf-tree ul::before{display:none}
  .wf-tree li{display:block;padding:8px 0 0}
  .wf-tree ul>li::before{left:-14px;top:40px;width:14px;height:2px;margin:0}
  .wf-tree ul>li::after{display:block;left:-14px;top:0;bottom:0;width:2px;margin:0}
  .wf-tree ul>li:first-child::after{top:0}
  .wf-tree ul>li:last-child::after{bottom:auto;height:41px}
  .wf-tree ul>li:only-child::after{display:block}
  .wf-node{width:100%;min-height:60px}
}