/* ==========================================================
   MCP-Service -- Seitenmodul ueber troncom.css.
   Traegt nur, was es allein hier gibt: den Weg einer Anfrage,
   die Anatomie eines Werkzeugs und die Liste der anbindbaren
   Systeme. Buehne, Koepfe, Merkmale, Baender, Aussage, Schritte
   und Abschluss kommen aus dem Designsystem.
   ========================================================== */
.mp { --mono: var(--font-mono); }

/* ---------- Buehne ----------
   Das Switch-Foto ist rund zehnmal heller als die uebrigen Bilder
   der Seite -- abgedunkelt bleibt die Buehne schwarz. Schmal steht
   der obere Stecker im Ausschnitt. */
.mp-buehne { --bild-pos: 62% 50%; }
.mp-buehne .buehne-bild img { filter: saturate(.8) brightness(.42); }

/* ---------- Abbildungen ----------
   Haarlinie oben wie beim Ablaufvergleich der Startseite. Schmal
   behalten die Zeichnungen eine lesbare Mindestbreite und rollen
   seitlich, bis an den Bildschirmrand. */
.mp-flow, .mp-anat { padding-top: clamp(26px, 3.2vw, 44px); border-top: 1px solid var(--rule-strong); }
.mp-rolle {
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
}
.mp-rolle > svg { width: 100%; height: auto; overflow: visible; }
.mp-schema { min-width: 800px; }
.mp-anat svg { min-width: 940px; }

/* ---------- Weg einer Anfrage ---------- */
.mp-schema .ln   { stroke: rgba(255,255,255,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-schema .nd   { fill: #fff; }
.mp-schema .lb   { font-family: var(--mono); font-size: 14px; letter-spacing: 1.4px; fill: rgba(255,255,255,.86); }
.mp-schema .sub  { font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; fill: var(--text-3); }
.mp-schema .gate { font-family: var(--mono); font-size: 13px; letter-spacing: 1.2px; fill: rgba(255,255,255,.72); }
.mp-schema .acc  { stroke: #FFC46B; }
.mp-schema .accf { fill: #FFC46B; }

/* Ein Lichtpunkt laeuft vom Nutzer los, haelt am MCP-Server und
   laeuft zum Fachsystem weiter; die drei Pruefungen blenden auf. */
.mp-pulse { fill: #FFC46B; filter: drop-shadow(0 0 8px rgba(255,196,107,.9)); }
.mp-flow.visible .mp-pulse { animation: mpRun 5.5s cubic-bezier(.5,0,.5,1) .4s infinite both; }
@keyframes mpRun {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  46%  { transform: translateX(570px); opacity: 1; }
  54%  { transform: translateX(570px); opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(860px); opacity: 0; }
}
.mp-gate-row { opacity: 0; transform: translateY(6px); }
.mp-flow.visible .mp-gate-row { animation: mpGate .5s ease-out forwards; animation-delay: calc(var(--g) * 220ms + 900ms); }
@keyframes mpGate { to { opacity: 1; transform: none; } }

/* ---------- Anatomie eines Werkzeugs ----------
   Der Rahmen zeichnet sich ueber --len aus troncom.js, danach
   kommen die fuenf Angaben nacheinander. */
.mp-anat .frame {
  fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 1176); stroke-dashoffset: var(--len, 1176);
}
.mp-anat .divide { stroke: rgba(255,255,255,.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-anat .lead   { stroke: rgba(255,255,255,.26); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.mp-anat .part   { font-family: var(--mono); font-size: 14px; letter-spacing: 1.4px; fill: #fff; }
.mp-anat .note   { font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.1px; fill: rgba(255,255,255,.55); }
.mp-anat .cap    { font-family: var(--mono); font-size: 12px; letter-spacing: 1.6px; fill: var(--text-3); }
.mp-anat .tick   { fill: #FFC46B; }

.mp-anat.visible .frame { animation: mpFrame 1.3s cubic-bezier(.25,0,.3,1) forwards; }
@keyframes mpFrame { to { stroke-dashoffset: 0; } }
.mp-anat .row { opacity: 0; }
.mp-anat.visible .row { animation: mpRow .55s ease-out forwards; animation-delay: calc(var(--r) * 160ms + 350ms); }
@keyframes mpRow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Anbindbare Systeme ----------
   Links bleibt der Kopf stehen, rechts laufen die fuenf Bereiche
   als Haarlinienliste, die Systeme darunter als Chips. */
.mp-umfang { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.mp-umfang-kopf { position: sticky; top: calc(var(--nav-h) + 40px); }
.mp-umfang-kopf h2 { margin-top: clamp(18px, 2vw, 26px); max-width: 14ch; font-size: clamp(34px, 4.2vw, 60px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.mp-umfang-kopf p { margin-top: 20px; max-width: 42ch; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.6; color: var(--text-2); }

.mp-systeme { border-top: 1px solid var(--rule-strong); }
.mp-systeme.fade-in { opacity: 1; transform: none; }
.mp-system {
  display: grid; grid-template-columns: clamp(44px, 5vw, 72px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px); align-items: baseline;
  padding: clamp(24px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(14px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--e) * 110ms);
}
.mp-systeme.visible .mp-system { opacity: 1; transform: none; }
.mp-system h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -.03em; line-height: 1.12; }
.mp-system p { margin-top: 10px; max-width: 52ch; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.6; color: var(--text-2); }
.mp-system .chips { margin-top: clamp(16px, 1.6vw, 20px); }
@media (max-width: 900px) {
  .mp-umfang { grid-template-columns: 1fr; }
  .mp-umfang-kopf { position: static; }
}

/* ---------- Abschluss: die Frage ist laenger als ueblich ---------- */
.mp .abschluss h2 { max-width: 16ch; font-size: clamp(42px, 7.2vw, 112px); }

/* ---------- Weniger Bewegung ----------
   Gleich spezifisch wie die Regeln mit .visible, sonst liefen die
   Animationen trotzdem. */
@media (prefers-reduced-motion: reduce) {
  .mp-pulse { display: none; }
  .mp-gate-row, .mp-anat .row { opacity: 1; transform: none; }
  .mp-flow.visible .mp-gate-row, .mp-anat.visible .row, .mp-anat.visible .frame { animation: none; }
  .mp-anat .frame { stroke-dashoffset: 0; }
  .mp-system { opacity: 1; transform: none; transition: none; }
}