/* DYNAMIS 321-Stil: Workflows-Seite (ergänzt d321.css und d321-loesungen.css) */

.wtag { position: absolute; top: -10px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); }
.d { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #d8cdb3; box-shadow: 0 0 0 3px #fff; }
.d--l { left: -5px; } .d--r { right: -5px; }

/* ---------- hero chain ---------- */
.wf-hero { padding-bottom: 90px; background: radial-gradient(60% 50% at 50% 0%, #fff4cf, rgba(255,255,255,0) 70%), linear-gradient(#fff 60%, var(--paper)); }
.chain { display: flex; justify-content: center; align-items: center; gap: 54px; margin-top: 64px; }
.cnode { position: relative; width: 190px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-s); text-align: left; font-size: 12px; line-height: 1.4; }
.cnode b { display: block; font-size: 13px; margin-bottom: 3px; }
.cnode small { color: var(--soft); }
.cnode:nth-child(2n) { translate: 0 22px; }
.cnode + .cnode::before { content: ""; position: absolute; right: 100%; top: 50%; width: 54px; border-top: 2px dotted #d8cdb3; transform: translateY(-11px) rotate(12deg); transform-origin: right; }
.cnode:nth-child(2n+1) + .cnode::before, .cnode:nth-child(2n) + .cnode::before { }
.cnode:nth-child(2n) + .cnode::before { transform: translateY(11px) rotate(-12deg); }
@media (max-width: 900px) {
  .chain { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .cnode { width: auto; }
  .cnode:nth-child(2n) { translate: none; }
  .cnode + .cnode::before { display: none; }
}

/* ---------- problem: Ist-/Wunsch-Zustand (Werte wie bei 321med) ---------- */
.pill--red::before { background: #ef5a4c; box-shadow: 0 0 0 3px rgba(239,90,76,.2); }
.pill--red { border-color: #ffd9d4; background: #fff5f3; }
.orch { max-width: 1000px; }
.orch__head { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.orch__cloud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.oc { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.oc__tile { width: calc(var(--tile, 56px) * var(--scale, 1)); height: calc(var(--tile, 56px) * var(--scale, 1)); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px rgba(19,31,54,.12); color: var(--ink); animation: orch-float var(--float, 8s) ease-in-out var(--float-delay, 0s) infinite; }
.oc__tile svg { width: 46%; height: 46%; }
.oc--p .oc__tile { overflow: hidden; background: #e9e4d8; }
.oc--p .oc__tile img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.oc small { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; max-width: 110px; line-height: 1.25; text-align: center; color: #7a7f86; }
@keyframes orch-float { 0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); } 50% { transform: rotate(var(--tilt, 0deg)) translateY(-12px); } }
.orch__text { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; }
.orch__text::before { content: ""; position: absolute; left: 50%; top: 50%; width: 680px; height: 250px; transform: translate(-50%, -50%); background: radial-gradient(rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 46%, rgba(255,255,255,0) 74%); pointer-events: none; z-index: -1; }
.orch__text .h2 { margin-top: 18px; }

.orch__pillwrap { position: relative; z-index: 3; text-align: center; margin-top: 22px; }
.orch__pill { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(19,31,54,.08); }
.orch__pill::before, .orch__pill::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; box-shadow: 0 6px 16px rgba(19,31,54,.18); transition: transform 620ms cubic-bezier(.6, -.2, .25, 1.3), opacity 620ms; }
.orch__pill::before { background: linear-gradient(135deg, #ff004b, #fc6d4c); }
.orch__pill::after { background: linear-gradient(135deg, var(--accent-2), var(--accent)); opacity: 0; }
.orch.is-aligned .orch__pill::before, .orch.is-aligned .orch__pill::after { transform: translateX(100%); }
.orch.is-aligned .orch__pill::after { opacity: 1; }
.orch__opt { position: relative; z-index: 1; padding: 7px 20px; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; text-align: center; color: #9aa1ac; transition: color 400ms; }
.orch__opt--ist { color: #fff; }
.orch.is-aligned .orch__opt--ist { color: #9aa1ac; }
.orch.is-aligned .orch__opt--wunsch { color: var(--accent-ink); }

.orch__chain { position: relative; height: 320px; margin: 8px auto 0; }
.orch__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.orch__lines path { fill: none; stroke: #D4A500; stroke-width: 2.4; stroke-dasharray: 7 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; stroke-dashoffset: 36; transition: opacity 700ms, stroke-dashoffset 700ms; transition-delay: var(--sd, 0ms); }
.orch.is-aligned .orch__lines path { opacity: .72; stroke-dashoffset: 0; }
.on-node { position: absolute; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%) translate(var(--cx, 0px), var(--cy, 0px)) rotate(var(--cr, 0deg)) scale(var(--cs, 1)); transition: transform 780ms cubic-bezier(.6, -.25, .25, 1.35); transition-delay: var(--nd, 0ms); }
.orch.is-aligned .on-node { transform: translate(-50%, -50%); }
.on-node__dot { width: 64px; height: 64px; border-radius: 30%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(19,31,54,.14); color: var(--ink); }
.on-node__dot svg { width: 44%; height: 44%; }
.on-node--lg .on-node__dot { width: 92px; height: 92px; box-shadow: 0 18px 38px rgba(19,31,54,.18); }
.on-node--dark .on-node__dot { background: linear-gradient(135deg, #2a2d31, #121417); color: var(--accent); }
.on-node--gold .on-node__dot { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); }
.on-node--beige .on-node__dot { background: linear-gradient(135deg, #c8bca6, #9f8e74); color: #fff; }
.on-node__lbl { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: 0; transition: opacity 400ms; transition-delay: var(--nd, 0ms); }
.orch.is-aligned .on-node__lbl { opacity: 1; }
@media (max-width: 900px) {
  .orch__head { min-height: 330px; }
  .oc { --scale: .78; }
  .oc:nth-child(n+5) { display: none; }
  .oc small { display: none; }
  .orch__text::before { width: 100%; }
  .orch__lines { display: none; }
  .orch__chain { height: auto; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 20px 0 6px; }
  .orch__chain::before { content: ""; position: absolute; left: 50%; top: 26px; bottom: 26px; border-left: 2px dashed rgba(217,163,0,.45); transform: translateX(-50%); z-index: 0; }
  .on-node { position: relative; left: auto !important; top: auto; transform: translate(var(--cx, 0px), var(--cy, 0px)) rotate(var(--cr, 0deg)) scale(var(--cs, 1)); }
  .orch.is-aligned .on-node { transform: none; }
  .on-node__dot { width: 56px; height: 56px; }
  .on-node--lg .on-node__dot { width: 72px; height: 72px; }
  .on-node__lbl { top: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) { .oc__tile { animation: none; } .on-node, .orch__lines path, .orch__pill::before, .orch__pill::after { transition: none; } }

/* ---------- builder: Ablauf-Baukasten mit Drag & Drop (Werte wie bei 321med) ---------- */
.wfx { position: relative; width: 1210px; max-width: none; margin: 0 0 0 calc(50% - 605px); padding: 60px 20px 70px; transform-origin: center top; overflow: visible; }
.wfx::before { content: ""; position: absolute; left: 50%; top: 50%; width: 920px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(186,176,154,.5) 0%, rgba(186,176,154,.08) 58%, rgba(186,176,154,0) 78%); filter: blur(115px); z-index: 0; }
.wfx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1080px; height: 620px; transform: translate(-50%, -50%); background-image: radial-gradient(circle, rgba(186,176,154,.38) 1.25px, transparent 1.35px); background-size: 17px 17px; background-position: center; -webkit-mask-image: radial-gradient(68% 58%, #000 0%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.45) 66%, transparent 100%); mask-image: radial-gradient(68% 58%, #000 0%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.45) 66%, transparent 100%); opacity: .9; pointer-events: none; z-index: 0; }
.wfx__inner { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; width: 100%; text-align: left; }
.wf-graph { --wf-height: 10px; --wf-stroke: 2; --wf-scene-offset: 96.5px; --wf-step-w: 145px; --wf-conn-w: 48px; --wf-col-gap: calc(var(--wf-step-w) + var(--wf-conn-w)); --wf-row-gap: 60px; --wf-row-h: 120px; position: relative; width: 1110px; margin: 0 auto; }
.wf-rows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--wf-row-gap); margin-left: var(--wf-scene-offset); }
.wf-row { display: flex; align-items: center; min-height: var(--wf-row-h); padding-left: calc(var(--wf-col-gap) * var(--wf-offset, 0)); }
.wf-steps { display: flex; align-items: center; justify-content: flex-start; }
.wf-step { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: var(--wf-step-w); }
.wf-step--up { transform: translateY(calc(-1 * var(--wf-height))); }
.wf-step--down { transform: translateY(var(--wf-height)); }
.wf-card { position: relative; background: #fff; border-radius: 14px; min-width: 140px; max-width: 220px; padding: 12px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.08); text-align: left; }
.wf-card h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.wf-card p { font-size: 12px; line-height: 1.4; opacity: .85; }
.wf-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #bab09a; box-shadow: 0 0 0 6px rgba(186,176,154,.18); }
.wf-dot--l { left: 0; transform: translate(-50%, -50%); }
.wf-dot--r { right: 0; transform: translate(50%, -50%); }
.wf-conn { flex: 0 0 var(--wf-conn-w); min-width: var(--wf-conn-w); height: 40px; display: flex; align-items: center; justify-content: center; }
.wf-conn svg { width: 100%; height: 100%; }
.wf-conn path { fill: none; stroke: rgba(186,176,154,.55); stroke-width: var(--wf-stroke); stroke-linecap: round; }
.wf-auto { position: absolute; top: -12px; right: -12px; z-index: 4; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); box-shadow: 0 6px 14px rgba(245,197,24,.4); }
.wf-auto::after { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 999px; background: radial-gradient(circle, rgba(245,197,24,.5) 0%, rgba(255,207,58,.28) 45%, rgba(245,197,24,0) 80%); animation: wf-pulse 1.35s ease-out infinite; }
.wf-branch, .wf-edge, .wf-drag { position: absolute; left: 0; top: 0; width: 1110px; height: 480px; pointer-events: none; transform: translateX(var(--wf-scene-offset)); transform-origin: left top; }
.wf-branch, .wf-edge { z-index: 1; }
.wf-branch path { fill: none; stroke: rgba(186,176,154,.55); stroke-width: calc(var(--wf-stroke) * .9); stroke-linecap: round; }
.wf-edge path { fill: none; stroke: rgba(186,176,154,.65); stroke-width: calc(var(--wf-stroke) * .9); stroke-dasharray: 8 8; stroke-linecap: round; }
.wf-drag { z-index: 3; }
.wf-src { position: absolute; left: calc(32px + var(--wf-scene-offset)); top: 258px; width: 250px; height: 156px; z-index: 2; }
.wf-src__box { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.wf-src__box::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 16px; border: 2px dashed rgba(148,154,164,.35); background: rgba(233,237,242,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); opacity: 0; animation: wf-dropzone 7.5s ease-in-out infinite; }
.wf-src__fill { position: absolute; inset: 0; z-index: 1; border-radius: 16px; border: 10px solid #fff; background-size: cover; background-position: center; animation: wf-src 7.5s ease-in-out infinite; }
.wf-ghost { position: absolute; left: 32px; top: 258px; width: 250px; height: 156px; animation: wf-ghost-move 7.5s ease-in-out infinite; }
.wf-ghost__img { position: absolute; inset: 0; border-radius: 16px; border: 10px solid #fff; background: #f3f4f2 center / cover; box-shadow: 0 14px 30px rgba(0,0,0,.16); opacity: 0; transform-origin: 50% 50%; animation: wf-ghost-visual 7.5s ease-in-out infinite; }
.wf-cursor { position: absolute; right: -12px; top: 58%; z-index: 5; width: 34px; height: 34px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M4.6 2.4C3.3 1.9 2.1 3.1 2.6 4.4L11.6 27.6C12.1 28.8 13.9 28.8 14.4 27.5L18.2 17L28.8 13.1C30.1 12.6 30.2 10.8 28.9 10.2L4.6 2.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M4.6 2.4C3.3 1.9 2.1 3.1 2.6 4.4L11.6 27.6C12.1 28.8 13.9 28.8 14.4 27.5L18.2 17L28.8 13.1C30.1 12.6 30.2 10.8 28.9 10.2L4.6 2.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform: translateY(-50%) rotate(-18deg); filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 3px 7px rgba(0,0,0,.28)); animation: wf-cursor 7.5s ease-in-out infinite; }
.wf-drop .wf-card { animation: wf-drop-card 7.5s ease-in-out infinite; }
.wf-drop .wf-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 14px; border: 2px dashed rgba(150,156,166,.8); background: #f1eee8; pointer-events: none; animation: wf-drop-zone 7.5s ease-in-out infinite; }
.wf-drop .wf-card h4, .wf-drop .wf-card p, .wf-drop .wf-dot, .wf-drop .wf-auto { animation: wf-drop-content 7.5s ease-in-out infinite; }
.wf-drop .wf-auto::after { animation: wf-pulse 1.35s ease-out infinite; }

@keyframes wf-pulse { 0% { transform: scale(.9); opacity: .75; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes wf-ghost-move { 0%, 24% { transform: translate(0, 0); } 58%, 100% { transform: translate(304px, -108px); } }
@keyframes wf-ghost-visual { 0%, 10% { opacity: 0; transform: scale(1); } 12%, 24% { opacity: 1; transform: scale(1); } 58% { opacity: 1; transform: scale(.58); } 64%, 100% { opacity: 0; transform: scale(.78); } }
@keyframes wf-cursor {
  0%, 7% { opacity: 0; transform: translate(36px, -34%) rotate(-8deg) scale(.92); }
  8%, 14% { opacity: 1; transform: translate(36px, -34%) rotate(-8deg) scale(.92); }
  20%, 24% { opacity: 1; transform: translate(0, -50%) rotate(-18deg) scale(1); }
  25.5% { opacity: 1; transform: translate(0, -50%) rotate(-18deg) scale(.82); }
  27% { opacity: 1; transform: translate(0, -50%) rotate(-18deg) scale(1); }
  58%, 72% { opacity: 1; transform: translate(-52px, -50%) rotate(-14deg) scale(1); }
  82%, 100% { opacity: 0; transform: translate(24px, -24%) rotate(-4deg) scale(.88); }
}
@keyframes wf-src { 0%, 22% { opacity: 1; } 24%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes wf-dropzone { 0%, 22% { opacity: 0; } 24%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes wf-drop-card { 0%, 62% { opacity: .42; box-shadow: 0 0 0 rgba(0,0,0,0); } 64%, 90% { opacity: 1; box-shadow: 0 6px 18px rgba(0,0,0,.08); } 100% { opacity: .42; box-shadow: 0 0 0 rgba(0,0,0,0); } }
@keyframes wf-drop-zone { 0%, 62% { opacity: 1; } 64%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wf-drop-content { 0%, 62% { opacity: 0; } 64%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wf-auto::after, .wf-src__fill, .wf-src__box::before, .wf-ghost, .wf-ghost__img, .wf-cursor, .wf-drop .wf-card, .wf-drop .wf-card::before, .wf-drop .wf-card h4, .wf-drop .wf-card p, .wf-drop .wf-dot, .wf-drop .wf-auto { animation: none; }
  .wf-ghost__img, .wf-cursor, .wf-drop .wf-card::before { opacity: 0; }
}

/* ---------- demo ---------- */
.screen.demo main { position: relative; display: block; padding: 0; min-height: 420px; background: radial-gradient(circle, rgba(30,34,39,.1) 1px, transparent 1.4px) 0 0 / 16px 16px; }
.demo__canvas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; padding: 20px; filter: blur(1.5px); opacity: .7; }
.demo__canvas em { width: 30px; border-top: 2px dashed #cdbf9c; }
.mini { background: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-s); font-size: 11px; min-width: 110px; }
.mini b { display: block; font-size: 12px; }
.mini small { color: var(--soft); }
.mini.on { outline: 2px solid var(--accent); }
.demo__over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(30,34,39,.35); color: #fff; text-align: center; }
.demo__over b { font-family: var(--display); font-size: clamp(18px, 1rem + 1vw, 26px); }
@media (max-width: 900px) { .screen.demo main { min-height: 260px; } .demo__canvas { flex-wrap: wrap; gap: 8px; } .demo__canvas em { display: none; } }

/* ---------- vorher / nachher ---------- */
.vn { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 980px; margin: 0 auto; }
.vn__box { position: relative; border-radius: 26px; padding: 40px 22px 26px; background: #fff; }
.vn__box--v { border: 6px solid #ffd3cd; box-shadow: 0 30px 60px -30px rgba(239,90,76,.45); }
.vn__box--n { border: 6px solid #ffe7a6; box-shadow: 0 30px 60px -30px rgba(245,197,24,.55); }
.vn__tag { position: absolute; top: -17px; left: 50%; translate: -50% 0; padding: 7px 18px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vn__box--v .vn__tag { background: linear-gradient(135deg, #ff6a5a, #e8443c); color: #fff; }
.vn__box--n .vn__tag { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); }
.vn ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vn li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); border: 1px solid var(--line); }
.vn li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; }
.vn__box--v li i { background: #ffe5e2; color: #c0392b; }
.vn__box--n li i { background: #fff3c8; color: #8a6700; }
@media (max-width: 800px) { .vn { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- einrichtung trio ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tcard { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 30px 26px 0; box-shadow: var(--shadow); display: flex; flex-direction: column; text-align: center; overflow: hidden; }
.tcard__eb { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a0791a; }
.tcard h3 { font-family: var(--display); font-size: 22px; margin: 8px 0 10px; }
.tcard p { font-size: 14px; color: var(--soft); }
.tcard__vis { margin-top: auto; padding-top: 26px; height: 230px; display: grid; place-items: center; }
.tcard__vis--photo { padding: 26px 0 0; }
.tcard__vis--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; border-radius: 18px 18px 0 0; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.mui { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; font-size: 12px; }
.mui__l { display: grid; gap: 8px; align-content: start; }
.mui__l b { font-size: 12.5px; }
.mui__l span { background: var(--paper); border-radius: 8px; padding: 8px 10px; }
.mui__r { display: grid; justify-items: center; gap: 4px; align-content: start; padding-top: 18px; }
.mui__r i { height: 22px; border-left: 2px dashed #cdbf9c; }
.mui__n { background: #fff; border-radius: 9px; padding: 9px 10px; box-shadow: var(--shadow-s); font-weight: 600; white-space: nowrap; }
.mui__n.on { outline: 2px solid var(--accent); }
.ai { width: 100%; display: grid; gap: 14px; justify-items: center; }
.ai__orbit { position: relative; width: 180px; height: 130px; }
.ai__orbit span { position: absolute; translate: -50% -50%; width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-s); display: grid; place-items: center; color: var(--soft); }
.ai__orbit span svg { width: 16px; height: 16px; }
.ai__core { position: absolute; left: 50%; top: 58%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); font-family: var(--display); font-size: 18px; box-shadow: 0 0 0 10px rgba(245,197,24,.15), 0 0 40px 8px rgba(245,197,24,.35); }
.ai__in { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; font-size: 12.5px; color: var(--faint); text-align: left; }
.ai__in b { background: var(--dark); color: #fff; font-size: 12px; padding: 7px 14px; border-radius: 9px; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }
.tcard__vis:not(.tcard__vis--photo) { padding-bottom: 26px; height: 256px; }
.orch__text .h2 { font-size: clamp(30px, 1.5rem + 1.5vw, 44px); }
.orch__text .sub { max-width: 620px; margin-inline: auto; }