/* Beitrag „Was ist ein KI-Agent?" – nur beitragseigene Elemente (Präfix ag-)
   Farbneutral und responsiv: Text erbt die Seitenfarbe. */
.ag-fig,.ag-demo,.ag-formula,.ag-code,.ag-gloss{color:inherit;max-width:100%;box-sizing:border-box}
.ag-fig{margin:28px 0}
.ag-fig figcaption,.ag-cap{opacity:.75;font-size:14px;font-style:italic;margin-top:10px}

.ag-formula{font-family:"JetBrains Mono",ui-monospace,monospace;text-align:center;font-size:clamp(14px,3.6vw,17px);padding:14px;margin:22px 0;background:rgba(10,186,181,.10);border:1px solid rgba(10,186,181,.45);border-radius:8px;overflow-wrap:anywhere}

.ag-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;line-height:1.6;background:color-mix(in srgb,currentColor 6%,transparent);border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:8px;padding:12px 14px;margin:20px 0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.ag-code .ag-c{opacity:.6}
.ag-code .ag-k{color:#0A9E9A;font-weight:600}
.ag-code .ag-w{color:#C26A1E}

/* Positions-Tabelle */
.ag-pos{width:100%;border-collapse:collapse;font-size:15px;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.ag-pos th{text-align:left;font-weight:600;font-size:13px;padding:9px 12px;background:color-mix(in srgb,currentColor 8%,transparent);color:inherit}
.ag-pos td{padding:9px 12px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);color:inherit;background:transparent;overflow-wrap:anywhere}
.ag-pos .ag-diff{color:#C26A1E;font-weight:700}
@media (max-width:560px){.ag-pos{font-size:14px}.ag-pos th,.ag-pos td{padding:7px 8px}}

/* Ablauf Position 7 – Liste ohne Nummern der Website, eigene Zeitleiste */
.ag-demo{background:color-mix(in srgb,currentColor 4%,transparent);border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:12px;padding:18px;margin:30px 0}
.ag-head{margin:0 0 14px}
.ag-label{margin:0;color:#0A9E9A;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ag-btns,.ag-counter{display:none!important}
.ag-demo ol.ag-steps{list-style:none!important;margin:0!important;padding:0!important;counter-reset:none}
.ag-demo ol.ag-steps>li.ag-step{list-style:none!important;position:relative;margin:0 0 0 5px!important;padding:0 0 18px 18px!important;border-left:2px solid color-mix(in srgb,currentColor 25%,transparent);min-width:0}
.ag-demo ol.ag-steps>li.ag-step::marker{content:""!important;font-size:0}
.ag-demo ol.ag-steps>li.ag-step:last-child{padding-bottom:0!important}
.ag-demo ol.ag-steps>li.ag-step::before{content:""!important;position:absolute;left:-6px;top:.45em;width:10px;height:10px;border-radius:50%;background:#0A9E9A;counter-increment:none}
.ag-demo ol.ag-steps>li.ag-final::before{background:#C26A1E}
.ag-step p{margin:0 0 8px;color:inherit;overflow-wrap:anywhere;line-height:1.5}
.ag-lbl{font-size:12px;line-height:1.5!important;opacity:.7;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ag-think{font-style:italic;opacity:.85}
.ag-call{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.5;color:#0A9E9A;font-weight:600;background:color-mix(in srgb,currentColor 6%,transparent);border-radius:5px;padding:6px 9px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.ag-res{border-left:3px solid #0A9E9A;padding-left:10px}
.ag-final .ag-code{margin:6px 0 0}
@media (max-width:560px){.ag-demo{padding:14px 12px}.ag-demo ol.ag-steps>li.ag-step{padding-left:12px!important}}

/* MCP-Grafik */
.ag-mcp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.ag-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.ag-node{background:color-mix(in srgb,currentColor 4%,transparent);border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;color:inherit;min-width:0}
.ag-node.ag-agent{border-color:#0A9E9A;background:rgba(10,186,181,.12)}
.ag-tag{font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ag-name{font-family:"Abel",sans-serif;font-size:19px}
.ag-sub{font-size:13px;opacity:.8;line-height:1.4;overflow-wrap:anywhere}
.ag-plug{font-family:"Abel",sans-serif;color:#0A9E9A;text-align:center;line-height:1.25;font-weight:600}
@media (max-width:640px){.ag-mcp{grid-template-columns:minmax(0,1fr)}.ag-plug{padding:2px 0}.ag-plug br{display:none}}

/* Glossar */
.ag-gloss{margin:10px 0 0}
.ag-gloss dt{font-family:"Abel",sans-serif;font-size:20px;color:#0A9E9A;margin-top:18px}
.ag-gloss dd{margin:4px 0 0}

@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .ag-demo,.ag-node,.ag-code,.ag-call,.ag-pos th{background:rgba(128,128,128,.08)}
  .ag-demo,.ag-node,.ag-code,.ag-pos{border-color:rgba(128,128,128,.35)}
  .ag-pos td,.ag-demo ol.ag-steps>li.ag-step{border-color:rgba(128,128,128,.3)}
}