/* Homepage 2026-09: Sektion «KI-Assistent» (MCP). Links der Assistent mit drei Beispiel-Wünschen,
   in der Mitte der Knoten «Verbindung nur auf deinem Mac», rechts ein MacBook-Rahmen mit dem ganzen App-Fenster
   und darunter in Klartext, was die App gemacht hat. Ohne JavaScript steht der Endzustand statisch
   (erster Wunsch, Select-Fenster); mcp.js setzt html.mcp-js, schaltet das Skript des Wunsches ein und
   deckt dessen Schritte als Chips auf.
   Additiv zu 20260906/* und 20260906-home-v2/*. */
.mcp-sec{background:#171a15;border-block:1px solid var(--line)}
.mcp-wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
.mcp-sec .probe-section-heading p:last-child{max-width:58ch}

/* Bühne: Assistent → Knoten → MacBook */
.mcp-stage{position:relative;display:grid;grid-template-columns:minmax(250px,29%) minmax(120px,15%) minmax(0,1fr);align-items:center;gap:0;margin-top:clamp(34px,5vw,56px)}

/* Assistent (links): drei Beispiel-Wünsche */
.mcp-client{position:relative;z-index:2;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#ffffff0a,#ffffff02),var(--panel);box-shadow:0 20px 50px #0005,inset 0 1px 0 #ffffff14;padding:16px 16px 14px}
.mcp-hint{margin:0 0 10px;font:.8rem var(--sans);color:var(--muted)}
.mcp-prompts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mcp-prompt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:#ffffff05;color:var(--text);font:400 .82rem/1.4 var(--sans);font-style:italic;cursor:pointer;transition:border-color .25s,background .25s}
.mcp-prompt:hover,.mcp-prompt:focus-visible{border-color:#dfad6470;background:#dfad640e;outline:none}
.mcp-prompt[aria-current="true"]{border-color:#dfad64a0;background:#dfad6416;box-shadow:0 0 0 3px #dfad641a}
.mcp-prompt .app{flex-shrink:0;font:500 .7rem var(--sans);font-style:normal;color:var(--amber);padding:3px 8px;border:1px solid #dfad6440;border-radius:999px}

/* Verbindung (Mitte): Leitung, Knoten, Nachfrage-Chip */
.mcp-link{position:relative;z-index:1;align-self:stretch;display:flex;align-items:center;justify-content:center}
.mcp-wire{position:absolute;inset:0;width:100%;height:100%;color:#97a27f;overflow:visible}
.mcp-wire path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
html.mcp-js .mcp-wire path{stroke-dashoffset:1}
html.mcp-js .mcp-stage.is-in .mcp-wire path{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.33,.7,.2,1) .3s}
.mcp-node{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 14px;max-width:150px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#ffffff12,#ffffff04),var(--panel-2);box-shadow:0 14px 36px #0005,inset 0 1px 0 #ffffff22;font:500 .74rem/1.3 var(--sans);color:var(--text);text-align:center}
.mcp-node svg{width:22px;height:22px;color:var(--amber)}
.mcp-node.is-busy svg{animation:mcp-spin 1.1s linear infinite}
@keyframes mcp-spin{to{transform:rotate(360deg)}}
.mcp-consent{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px);padding:5px 10px;border:1px solid #dfad6470;border-radius:999px;background:#23261f;color:#e8d9b8;font:500 .62rem var(--sans);white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.mcp-consent.is-on{opacity:1;transform:translate(-50%,0)}
.mcp-consent.is-ok{border-color:#9bd18a80;color:#cfe9c4}
html.mcp-js .mcp-node{opacity:0;transform:scale(.8);transition:opacity .4s ease .25s,transform .45s cubic-bezier(.2,.75,.3,1) .25s}
html.mcp-js .mcp-stage.is-in .mcp-node{opacity:1;transform:none}

/* MacBook (rechts): CSS-Rahmen, Bildschirm wechselt je App; darunter der Klartext-Verlauf */
.mcp-mac{position:relative;z-index:2;min-width:0}
.mcp-laptop{padding:0 4%}
.mcp-laptop-frame{border:14px solid #1c1e1b;border-bottom-width:22px;border-radius:20px 20px 10px 10px;background:#0b0c0b;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 1px #ffffff1a,0 0 0 1px #00000066;position:relative}
.mcp-laptop-frame::before{content:"";position:absolute;top:-9px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a3d38;box-shadow:inset 0 0 0 1px #0008;z-index:3}
.mcp-screens{position:relative;aspect-ratio:1680/880;background:#0b0c0b}
.mcp-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity .6s ease}
.mcp-screens img.is-on{opacity:1}
.mcp-laptop-base{height:16px;width:116%;margin-left:-8%;border-radius:3px 3px 18px 18px;background:linear-gradient(180deg,#464a43,#2a2d27 55%,#1c1e1b);box-shadow:0 18px 34px rgba(0,0,0,.45),inset 0 1px 0 #ffffff26}
.mcp-laptop-base::before{content:"";display:block;width:16%;height:5px;margin:0 auto;border-radius:0 0 8px 8px;background:#141613;box-shadow:inset 0 -1px 0 #ffffff12}
.mcp-screen-tag{position:absolute;left:12px;top:12px;z-index:4;padding:4px 10px;border-radius:999px;background:#0b0c0bcc;border:1px solid #ffffff22;color:var(--text);font:500 .7rem var(--sans);backdrop-filter:blur(6px)}
.mcp-log{margin:22px 0 0;padding:12px 14px;list-style:none;border:1px solid var(--line);border-radius:14px;background:#111310;min-height:96px;display:grid;gap:7px;align-content:start}
.mcp-log li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;font:.82rem var(--sans);color:var(--muted);opacity:0;transform:translateY(6px);animation:mcp-line .35s ease forwards}
.mcp-log li .what{color:var(--text);font-weight:500}
.mcp-log li .ok{color:#9bd18a}
.mcp-log li .ask{color:var(--amber)}
@keyframes mcp-line{to{opacity:1;transform:none}}
.mcp-scheme{margin:10px 0 0;color:var(--dim);font-size:.72rem;line-height:1.5}

/* Fliegende Chips (von mcp.js erzeugt, in Bühnen-Koordinaten) */
.mcp-fly{position:absolute;left:0;top:0;z-index:6;pointer-events:none;will-change:transform;padding:7px 13px;border-radius:999px;box-shadow:0 10px 24px #0007;white-space:nowrap}
.mcp-fly.prompt{background:#23261f;border:1px solid var(--line);color:var(--text);font:400 .72rem var(--sans);font-style:italic;max-width:280px;white-space:normal;text-align:center}
.mcp-fly.tool{background:#191c16f2;border:1px solid #dfad6450;color:#e8d9b8;font:500 .72rem var(--sans)}

html.mcp-js .mcp-client,html.mcp-js .mcp-mac{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.75,.3,1)}
html.mcp-js .mcp-mac{transition-delay:.12s}
html.mcp-js .mcp-stage.is-in .mcp-client,html.mcp-js .mcp-stage.is-in .mcp-mac,html.mcp-js .mcp-stage:focus-within .mcp-client,html.mcp-js .mcp-stage:focus-within .mcp-mac,html.mcp-js .mcp-stage:focus-within .mcp-node{opacity:1;transform:none}
html:not(.mcp-js) .mcp-hint{display:none}
html.mcp-js .mcp-prompt:disabled{opacity:.55;cursor:progress}

@media(max-width:900px){
  .mcp-stage{grid-template-columns:1fr;gap:0}
  .mcp-link{height:96px}
  .mcp-wire{display:none}
  .mcp-link::before,.mcp-link::after{content:"";position:absolute;left:50%;width:2px;background:#97a27f;transform:translateX(-50%)}
  .mcp-link::before{top:0;height:22px}.mcp-link::after{bottom:0;height:22px}
  .mcp-consent{top:auto;bottom:calc(100% + 8px)}
  .mcp-log{min-height:0}
  .mcp-laptop-base{width:100%;margin-left:0}
}
/* Reduzierte Bewegung: Betriebssystem oder Footer-Schalter (probe.js setzt html.motion-off,
   probe.css schaltet dort alle Animationen ab, also müssen die Endzustände explizit stehen). */
@media(prefers-reduced-motion:reduce){
  .mcp-wire path{stroke-dashoffset:0!important;transition:none!important}
  .mcp-node.is-busy svg{animation:none}
  .mcp-screens img{transition:none}
  .mcp-log li{animation:none;opacity:1;transform:none}
  html.mcp-js .mcp-client,html.mcp-js .mcp-mac,html.mcp-js .mcp-node{opacity:1;transform:none;transition:none}
}
html.motion-off .mcp-wire path{stroke-dashoffset:0!important}
html.motion-off .mcp-log li{opacity:1;transform:none}
html.motion-off.mcp-js .mcp-client,html.motion-off.mcp-js .mcp-mac,html.motion-off.mcp-js .mcp-node{opacity:1;transform:none}