/* KI-Seite: animierte Erklärgrafiken
   1) Geschützter KI-Arbeitsplatz (Chat mit vertraulichem Dokument, Schutzzone,
      blockierter Datenabfluss)
   2) Automatisierung wiederkehrender Abläufe (Pipeline, Zeit- und Kostenrechnung)
   Grundzustand aller Elemente ist sichtbar; die Animationen blenden nur ein.
   Bei reduzierter Bewegung wird deshalb einfach der Endzustand gezeigt. */

.split--wide{grid-template-columns:.95fr 1.05fr;align-items:start}
.shield-grid{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shield-grid li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:#0a122680;color:#d6ddf0;font-size:14px;line-height:1.55}
.shield-grid svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 60%,transparent))}
.shield-grid strong{display:block;color:#fff;margin-bottom:2px}

/* ---------- 1) Geschützter KI-Arbeitsplatz ---------- */
.kiwork{position:relative;padding:34px 16px 16px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%)}
.kiwork .zone-label{position:absolute;top:-13px;left:18px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);background:#070b1a;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.kiwork .zone-label svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.kichat{min-height:0}
.kichat .kw-msg{max-width:88%;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.55;margin-bottom:9px;animation:kw-in .55s var(--ease) backwards}
.kichat .kw-user{margin-left:auto;background:color-mix(in srgb,var(--accent) 22%,#0a1226);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:#fff;border-bottom-right-radius:4px}
.kichat .kw-ai{background:#0a122699;border:1px solid #ffffff14;color:#dfe5f4;border-bottom-left-radius:4px}
.kichat .kw-ai b{color:#fff}
.kichat .kw-file{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 9px;border-radius:8px;background:#04070dbb;border:1px solid #ffffff1f;font:10px var(--mono);letter-spacing:.06em;color:#c4cde3;animation:kw-in .5s var(--ease) backwards}
.kichat .kw-file i{width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.kichat .kw-file em{font-style:normal;color:#ff9c8a;letter-spacing:.12em}
.kichat .kw-status{display:flex;align-items:center;gap:10px;margin:2px 0 10px;padding:8px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:#04070d99;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);animation:kw-in .5s var(--ease) backwards}
.kichat .kw-status svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex:none}
.kichat .kw-status .kw-scan{flex:1;height:4px;border-radius:2px;background:#ffffff14;overflow:hidden;position:relative}
.kichat .kw-status .kw-scan::after{content:'';position:absolute;inset:0;width:40%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:kw-scan 1.1s linear 3 backwards;animation-delay:inherit}
.kichat .kw-type{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,#c4cde3aa,#c4cde355);margin:7px 0;width:var(--w,80%);animation:mock-type 1.1s steps(24) backwards}
.kichat .kw-answer{margin-top:8px;padding-top:8px;border-top:1px solid #ffffff14;animation:kw-in .5s var(--ease) backwards}
.kichat .kw-answer span{display:block;color:#dfe5f4}
.kichat .kw-src{display:inline-block;margin-top:7px;padding:4px 8px;border-radius:10px;font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);animation:kw-in .4s var(--ease) backwards}
.kichat .kw-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kichat .kw-badges span{padding:5px 9px;border-radius:12px;font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#d0f7e6;border:1px solid #52decf80;background:#52decf14;animation:kw-in .4s var(--ease) backwards}
.kichat .kw-badges span::before{content:'✓ ';color:#52decf}

/* Außenwelt: Paket will die Zone verlassen und wird gestoppt */
.kw-outside{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:18px;padding:0 4px}
.kw-outside .kw-lane{position:relative;height:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent) 0 6px,transparent 6px 12px)}
.kw-outside .kw-pkt{position:absolute;top:-6px;left:0;width:14px;height:14px;border-radius:4px;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:kw-packet 4s var(--ease) infinite;animation-delay:6s}
.kw-outside .kw-wall{position:absolute;right:-1px;top:-14px;width:3px;height:30px;border-radius:2px;background:#ff9c8a;box-shadow:0 0 14px #ff9c8a;animation:kw-wall 4s ease-in-out infinite;animation-delay:6s}
.kw-outside .kw-lane small{position:absolute;left:0;top:10px;font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ff9c8a;opacity:0;animation:kw-label 4s ease-in-out infinite;animation-delay:6s}
.kw-outside .kw-ext{padding:10px 12px;border-radius:10px;border:1px solid #ffffff22;background:#04070d99;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e99b8;text-align:center;line-height:1.5}
.kw-outside .kw-ext b{display:block;color:#c4cde3;font-weight:600}

@keyframes kw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kw-scan{from{left:-40%}to{left:100%}}
@keyframes kw-packet{0%{left:0;opacity:0}10%{opacity:1}45%{left:calc(100% - 18px);opacity:1}52%{left:calc(100% - 30px)}70%{left:calc(100% - 30px);opacity:1}85%{left:20%;opacity:0}100%{left:0;opacity:0}}
@keyframes kw-wall{0%,40%{transform:scaleY(1);box-shadow:0 0 14px #ff9c8a}47%{transform:scaleY(1.5);box-shadow:0 0 30px #ff9c8a}60%,100%{transform:scaleY(1);box-shadow:0 0 14px #ff9c8a}}
@keyframes kw-label{0%,44%{opacity:0}50%,78%{opacity:1}90%,100%{opacity:0}}

/* ---------- 2) Automatisierung ---------- */
.auto-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:34px;align-items:start}
.auto-flow{padding:16px;font:12px/1.5 Instrument,Arial,sans-serif;color:#d6ddf0}
.pipe{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pipe li{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 10px 10px 0;animation:kw-in .5s var(--ease) backwards}
.pipe li+li::before{content:'';position:absolute;left:21px;top:-18px;height:26px;width:2px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.pipe li+li::after{content:'';position:absolute;left:19px;top:-16px;width:6px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pipe-pkt .9s var(--ease) backwards}
.pipe .node{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,#0a1226);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);animation:pipe-glow 1.6s var(--ease) backwards}
.pipe .node svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pipe .node.human{border-color:#52decf99;background:#52decf1f}
.pipe .node.human svg{stroke:#52decf}
.pipe b{display:block;color:#fff;font-weight:600;font-size:13px}
.pipe small{display:block;color:#aab4cc;font-size:11.5px}
.pipe .mock-chip{opacity:1;animation:kw-in .4s var(--ease) backwards}
.auto-timer{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:14px;padding:12px;border-radius:10px;border:1px solid #ffffff14;background:#04070d99;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.auto-timer .mock-bar-line{height:8px}
.auto-timer .mock-bar-line i{animation-duration:2.2s}
.auto-timer .mock-bar-line i.old{background:#ffffff3a}
.auto-timer .mock-bar-line+.mock-bar-line{margin-top:5px}
.auto-timer .lane{display:grid;gap:5px}
.auto-timer b{color:#fff;font-size:12px;letter-spacing:0;text-transform:none}
.auto-timer .new{color:var(--accent)}
@keyframes pipe-glow{0%{box-shadow:none}35%{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 transparent}}
@keyframes pipe-pkt{from{transform:translateY(-8px);opacity:0}30%{opacity:1}to{transform:translateY(14px);opacity:0}}

.auto-side{display:grid;gap:18px}
.savings{padding:22px}
.savings .hud{margin:0 0 14px}
.savings-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.savings-nums div{padding:14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:#0a122680}
.savings-nums b{display:block;font-size:clamp(30px,3vw,40px);letter-spacing:-.03em;line-height:1;color:#fff}
.savings-nums b small{font-size:.5em;color:var(--accent);margin-left:2px}
.savings-nums b span{display:inline}
.savings-nums>div>span{display:block;margin-top:6px;font-size:12.5px;color:#c4cde3;line-height:1.45}
.savings p{margin:12px 0 0;font-size:12px;color:#a9b7ce;line-height:1.55}
.auto-examples{list-style:none;margin:0;padding:22px;display:grid;gap:12px}
.auto-examples li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;font-size:13px;color:#dfe5f4}
.auto-examples li b{font-weight:600;color:#fff}
.auto-examples li .ex-time{font:10px var(--mono);letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.auto-examples li .ex-time em{font-style:normal;color:var(--accent)}
.auto-examples li .bars{grid-column:1/-1;display:grid;gap:4px}
.auto-examples li .bars i{display:block;height:6px;border-radius:3px;width:0}
.auto-examples li .bars i.old{background:#ffffff33}
.auto-examples li .bars i.new{background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.auto-examples.is-in li .bars i{animation:mock-fill 1.4s var(--ease) forwards}
.auto-examples.is-in li .bars i.new{animation-delay:.3s}
.auto-examples:not(.is-in) li .bars i{width:var(--w)}
.auto-cta{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.auto-cta p{margin:0;font-size:17px;color:#fff;font-weight:600}

@media(max-width:1000px){
  .split--wide{grid-template-columns:1fr}
  .auto-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .shield-grid{grid-template-columns:1fr}
  .kiwork{padding:28px 10px 12px}
  .kichat .kw-msg{max-width:96%}
  .savings-nums{grid-template-columns:1fr 1fr}
  .pipe li{grid-template-columns:40px 1fr}
  .pipe li .mock-chip{grid-column:2}
}
/* Reduzierte Bewegung: Endzustand zeigen (real-world.css setzt animation:none).
   Auch die älteren Mockups dieser Seite starten mit opacity:0 und würden sonst verschwinden. */
@media(prefers-reduced-motion:reduce){
  .kw-outside .kw-pkt,.kw-outside .kw-lane small,.pipe li+li::after{display:none}
  .auto-examples li .bars i{width:var(--w)}
  .mock-row,.mock-chip,.mock-type,.mock-btn,.mock-toast,.mock-site .site-hero,.mock-site .site-cards i,.mock-phone .ad,.mock-phone .lp{opacity:1;transform:none}
  .mock-type .line{width:var(--w,88%)}
  .mock-bar-line i{width:var(--w,70%)}
  .mock-toggle::after{left:18px}
}