/* ===========================================================
   HostSpezial — Agentic AI Infrastruktur
   Sektions-Stylesheet für /agentic-ai/*
   Einbinden NACH components/styles.css, assets/pages.css,
   assets/ai-theme.css. Erbt Farben/Variablen aus ai-theme.css.
   =========================================================== */

:root {
    --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', ui-monospace, Consolas, monospace;
    --amber: #d99441;          /* Fehlerpfad / Retry — Kontrast >= 4.5:1 auf --ink */
    --amber-soft: #e8b273;
    --ok: #4fbd7d;             /* aufgehellt gegenüber --green für AA auf dunklem Grund */
    --lane: rgba(255,255,255,0.045);
}

/* ---- Skip-Link ---- */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--cyan); color: #fff; padding: 12px 20px;
    font-size: 14px; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- Fokus: überall sichtbar, nie unterdrückt ---- */
.ag a:focus-visible,
.ag button:focus-visible,
.ag summary:focus-visible,
.ag input:focus-visible,
.ag select:focus-visible {
    outline: 2px solid var(--cyan-soft);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- Breadcrumb ---- */
.crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 18px 56px 0; font-size: 13px; color: var(--txt-faint);
}
.crumb a { color: var(--txt-dim); text-decoration: none; }
.crumb a:hover { color: #fff; }
.crumb .cur { color: var(--txt-dim); }
@media (max-width: 768px) { .crumb { padding: 14px 24px 0; } }

/* ---- Glossar-Links im dunklen Theme ---- */
.ag a.glossary-link { color: var(--cyan-soft); }
.ag a.glossary-link:hover { color: #fff; text-decoration-color: #fff; }

/* ===========================================================
   HERO
   =========================================================== */
.ag-hero {
    position: relative; overflow: hidden;
    padding: 56px 56px 64px;
    background:
        radial-gradient(900px 500px at 78% -10%, rgba(0,177,235,0.10), transparent 62%),
        var(--ink);
    border-bottom: 1px solid var(--line);
}
.ag-hero-grid {
    display: grid; grid-template-columns: minmax(340px, 480px) 1fr;
    gap: 56px; align-items: center;
}
.ag-hero h1 {
    font-size: 46px; line-height: 1.08; letter-spacing: -1.6px;
    font-weight: 700; color: #fff; margin: 0 0 20px;
}
.ag-hero h1 .ac { color: var(--cyan-soft); }
.ag-hero-sub {
    font-size: 17.5px; line-height: 1.65; color: var(--txt-dim);
    margin: 0 0 28px; max-width: 46ch;
}
.ag-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

/* Kopierbare Codezeile */
.ag-cmd {
    display: flex; align-items: center; gap: 12px;
    background: #0b1218; border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); padding: 11px 12px 11px 16px;
    max-width: 420px; margin-bottom: 26px;
}
.ag-cmd code {
    font-family: var(--mono); font-size: 13px; color: var(--txt);
    white-space: nowrap; overflow-x: auto; flex: 1;
}
.ag-cmd code::before { content: '$ '; color: var(--cyan-soft); }
.ag-copy {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 6px 10px; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
    border-radius: 4px; color: var(--txt-dim);
    font-size: 11.5px; font-weight: 600; font-family: inherit;
    transition: color .15s, background .15s;
}
.ag-copy:hover { color: #fff; background: rgba(255,255,255,0.09); }
.ag-copy svg { width: 13px; height: 13px; }
.ag-copy.done { color: var(--ok); border-color: rgba(79,189,125,0.4); }

/* Trust-Zeile */
.ag-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ag-trust li {
    list-style: none; display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--txt-dim);
}
.ag-trust svg { width: 15px; height: 15px; color: var(--cyan-soft); flex-shrink: 0; }

@media (max-width: 1120px) {
    .ag-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .ag-hero h1 { font-size: 40px; }
}
@media (max-width: 768px) {
    .ag-hero { padding: 36px 24px 48px; }
    .ag-hero h1 { font-size: 31px; letter-spacing: -1px; }
    .ag-hero-sub { font-size: 16px; }
    .ag-hero-actions .ai-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .ag-hero h1 { font-size: 26px; }
}

/* ===========================================================
   AGENT-RUN-MOCKUP  (.arm)
   Reine SVG+CSS-Animation. Timeline: 16 s Loop.
   Sichtbarkeits-Beats: b1 … b16 (siehe @keyframes unten).
   =========================================================== */
.arm-frame {
    position: relative;
    aspect-ratio: 1120 / 680;      /* verhindert Layout-Shift (CLS 0) */
    width: 100%;
    background: #090d12;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.arm-frame svg { display: block; width: 100%; height: 100%; }
.arm-cap {
    font-family: var(--mono); font-size: 11.5px; color: var(--txt-faint);
    margin-top: 10px; letter-spacing: .2px;
}

/* SVG-Textrollen */
.arm text { font-family: var(--mono); }
.arm .t-lbl  { font-size: 10px; fill: rgba(255,255,255,0.45); letter-spacing: 1.1px; }
.arm .t-key  { font-size: 12.5px; fill: rgba(255,255,255,0.92); font-weight: 600; }
.arm .t-val  { font-size: 11.5px; fill: rgba(255,255,255,0.62); }
.arm .t-mini { font-size: 10px; fill: rgba(255,255,255,0.5); }
.arm .t-cy   { fill: #7fcbe6; }
.arm .t-ok   { fill: #6fd39a; }
.arm .t-am   { fill: #e8b273; }

.arm .panel { fill: #0c1219; stroke: rgba(255,255,255,0.09); }
.arm .lane  { fill: rgba(255,255,255,0.04); }
.arm .node  { fill: #111a22; stroke: rgba(255,255,255,0.14); }
.arm .node-hot { fill: #10222c; stroke: rgba(0,177,235,0.55); }
.arm .edge  { stroke: rgba(255,255,255,0.22); stroke-width: 1.4; fill: none; }
.arm .edge-hot { stroke: #2a9fc4; stroke-width: 1.6; fill: none; }
.arm .bar-ok { fill: #2f8f60; }
.arm .bar-cy { fill: #1d7fa0; }
.arm .bar-am { fill: #a86a2a; }

/* --- Beat-Sichtbarkeit --------------------------------------------------
   Jedes Element bekommt genau eine Beat-Klasse. Alle Beats laufen im
   gleichen 16-s-Zyklus, blenden bei 93 % gemeinsam aus und lassen
   93–100 % Ruhepause vor dem Neustart.
   ---------------------------------------------------------------------- */
.arm [class*="b"] { }
.arm .b1,.arm .b2,.arm .b3,.arm .b4,.arm .b5,.arm .b6,.arm .b7,.arm .b8,
.arm .b9,.arm .b10,.arm .b11,.arm .b12,.arm .b13,.arm .b14,.arm .b15,.arm .b16 {
    animation-duration: 16s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    will-change: opacity, transform;
}
@keyframes b1  {0%,1%{opacity:0;transform:translateY(5px)}4%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b2  {0%,4%{opacity:0;transform:translateY(5px)}7%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b3  {0%,8%{opacity:0;transform:translateY(5px)}11%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b4  {0%,12%{opacity:0;transform:translateY(5px)}15%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b5  {0%,16%{opacity:0;transform:translateY(5px)}19%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b6  {0%,21%{opacity:0;transform:translateY(5px)}24%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b7  {0%,26%{opacity:0;transform:translateY(5px)}29%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b8  {0%,31%{opacity:0;transform:translateY(5px)}34%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b9  {0%,37%{opacity:0;transform:translateY(5px)}40%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b10 {0%,43%{opacity:0;transform:translateY(5px)}46%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b11 {0%,49%{opacity:0;transform:translateY(5px)}52%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b12 {0%,55%{opacity:0;transform:translateY(5px)}58%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b13 {0%,61%{opacity:0;transform:translateY(5px)}64%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b14 {0%,67%{opacity:0;transform:translateY(5px)}70%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b15 {0%,74%{opacity:0;transform:translateY(5px)}77%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b16 {0%,82%{opacity:0;transform:translateY(5px)}85%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.arm .b1{animation-name:b1}   .arm .b2{animation-name:b2}   .arm .b3{animation-name:b3}
.arm .b4{animation-name:b4}   .arm .b5{animation-name:b5}   .arm .b6{animation-name:b6}
.arm .b7{animation-name:b7}   .arm .b8{animation-name:b8}   .arm .b9{animation-name:b9}
.arm .b10{animation-name:b10} .arm .b11{animation-name:b11} .arm .b12{animation-name:b12}
.arm .b13{animation-name:b13} .arm .b14{animation-name:b14} .arm .b15{animation-name:b15}
.arm .b16{animation-name:b16}

/* Transient: der Fehlzustand. Erscheint bei b11, verschwindet bei b13 wieder. */
@keyframes fail-state {0%,49%{opacity:0}52%,60%{opacity:1}64%,100%{opacity:0}}
.arm .fail-state {
    animation: fail-state 16s infinite ease-out both;
    will-change: opacity;
}
/* Retry-Bogen: springt zurück und zeichnet sich */
@keyframes retry-arc {
    0%,58%{opacity:0;stroke-dashoffset:var(--len,440)}
    61%{opacity:1;stroke-dashoffset:var(--len,440)}
    67%,90%{opacity:1;stroke-dashoffset:0}
    96%,100%{opacity:0;stroke-dashoffset:0}
}
.arm .retry-arc {
    stroke-dasharray: var(--len, 440); stroke-dashoffset: var(--len, 440);
    animation: retry-arc 16s infinite ease-in-out both;
}
/* DAG-Kanten zeichnen sich progressiv */
@keyframes draw-edge {
    0%,11%{opacity:0;stroke-dashoffset:var(--len,140)}
    14%{opacity:1}
    22%,93%{opacity:1;stroke-dashoffset:0}
    96%,100%{opacity:0}
}
.arm .draw {
    stroke-dasharray: var(--len, 140);
    stroke-dashoffset: var(--len, 140);
    animation: draw-edge 16s infinite ease-out both;
}
/* Trigger-Puls */
@keyframes trig-pulse {
    0%,2%{opacity:.15;transform:scale(.7)}
    5%{opacity:.5;transform:scale(1)}
    12%{opacity:0;transform:scale(2.2)}
    100%{opacity:0;transform:scale(2.2)}
}
.arm .trig-pulse {
    transform-box: fill-box; transform-origin: center;
    animation: trig-pulse 16s infinite ease-out both;
}
/* Policy-Gate quittiert kurz grün */
@keyframes gate-ack {
    0%,24%{opacity:0}
    27%,36%{opacity:1}
    40%,100%{opacity:.35}
}
.arm .gate-ack { animation: gate-ack 16s infinite ease-out both; }

/* Span-Balken wachsen (transform statt width — GPU-freundlich) */
.arm .span-bar {
    transform-box: fill-box; transform-origin: left center;
    transform: scaleX(0);
    animation-duration: 16s; animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.2,.7,.3,1); animation-fill-mode: both;
    will-change: transform;
}
@keyframes grow1 {0%,8%{transform:scaleX(0);opacity:0}10%{opacity:1}16%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
@keyframes grow2 {0%,19%{transform:scaleX(0);opacity:0}21%{opacity:1}27%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
@keyframes grow3 {0%,29%{transform:scaleX(0);opacity:0}31%{opacity:1}38%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
@keyframes grow4 {0%,40%{transform:scaleX(0);opacity:0}42%{opacity:1}48%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
@keyframes grow5 {0%,50%{transform:scaleX(0);opacity:0}52%{opacity:1}59%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
@keyframes grow6 {0%,62%{transform:scaleX(0);opacity:0}64%{opacity:1}70%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
@keyframes grow7 {0%,72%{transform:scaleX(0);opacity:0}74%{opacity:1}80%,93%{transform:scaleX(1);opacity:1}96%,100%{opacity:0}}
.arm .g1{animation-name:grow1} .arm .g2{animation-name:grow2} .arm .g3{animation-name:grow3}
.arm .g4{animation-name:grow4} .arm .g5{animation-name:grow5} .arm .g6{animation-name:grow6}
.arm .g7{animation-name:grow7}

/* -----------------------------------------------------------------------
   Mobile: Panels stapeln vertikal, Tool-Layer auf 3 Calls (der Fehlerpfad
   bleibt sichtbar — er ist das Argument), Trace auf 4 Spans gekuerzt.
   viewBox-Umschaltung uebernimmt agentic.js.
   ----------------------------------------------------------------------- */
.arm-frame[data-layout="mobile"] { aspect-ratio: 600 / 1210; }
.arm-frame[data-layout="mobile"] .arm-trigger   { transform: translate(170px, -16px); }
.arm-frame[data-layout="mobile"] .arm-dag       { transform: translate(-221px, 150px); }
.arm-frame[data-layout="mobile"] .arm-tools     { transform: translate(-221px, 150px); }
.arm-frame[data-layout="mobile"] .arm-trace     { transform: translate(-640px, 754px); }
.arm-frame[data-layout="mobile"] .arm-panel-c   { height: 318px; }
.arm-frame[data-layout="mobile"] .arm-panel-d   { height: 410px; }
.arm-frame[data-layout="mobile"] .arm-tail      { transform: translateY(-62px); }
.arm-frame[data-layout="mobile"] .arm-span-3    { transform: translateY(-44px); }
.arm-frame[data-layout="mobile"] .arm-span-tail { transform: translateY(-132px); }
.arm-frame[data-layout="mobile"] .arm-metrics   { transform: translateY(-136px); }
.arm-frame[data-layout="mobile"] .arm-status    { transform: translateY(-196px); }
.arm-frame[data-layout="mobile"] .arm-only-wide { display: none; }

/* -----------------------------------------------------------------------
   Reduced Motion: friert auf dem VOLLSTAENDIGEN Endzustand ein
   (abgeschlossener Run), nicht auf dem leeren Anfangszustand.
   Bewusst nur Formen/Text targeten, damit die <g>-Layout-Transforms
   der Mobile-Stapelung erhalten bleiben.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .arm text, .arm rect, .arm circle, .arm path, .arm line, .arm polygon, .arm tspan {
        animation: none !important; opacity: 1 !important;
    }
    .arm text, .arm circle, .arm line, .arm polygon { transform: none !important; }
    .arm rect:not(.span-bar) { transform: none !important; }
    .arm .draw, .arm .retry-arc { stroke-dashoffset: 0 !important; }
    .arm .span-bar { transform: scaleX(1) !important; }
    .arm .fail-state { display: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================
   ZITIERFÄHIGER ANTWORT-ABSATZ (AEO/GEO)
   40–60 Wörter, beantwortet die Kernfrage der Seite direkt.
   =========================================================== */
.ag-answer {
    border-left: 2px solid var(--cyan);
    background: linear-gradient(90deg, rgba(0,177,235,0.06), transparent 70%);
    padding: 20px 26px; margin: 0 0 34px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    max-width: 78ch;
}
.ag-answer p { font-size: 16.5px; line-height: 1.7; color: var(--txt); margin: 0; }
.ag-answer strong { color: #fff; }

/* Definitionsblock — eigenständig zitierfähig */
.ag-def {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); padding: 20px 24px; margin: 22px 0;
}
.ag-def dt {
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    color: var(--cyan-soft); letter-spacing: .6px; text-transform: uppercase;
    margin-bottom: 8px;
}
.ag-def dd { margin: 0; font-size: 15px; line-height: 1.75; color: var(--txt-dim); }
.ag-def dd + dt { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ===========================================================
   PROSA / CONTENT-LAYOUT
   =========================================================== */
.ag-doc { display: grid; grid-template-columns: 1fr 260px; gap: 56px; align-items: start; }
.ag-doc-main { min-width: 0; }
.ag-toc {
    position: sticky; top: 96px;
    border-left: 1px solid var(--line); padding-left: 20px;
}
.ag-toc-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--txt-faint); margin-bottom: 14px;
}
.ag-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.ag-toc li { margin-bottom: 9px; counter-increment: toc; }
.ag-toc a {
    font-size: 13px; line-height: 1.45; color: var(--txt-dim); text-decoration: none;
    display: block;
}
.ag-toc a::before { content: counter(toc) '. '; color: var(--txt-faint); font-family: var(--mono); font-size: 11px; }
.ag-toc a:hover { color: #fff; }
.ag-toc a.on { color: var(--cyan-soft); }
@media (max-width: 1024px) { .ag-doc { grid-template-columns: 1fr; gap: 32px; } .ag-toc { position: static; } }

.ag-prose { color: var(--txt-dim); font-size: 16px; line-height: 1.8; max-width: 78ch; }
.ag-prose > p { margin: 0 0 18px; }
.ag-prose h2 {
    color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -.5px;
    margin: 52px 0 16px; scroll-margin-top: 90px;
}
.ag-prose h3 { color: #fff; font-size: 19px; font-weight: 700; margin: 32px 0 12px; scroll-margin-top: 90px; }
.ag-prose h4 { color: rgba(255,255,255,0.86); font-size: 15.5px; font-weight: 700; margin: 24px 0 10px; }
.ag-prose ul, .ag-prose ol { margin: 0 0 18px 22px; }
.ag-prose li { margin-bottom: 9px; }
.ag-prose strong { color: #fff; }
.ag-prose a { color: var(--cyan-soft); }
.ag-prose code:not(pre code) {
    font-family: var(--mono); font-size: .88em; color: #9dd8ee;
    background: rgba(255,255,255,0.055); border: 1px solid var(--line);
    border-radius: 3px; padding: 1px 5px;
}
.ag-prose figure { margin: 32px 0; }
.ag-prose figcaption { font-size: 12.5px; color: var(--txt-faint); margin-top: 10px; font-family: var(--mono); }

/* Quellenangabe im Fließtext — zitierfähig */
.ag-src { font-size: 13px; color: var(--txt-faint); font-style: normal; }
.ag-src a { color: var(--txt-dim); }

/* ===========================================================
   CODE-BLÖCKE  (Copy-Button, keine Zeilennummern im DOM)
   =========================================================== */
.ag-code { margin: 24px 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: #0a1016; }
.ag-code-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 12px 9px 16px; border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.025);
}
.ag-code-name { font-family: var(--mono); font-size: 11.5px; color: var(--txt-dim); letter-spacing: .3px; }
.ag-code pre { margin: 0; padding: 18px 20px; overflow-x: auto; }
.ag-code code {
    font-family: var(--mono); font-size: 13px; line-height: 1.65;
    color: rgba(255,255,255,0.82); white-space: pre; display: block;
}
.ag-code .c { color: rgba(255,255,255,0.38); }        /* Kommentar */
.ag-code .k { color: #7fb7e8; }                        /* Keyword */
.ag-code .s { color: #8ecf9f; }                        /* String */
.ag-code .f { color: #e0c07a; }                        /* Funktion */
.ag-code .n { color: #d49ad4; }                        /* Zahl/Konstante */

/* Tabs für TypeScript/Python */
.ag-tabs { display: flex; gap: 2px; }
.ag-tab {
    font-family: var(--mono); font-size: 11.5px; font-weight: 600;
    padding: 6px 12px; min-height: 30px; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 3px;
    color: var(--txt-faint);
}
.ag-tab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,0.07); border-color: var(--line-strong); }

/* ===========================================================
   TABELLEN — echte <table>, zitierfähig für Antwortmaschinen
   =========================================================== */
.ag-table-wrap { overflow-x: auto; margin: 26px 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
table.ag-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.ag-table caption {
    text-align: left; padding: 14px 18px; font-size: 12.5px; color: var(--txt-faint);
    border-bottom: 1px solid var(--line); font-family: var(--mono);
}
table.ag-table th, table.ag-table td { padding: 12px 18px; text-align: left; vertical-align: top; }
table.ag-table thead th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.1px;
    color: var(--txt-faint); font-weight: 700; border-bottom: 1px solid var(--line-strong);
    background: rgba(255,255,255,0.025);
}
table.ag-table tbody tr { border-bottom: 1px solid var(--line); }
table.ag-table tbody tr:last-child { border-bottom: none; }
table.ag-table tbody th { color: #fff; font-weight: 600; }
table.ag-table td { color: var(--txt-dim); line-height: 1.6; }
table.ag-table .num { font-family: var(--mono); color: rgba(255,255,255,0.86); white-space: nowrap; }
table.ag-table .yes { color: var(--ok); font-weight: 600; }
table.ag-table .no  { color: rgba(255,255,255,0.32); }
table.ag-table .part { color: var(--amber-soft); }

/* ===========================================================
   KPI / METRIKEN
   =========================================================== */
.ag-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.ag-kpi { background: var(--ink-2); padding: 22px 24px; }
.ag-kpi b {
    display: block; font-family: var(--mono); font-size: 27px; font-weight: 700;
    color: #fff; letter-spacing: -.6px; line-height: 1.1;
}
.ag-kpi b .u { font-size: 15px; color: var(--cyan-soft); }
.ag-kpi span { display: block; font-size: 12.5px; color: var(--txt-dim); margin-top: 8px; line-height: 1.5; }
.ag-kpi em { display: block; font-style: normal; font-size: 11px; color: var(--txt-faint); margin-top: 6px; }

/* Vorher/Nachher */
.ag-ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.ag-ba-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 20px; }
.ag-ba-item .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--txt-faint); }
.ag-ba-row { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-family: var(--mono); }
.ag-ba-row .before { font-size: 15px; color: var(--txt-faint); text-decoration: line-through; }
.ag-ba-row .arrow { color: var(--txt-faint); }
.ag-ba-row .after { font-size: 22px; font-weight: 700; color: var(--ok); }
@media (max-width: 768px) { .ag-ba { grid-template-columns: 1fr; } }

/* ===========================================================
   HINWEIS-BLÖCKE
   =========================================================== */
.ag-note, .ag-limit {
    border: 1px solid var(--line); border-left-width: 2px;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 18px 22px; margin: 24px 0; font-size: 14.5px; line-height: 1.7; color: var(--txt-dim);
}
.ag-note { border-left-color: var(--cyan); background: rgba(0,177,235,0.045); }
.ag-limit { border-left-color: var(--amber); background: rgba(217,148,65,0.05); }
.ag-note b, .ag-limit b { color: #fff; display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .3px; }
.ag-note p:last-child, .ag-limit p:last-child { margin-bottom: 0; }

/* ===========================================================
   KARTEN / GRIDS
   =========================================================== */
.ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-grid.two { grid-template-columns: repeat(2, 1fr); }
.ag-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 26px;
    text-decoration: none; transition: border-color .18s, background .18s, transform .18s;
}
a.ag-card:hover { border-color: rgba(0,177,235,0.4); background: #131b23; transform: translateY(-2px); }
.ag-card-tag {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--cyan-soft); margin-bottom: 14px;
}
.ag-card h3 { font-size: 17.5px; font-weight: 700; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.ag-card p { font-size: 14px; color: var(--txt-dim); line-height: 1.65; margin: 0 0 16px; }
.ag-card .spacer { flex: 1; }
.ag-card-more { font-size: 13px; font-weight: 600; color: var(--cyan-soft); display: inline-flex; align-items: center; gap: 6px; }
.ag-card-more svg { width: 14px; height: 14px; }
@media (max-width: 1024px) { .ag-grid, .ag-grid.two { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .ag-grid, .ag-grid.two { grid-template-columns: 1fr; } }

/* Geschwister-Navigation (interne Verlinkung) */
.ag-siblings { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 20px; }
.ag-sib {
    display: flex; flex-direction: column; gap: 5px; text-decoration: none;
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px;
    background: var(--ink-2); transition: border-color .18s, background .18s;
}
.ag-sib:hover { border-color: var(--line-strong); background: #131b23; }
.ag-sib b { font-size: 14.5px; color: #fff; font-weight: 600; }
.ag-sib span { font-size: 12.5px; color: var(--txt-dim); line-height: 1.5; }

/* ===========================================================
   SCHRITTE / PIPELINE
   =========================================================== */
.ag-steps { counter-reset: st; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.ag-step { background: var(--ink-2); padding: 24px 26px; counter-increment: st; display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.ag-step::before {
    content: counter(st, decimal-leading-zero);
    font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--cyan-soft);
}
.ag-step h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.ag-step p { font-size: 14.5px; color: var(--txt-dim); line-height: 1.7; margin: 0; }
@media (max-width: 600px) { .ag-step { grid-template-columns: 1fr; gap: 8px; } }

/* ===========================================================
   FAQ  (details/summary — ohne JS bedienbar)
   =========================================================== */
.ag-faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.ag-faq details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ag-faq summary {
    list-style: none; cursor: pointer; padding: 18px 24px; min-height: 44px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 15.5px; font-weight: 600; color: #fff;
}
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::after { content: '+'; color: var(--cyan-soft); font-size: 20px; font-weight: 400; flex-shrink: 0; }
.ag-faq details[open] summary::after { content: '−'; }
.ag-faq .a { padding: 0 24px 20px; font-size: 14.5px; line-height: 1.75; color: var(--txt-dim); }
.ag-faq .a p { margin: 0 0 12px; }
.ag-faq .a p:last-child { margin-bottom: 0; }
.ag-faq .a a { color: var(--cyan-soft); }

/* ===========================================================
   KOSTENRECHNER
   =========================================================== */
.ag-calc { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.ag-calc-fields { display: flex; flex-direction: column; gap: 22px; }
.ag-field label { display: block; font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.ag-field .hint { display: block; font-weight: 400; font-size: 12px; color: var(--txt-faint); margin-top: 3px; }
.ag-field input[type="range"] { width: 100%; accent-color: var(--cyan); min-height: 24px; }
.ag-field output { font-family: var(--mono); font-size: 15px; color: var(--cyan-soft); font-weight: 700; }
.ag-calc-out { border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--ink-2); padding: 26px; position: sticky; top: 96px; }
.ag-calc-out .big { font-family: var(--mono); font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -1px; }
.ag-calc-out .big .u { font-size: 15px; color: var(--txt-dim); }
.ag-calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--txt-dim); }
.ag-calc-row:last-of-type { border-bottom: none; }
.ag-calc-row span:last-child { font-family: var(--mono); color: rgba(255,255,255,0.85); }
@media (max-width: 900px) { .ag-calc { grid-template-columns: 1fr; } .ag-calc-out { position: static; } }

/* ===========================================================
   PREIS-KARTEN
   =========================================================== */
.ag-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-plan { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 28px; display: flex; flex-direction: column; }
.ag-plan.hot { border-color: rgba(0,177,235,0.45); background: #0f1a22; }
.ag-plan h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.ag-plan .who { font-size: 13px; color: var(--txt-faint); margin-bottom: 20px; }
.ag-plan .price { font-family: var(--mono); font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -1px; }
.ag-plan .price .u { font-size: 13px; color: var(--txt-dim); font-weight: 400; }
.ag-plan .price-note { font-size: 12px; color: var(--txt-faint); margin: 6px 0 22px; }
.ag-plan ul { list-style: none; margin: 0 0 24px; padding: 0; }
.ag-plan li { display: flex; gap: 10px; font-size: 13.5px; color: var(--txt-dim); line-height: 1.6; margin-bottom: 11px; }
.ag-plan li svg { width: 15px; height: 15px; color: var(--ok); flex-shrink: 0; margin-top: 3px; }
.ag-plan .spacer { flex: 1; }
@media (max-width: 900px) { .ag-plans { grid-template-columns: 1fr; } }

/* ===========================================================
   DIAGRAMME (Inline-SVG, statisch)
   =========================================================== */
.ag-diagram {
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: #090d12; padding: 20px; overflow-x: auto;
}
.ag-diagram svg { display: block; width: 100%; height: auto; min-width: 520px; }
.ag-diagram text { font-family: var(--mono); }
.ag-diagram .d-t   { font-size: 12px; fill: rgba(255,255,255,0.9); font-weight: 600; }
.ag-diagram .d-s   { font-size: 10.5px; fill: rgba(255,255,255,0.55); }
.ag-diagram .d-lbl { font-size: 10px; fill: rgba(255,255,255,0.42); letter-spacing: 1.1px; }
.ag-diagram .d-box { fill: #111a22; stroke: rgba(255,255,255,0.14); }
.ag-diagram .d-box-cy { fill: #10222c; stroke: rgba(0,177,235,0.45); }
.ag-diagram .d-plane { fill: rgba(255,255,255,0.022); stroke: rgba(255,255,255,0.10); stroke-dasharray: 4 4; }
.ag-diagram .d-edge { stroke: rgba(255,255,255,0.28); stroke-width: 1.3; fill: none; }
.ag-diagram .d-edge-cy { stroke: #2a9fc4; stroke-width: 1.5; fill: none; }

/* ===========================================================
   CTA
   =========================================================== */
.ag-cta {
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background:
        radial-gradient(600px 300px at 20% 0%, rgba(0,177,235,0.10), transparent 65%),
        var(--ink-2);
    padding: 48px 52px; text-align: center;
}
.ag-cta h2 { font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: -.6px; }
.ag-cta p { font-size: 16px; color: var(--txt-dim); max-width: 60ch; margin: 0 auto 28px; line-height: 1.7; }
.ag-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ag-cta-meta { margin-top: 22px; font-size: 13px; color: var(--txt-faint); }
.ag-cta-meta a { color: var(--cyan-soft); }
@media (max-width: 768px) { .ag-cta { padding: 34px 24px; } .ag-cta h2 { font-size: 23px; } .ag-cta-actions .ai-btn { width: 100%; justify-content: center; } }

/* ===========================================================
   SEKTIONEN
   =========================================================== */
.ag-sec { padding: 84px 56px; }
.ag-sec.alt { background: var(--ink-2); }
.ag-sec.tight { padding: 56px 56px; }
.ag-sec-head { max-width: 760px; margin-bottom: 42px; }
.ag-sec-head h2 { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -.9px; line-height: 1.2; margin: 0 0 14px; }
.ag-sec-head p { font-size: 16px; color: var(--txt-dim); line-height: 1.7; margin: 0; }
.ag-label {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--cyan-soft); margin-bottom: 16px;
}
.ag-label::before { content: ''; width: 22px; height: 1px; background: var(--cyan-soft); }
@media (max-width: 768px) {
    .ag-sec, .ag-sec.tight { padding: 52px 24px; }
    .ag-sec-head h2 { font-size: 25px; }
}
@media (max-width: 480px) { .ag-sec, .ag-sec.tight { padding: 40px 16px; } }

/* ===========================================================================
   V2 — VISUELLE AUFWERTUNG
   Ziel: Produkt- statt Broschüren-Anmutung. Mehr Ebenen, mehr Rhythmus,
   je Seite eine eigene Signalfarbe. Marken-Cyan bleibt für alles Klickbare
   reserviert — die Signalfarbe gehört den Daten und Labels.
   =========================================================================== */

.ag {
    --accent: #00B1EB;
    --accent-soft: #5cc6e8;
    --accent-dim: rgba(0,177,235,0.13);
    --panel: #0d141b;
    --panel-2: #111a22;
    --grid: rgba(255,255,255,0.045);
}
/* Signalfarbe je Seite — gleiche Sättigung, gleiche Helligkeit, AA auf --ink */
.ag[data-accent="runtime"]       { --accent:#3fb8e6; --accent-soft:#7ed0f0; --accent-dim:rgba(63,184,230,0.13); }
.ag[data-accent="orchestration"] { --accent:#8b93f2; --accent-soft:#aab0f7; --accent-dim:rgba(139,147,242,0.13); }
.ag[data-accent="tools"]         { --accent:#3fc2a8; --accent-soft:#74d6c2; --accent-dim:rgba(63,194,168,0.13); }
.ag[data-accent="observability"] { --accent:#e0a95c; --accent-soft:#edc48c; --accent-dim:rgba(224,169,92,0.13); }
.ag[data-accent="security"]      { --accent:#54c184; --accent-soft:#84d6a7; --accent-dim:rgba(84,193,132,0.13); }
.ag[data-accent="deep"]          { --accent:#a78bd8; --accent-soft:#c0aae6; --accent-dim:rgba(167,139,216,0.13); }
.ag[data-accent="case"]          { --accent:#4ec3d8; --accent-soft:#86daea; --accent-dim:rgba(78,195,216,0.13); }
.ag[data-accent="commerce"]      { --accent:#d8a0c8; --accent-soft:#e7bcdb; --accent-dim:rgba(216,160,200,0.13); }

/* --- Label / Eyebrow: Signalfarbe + Index-Punkt ------------------------- */
.ag .ag-label { color: var(--accent); letter-spacing: 2px; }
.ag .ag-label::before { background: var(--accent); width: 26px; }

/* --- Sektionsrhythmus: Hairline mit Akzentsegment ----------------------- */
.ag .ag-sec { position: relative; border-top: 1px solid var(--line); }
.ag .ag-sec::before {
    content: ''; position: absolute; top: -1px; left: 0;
    width: 96px; height: 1px; background: var(--accent); opacity: .75;
}
.ag .ag-hero { border-top: none; }
.ag .ag-hero::before { display: none; }
.ag .ag-sec.alt { background: var(--panel); }

/* Punktraster als Textur — dezent, GPU-frei, 0 Byte Assets */
.ag .ag-sec.grid-bg::after,
.ag .ag-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(var(--grid) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 68%);
    mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 68%);
    opacity: .8;
}
.ag .ag-sec > *, .ag .ag-hero > * { position: relative; z-index: 1; }

/* ===========================================================================
   HERO — mehr Präsenz
   =========================================================================== */
.ag .ag-hero {
    background:
        radial-gradient(760px 420px at 84% -18%, var(--accent-dim), transparent 60%),
        linear-gradient(180deg, #0a1017 0%, var(--ink) 62%);
    padding-top: 64px;
}
.ag .ag-hero h1 { letter-spacing: -1.8px; }
.ag .ag-hero h1 .ac { color: var(--accent-soft); }

/* Große Geister-Kennung oben rechts — verortet die Seite im System */
.ag .ag-hero > .ag-hero-index {
    position: absolute; top: 4px; right: 40px; z-index: 0;
    font-family: var(--mono); font-size: 172px; font-weight: 700;
    line-height: 1; letter-spacing: -8px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.055);
    pointer-events: none; user-select: none;
}
@media (max-width: 1120px) { .ag .ag-hero > .ag-hero-index { font-size: 124px; right: 20px; } }
@media (max-width: 768px)  { .ag .ag-hero > .ag-hero-index { display: none; } }

/* Spec-Strip: harte Fakten direkt unter der Headline, Terminal-Anmutung */
.ag-strip {
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: rgba(255,255,255,0.02);
    margin: 0 0 26px; overflow: hidden; max-width: 640px;
}
.ag-strip li {
    list-style: none; flex: 1 1 0; min-width: 150px;
    padding: 13px 18px; border-right: 1px solid var(--line);
}
.ag-strip li:last-child { border-right: none; }
.ag-strip b {
    display: block; font-family: var(--mono); font-size: 16px; font-weight: 700;
    color: #fff; letter-spacing: -.3px;
}
.ag-strip b .u { color: var(--accent); font-size: 12px; }
.ag-strip > li > span {
    display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
    color: var(--txt-faint); margin-top: 5px;
}
.ag-strip b .u { display: inline; }

/* ===========================================================================
   LAYER-NAVIGATION — zeigt, wo man im System steht
   =========================================================================== */
.ag-layers {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 1px; background: var(--line);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ag-layer {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 20px; background: var(--ink);
    text-decoration: none; position: relative;
    transition: background .18s ease;
}
.ag-layer:hover { background: var(--panel-2); }
.ag-layer .n {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px;
    color: var(--txt-faint);
}
.ag-layer .t { font-size: 13.5px; font-weight: 600; color: var(--txt-dim); line-height: 1.3; }
.ag-layer:hover .t { color: #fff; }
.ag-layer[aria-current="page"] { background: var(--panel-2); }
.ag-layer[aria-current="page"]::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent);
}
.ag-layer[aria-current="page"] .t { color: #fff; }
.ag-layer[aria-current="page"] .n { color: var(--accent); }
@media (max-width: 900px) { .ag-layers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ag-layers { grid-template-columns: repeat(2, 1fr); } .ag-layer { padding: 13px 14px; } }

/* ===========================================================================
   ANTWORT-ABSATZ — als Datenblatt-Karte statt Zitatstrich
   =========================================================================== */
.ag .ag-answer {
    position: relative; border: 1px solid var(--line-strong); border-left: 2px solid var(--accent);
    border-radius: var(--r-sm);
    background: linear-gradient(120deg, var(--accent-dim), transparent 58%), var(--panel);
    padding: 26px 30px 26px 32px;
}
.ag .ag-answer::before {
    content: 'ANTWORT';
    position: absolute; top: -8px; left: 30px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
    color: var(--accent); background: var(--ink); padding: 0 8px;
}
.ag .ag-answer p { font-size: 17px; }

/* ===========================================================================
   KPI-KACHELN — Instrumententafel statt Textblöcke
   =========================================================================== */
.ag .ag-kpis {
    background: var(--line); border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); margin-top: 30px;
}
.ag .ag-kpi { background: var(--panel); position: relative; padding: 24px 26px 26px; }
.ag .ag-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 2px;
    background: var(--accent);
}
.ag .ag-kpi b { font-size: 30px; letter-spacing: -1px; }
.ag .ag-kpi b .u { color: var(--accent); }
.ag .ag-kpi span { color: var(--txt-dim); }
.ag .ag-kpi em {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px;
    color: var(--txt-faint); padding-top: 10px; margin-top: 10px;
    border-top: 1px solid var(--line); display: block;
}

/* ===========================================================================
   KARTEN — Index, Akzentkante, Ecken-Ticks
   =========================================================================== */
.ag .ag-card {
    position: relative; background: var(--panel);
    border-color: var(--line-strong); overflow: hidden;
}
.ag .ag-card::before {
    content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0;
    background: var(--accent); transition: width .28s ease;
}
.ag a.ag-card:hover::before { width: 100%; }
.ag a.ag-card:hover { background: var(--panel-2); border-color: var(--line-strong); }
.ag .ag-card-tag { color: var(--accent); letter-spacing: 1.6px; }
.ag .ag-card h3 { letter-spacing: -.3px; }
.ag .ag-card-more { color: var(--accent-soft); }

/* Geschwister-Karten mit Pfeil-Affordanz */
.ag .ag-sib { background: var(--panel); position: relative; padding-right: 34px; }
.ag .ag-sib::after {
    content: '→'; position: absolute; right: 16px; top: 16px;
    color: var(--txt-faint); font-size: 14px; transition: transform .18s ease, color .18s ease;
}
.ag .ag-sib:hover::after { color: var(--accent); transform: translateX(3px); }

/* ===========================================================================
   CODE — Fensterrahmen, Signalfarbe an der Kante
   =========================================================================== */
.ag .ag-code {
    background: #080d13; border-color: var(--line-strong);
    box-shadow: 0 20px 44px -28px rgba(0,0,0,.8);
}
.ag .ag-code-head {
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    padding-left: 54px; position: relative;
}
.ag .ag-code-head::before {
    content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #3d4750;
    box-shadow: 13px 0 0 #3d4750, 26px 0 0 var(--accent);
}
.ag .ag-code-name { color: var(--txt-dim); }
.ag .ag-code pre { border-left: 2px solid var(--accent-dim); }

/* ===========================================================================
   TABELLEN — Datenblatt-Anmutung
   =========================================================================== */
.ag .ag-table-wrap { border-color: var(--line-strong); background: var(--panel); }
.ag table.ag-table caption { color: var(--accent); letter-spacing: 1px; text-transform: uppercase; font-size: 10.5px; }
.ag table.ag-table tbody tr { transition: background .15s ease; }
.ag table.ag-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.014); }
.ag table.ag-table tbody tr:hover { background: var(--accent-dim); }
.ag table.ag-table tbody th { position: relative; padding-left: 22px; }
.ag table.ag-table tbody th::before {
    content: ''; position: absolute; left: 10px; top: 17px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .55;
}
.ag table.ag-table .num { color: #fff; }

/* ===========================================================================
   DIAGRAMME — als Instrument gerahmt
   =========================================================================== */
.ag .ag-diagram {
    position: relative; background: #080d13; border-color: var(--line-strong);
    padding: 34px 22px 22px;
    background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 24px 24px;
}
.ag .ag-diagram::before {
    content: 'SCHEMA'; position: absolute; top: 12px; left: 22px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
    color: var(--txt-faint);
}
.ag .ag-diagram::after {
    content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 2px; background: var(--accent);
}
.ag .ag-diagram .d-box-cy { stroke: var(--accent); }
.ag .ag-diagram .d-edge-cy { stroke: var(--accent); }
.ag .ag-prose figcaption { padding-left: 14px; border-left: 2px solid var(--accent-dim); }

/* ===========================================================================
   HINWEIS-BLÖCKE — Label statt fetter Zeile
   =========================================================================== */
.ag .ag-note, .ag .ag-limit { position: relative; padding-top: 22px; }
.ag .ag-note b, .ag .ag-limit b {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
    margin-bottom: 9px;
}
.ag .ag-note { border-left-color: var(--accent); background: var(--accent-dim); }
.ag .ag-note b { color: var(--accent-soft); }

/* ===========================================================================
   SCHRITTE — Nummer als Marke
   =========================================================================== */
.ag .ag-step { background: var(--panel); }
.ag .ag-step::before {
    color: var(--accent); font-size: 12px; letter-spacing: 1px;
    border-top: 2px solid var(--accent); padding-top: 8px; width: 30px;
}

/* ===========================================================================
   PROSA-TYPOGRAFIE — mehr Hierarchie
   =========================================================================== */
.ag .ag-prose h2 {
    position: relative; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 29px;
}
.ag .ag-prose h2::before {
    content: ''; position: absolute; top: -1px; left: 0; width: 42px; height: 1px; background: var(--accent);
}
.ag .ag-prose h3 { color: var(--accent-soft); font-size: 18px; }
.ag .ag-prose code:not(pre code) { color: var(--accent-soft); border-color: var(--accent-dim); }
.ag .ag-prose a { color: var(--accent-soft); text-underline-offset: 3px; }
.ag .ag-def { background: var(--panel); border-color: var(--line-strong); border-left: 2px solid var(--accent); }
.ag .ag-def dt { color: var(--accent); }

/* Inhaltsverzeichnis als Seitenleiste mit Marker */
.ag .ag-toc { border-left-color: var(--line-strong); }
.ag .ag-toc a.on { color: var(--accent); }
.ag .ag-toc a.on::before { color: var(--accent); }

/* ===========================================================================
   PREISE / RECHNER
   =========================================================================== */
.ag .ag-plan { background: var(--panel); position: relative; overflow: hidden; }
.ag .ag-plan.hot { border-color: var(--accent); background: var(--panel-2); }
.ag .ag-plan.hot::before {
    content: 'EMPFOHLEN'; position: absolute; top: 14px; right: -30px;
    transform: rotate(45deg); background: var(--accent); color: #05202a;
    font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
    padding: 4px 34px;
}
.ag .ag-plan .price { letter-spacing: -1.4px; }
.ag .ag-plan .price .u { color: var(--accent); }
.ag .ag-calc-out { background: var(--panel); border-color: var(--accent-dim); }
.ag .ag-calc-out .big { color: var(--accent-soft); }
.ag .ag-field input[type="range"] { accent-color: var(--accent); }
.ag .ag-field output { color: var(--accent); }

/* ===========================================================================
   FAQ / CTA
   =========================================================================== */
.ag .ag-faq details { background: var(--panel); border-color: var(--line-strong); }
.ag .ag-faq details[open] { border-color: var(--accent-dim); }
.ag .ag-faq summary::after { color: var(--accent); }
.ag .ag-faq .a a { color: var(--accent-soft); }
.ag .ag-cta {
    position: relative; overflow: hidden;
    background:
        radial-gradient(640px 320px at 18% -10%, var(--accent-dim), transparent 62%),
        var(--panel);
    border-color: var(--line-strong);
}
.ag .ag-cta::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 160px; height: 2px; background: var(--accent);
}
.ag .ag-cta h2 { letter-spacing: -.8px; }

/* Buttons: Marken-Cyan bleibt für Klickbares reserviert */
.ag .ai-btn-primary, .ag .btn-primary { background: var(--cyan); color: #fff; }
.ag .ai-btn-primary:hover, .ag .btn-primary:hover { background: var(--cyan-deep); }

/* Kopierzeile im Hero */
.ag .ag-cmd { background: #080d13; border-color: var(--line-strong); }
.ag .ag-cmd code::before { color: var(--accent); }
.ag .ag-trust svg { color: var(--accent); }

/* Mockup-Rahmen bekommt Fenster-Chrome */
.ag .arm-frame { border-color: var(--line-strong); }
.ag .arm-frame::before {
    content: ''; position: absolute; top: 0; left: 0; z-index: 2;
    width: 90px; height: 2px; background: var(--accent);
}


/* --- Zweispaltiger Hero auf den Unterseiten: Datenblatt statt Leerraum --- */
.ag .ag-hero-split {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 56px; align-items: center;
}
.ag-hero-side {
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--panel); overflow: hidden;
    box-shadow: 0 24px 60px -34px rgba(0,0,0,.9);
}
.ag-hero-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: 2px; color: var(--txt-faint);
}
.ag-hero-side-head .dots { display: flex; gap: 5px; }
.ag-hero-side-head .dots i { width: 6px; height: 6px; border-radius: 50%; background: #333c45; }
.ag-hero-side-head .dots i:last-child { background: var(--accent); }
.ag-hero-side .ag-strip {
    flex-direction: column; border: none; border-radius: 0;
    margin: 0; max-width: none; background: transparent;
}
.ag-hero-side .ag-strip li {
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 20px 24px; min-width: 0;
}
.ag-hero-side .ag-strip li:last-child { border-bottom: none; }
.ag-hero-side .ag-strip b { font-size: 22px; }
.ag-hero-side .ag-strip b .u { font-size: 13px; }
@media (max-width: 1120px) {
    .ag .ag-hero-split { grid-template-columns: 1fr; gap: 34px; }
    .ag-hero-side { max-width: 520px; }
}

/* --- Sticky-TOC: der Aside muss selbst kleben, nicht sein Kind ---------- */
.ag .ag-doc > aside { position: sticky; top: 96px; }
.ag .ag-toc { position: static; }
@media (max-width: 1024px) { .ag .ag-doc > aside { position: static; } }

/* --- Textbreite begrenzen, Instrumente in voller Spaltenbreite ---------- */
.ag .ag-prose { max-width: none; }
.ag .ag-prose > p,
.ag .ag-prose > ul,
.ag .ag-prose > ol,
.ag .ag-prose > h2,
.ag .ag-prose > h3,
.ag .ag-prose > h4 { max-width: 74ch; }
.ag .ag-prose > figure,
.ag .ag-prose > .ag-table-wrap,
.ag .ag-prose > .ag-code,
.ag .ag-prose > .ag-def,
.ag .ag-prose > .ag-note,
.ag .ag-prose > .ag-limit,
.ag .ag-prose > .ag-ba { max-width: none; }

/* --- Textur auch auf den abgesetzten Sektionen -------------------------- */
.ag .ag-sec.alt::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(var(--grid) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 46%);
    mask-image: linear-gradient(180deg, #000, transparent 46%);
    opacity: .7;
}

/* --- Signalband: schmaler Streifen mit Laufschrift-Fakten --------------- */
.ag-band {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, var(--accent-dim), transparent 46%), var(--panel);
}
.ag-band li {
    list-style: none; flex: 1 1 0; min-width: 210px;
    padding: 18px 28px; border-right: 1px solid var(--line);
    font-size: 13.5px; color: var(--txt-dim); line-height: 1.5;
}
.ag-band li:last-child { border-right: none; }
.ag-band li b {
    display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 7px;
}
@media (max-width: 768px) { .ag-band li { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--line); } }

/* .main-card setzt overflow-x:hidden — das macht daraus einen Scroll-Container
   und hebelt position:sticky aus. clip erzeugt keinen Scroll-Container. */
.card.main-card.ag { overflow-x: clip; }

/* ===========================================================================
   SCHICHT-STAPEL — die Plattform als Liste statt als Kachelraster.
   Bricht den Rhythmus zwischen zwei Kartenblöcken auf.
   =========================================================================== */
.ag-stack {
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--panel); overflow: hidden;
}
.ag-stack > a {
    display: grid; grid-template-columns: 92px minmax(0,1fr) minmax(0,1.35fr) 28px;
    gap: 26px; align-items: center; padding: 26px 28px;
    border-bottom: 1px solid var(--line); text-decoration: none;
    position: relative; transition: background .18s ease;
}
.ag-stack > a:last-child { border-bottom: none; }
.ag-stack > a::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--accent); opacity: 0; transition: opacity .18s ease;
}
.ag-stack > a:hover { background: var(--panel-2); }
.ag-stack > a:hover::before { opacity: 1; }
.ag-stack .idx {
    font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -1px;
    color: rgba(255,255,255,0.22); transition: color .18s ease;
}
.ag-stack > a:hover .idx { color: var(--accent); }
.ag-stack .ttl { display: block; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.ag-stack .sub {
    display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--txt-faint); margin-top: 6px;
}
.ag-stack .desc { font-size: 14px; line-height: 1.6; color: var(--txt-dim); }
.ag-stack .arw { color: var(--txt-faint); font-size: 16px; transition: transform .18s ease, color .18s ease; }
.ag-stack > a:hover .arw { color: var(--accent); transform: translateX(4px); }
@media (max-width: 900px) {
    .ag-stack > a { grid-template-columns: 56px 1fr 24px; gap: 18px; padding: 20px; }
    .ag-stack .desc { grid-column: 1 / -1; }
    .ag-stack .idx { font-size: 18px; }
}

/* ===========================================================================
   KONTRAST — WCAG 2.1 AA für Fließtext und Kleintext.
   Die geerbten Werte aus ai-theme.css (dim .58 / faint .40) unterschreiten
   bei den kleinen Labels 4,5:1. Hier scoped angehoben, Hierarchie bleibt.
   =========================================================================== */
.ag {
    --txt-dim: rgba(255,255,255,0.68);
    --txt-faint: rgba(255,255,255,0.56);
}
.ag .arm-cap { color: rgba(255,255,255,0.60); }
.ag .arm .t-lbl  { fill: rgba(255,255,255,0.56); }
.ag .arm .t-mini { fill: rgba(255,255,255,0.62); }
.ag .arm .t-val  { fill: rgba(255,255,255,0.72); }
.ag .ag-diagram .d-s   { fill: rgba(255,255,255,0.66); }
.ag .ag-diagram .d-lbl { fill: rgba(255,255,255,0.54); }

/* Skip-Link: dunkle Schrift auf Marken-Cyan (6,6:1 statt 2,5:1) */
.skip-link { color: #04212c; font-weight: 700; }
/* Code-Kommentare: von 3,5:1 auf 5,5:1 angehoben */
.ag .ag-code .c { color: rgba(255,255,255,0.52); }
/* Schicht-Nummer und Negativ-Marker in Tabellen auf AA angehoben */
.ag .ag-stack .idx { color: rgba(255,255,255,0.40); }
.ag table.ag-table .no { color: rgba(255,255,255,0.56); }

/* Platz für den per JS eingesetzten Header reservieren — verhindert den
   Layout-Shift beim Nachladen von components/header.html (CLS 0,022 → 0). */
.ag #site-header:empty { display: block; min-height: 114px; }
@media (max-width: 1100px) { .ag #site-header:empty { min-height: 131px; } }
@media (max-width: 768px)  { .ag #site-header:empty { min-height: 108px; } }

/* Skip-Link: eigener Fokusring (liegt außerhalb von .ag) */
.skip-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===========================================================================
   PRODUKT-KONSOLE — die sichtbare Oberfläche des Produkts
   =========================================================================== */
.ag-console {
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: #080d13; overflow: hidden;
    box-shadow: 0 40px 90px -50px rgba(0,0,0,.95);
}
.ag-console svg { display: block; width: 100%; height: auto; }
.ag-console text { font-family: var(--mono); }
.ag-console .c-t    { font-size: 12px; fill: rgba(255,255,255,0.92); font-weight: 600; }
.ag-console .c-s    { font-size: 11px; fill: rgba(255,255,255,0.68); }
.ag-console .c-lbl  { font-size: 9.5px; fill: rgba(255,255,255,0.52); letter-spacing: 1.5px; }
.ag-console .c-big  { font-size: 21px; fill: #fff; font-weight: 700; letter-spacing: -.5px; }
.ag-console .c-ok   { fill: #6fd39a; }
.ag-console .c-am   { fill: #e8b273; }
.ag-console .c-cy   { fill: var(--accent-soft); }
.ag-console .c-panel{ fill: #0c1219; stroke: rgba(255,255,255,0.08); }
.ag-console .c-row  { fill: rgba(255,255,255,0.022); }
.ag-console .c-row-a{ fill: rgba(255,255,255,0.05); }
.ag-console .c-nav  { fill: transparent; }
.ag-console .c-nav-a{ fill: rgba(255,255,255,0.06); }
.ag-console .c-bar  { fill: var(--accent); }
.ag-console-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-top: 14px;
    font-family: var(--mono); font-size: 11.5px; color: var(--txt-faint);
}

/* ===========================================================================
   LIEFERUMFANG — was der Kunde konkret bekommt
   =========================================================================== */
.ag-deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
              border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.ag-deliver-item { background: var(--panel); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.ag-deliver-item .ico {
    width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    background: var(--accent-dim); border: 1px solid var(--accent-dim); margin-bottom: 4px;
}
.ag-deliver-item .ico svg { width: 17px; height: 17px; color: var(--accent); }
.ag-deliver-item h3 { font-size: 15.5px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.2px; }
.ag-deliver-item p { font-size: 13.5px; line-height: 1.6; color: var(--txt-dim); margin: 0; }
.ag-deliver-item .meta {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--accent); margin-top: auto; padding-top: 12px;
}
@media (max-width: 950px) { .ag-deliver { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ag-deliver { grid-template-columns: 1fr; } }

/* ===========================================================================
   NUTZEN-KACHELN — Ergebnis statt Funktion
   =========================================================================== */
.ag-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-outcome {
    position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: linear-gradient(160deg, var(--accent-dim), transparent 52%), var(--panel);
    padding: 30px 28px 28px;
}
.ag-outcome .q {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); display: block; margin-bottom: 14px;
}
.ag-outcome h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.3; letter-spacing: -.4px; }
.ag-outcome p { font-size: 14.5px; line-height: 1.65; color: var(--txt-dim); margin: 0; }
@media (max-width: 950px) { .ag-outcomes { grid-template-columns: 1fr; } }

/* ===========================================================================
   START-PFAD — drei Schritte bis zum Betrieb
   =========================================================================== */
.ag-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.ag-path-step {
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--panel); padding: 26px; position: relative;
}
.ag-path-step .when {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--accent);
}
.ag-path-step .when::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ag-path-step h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.ag-path-step p { font-size: 14px; line-height: 1.65; color: var(--txt-dim); margin: 0 0 14px; }
.ag-path-step .cost {
    font-family: var(--mono); font-size: 12px; color: var(--txt-faint);
    padding-top: 14px; border-top: 1px solid var(--line);
}
.ag-path-step .cost b { color: #fff; font-weight: 700; }
@media (max-width: 950px) { .ag-path { grid-template-columns: 1fr; } }

/* ===========================================================================
   SYSTEMKARTE — interaktive Architekturkarte (.ag-map)
   Klickbare Knoten, Detail-Panel rechts, Pfad-Filter.
   Panel-Inhalte stehen als HTML in der Seite (crawlbar), JS schaltet nur um.
   =========================================================================== */
.ag-map-tools {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 18px;
}
.ag-map-tools .lbl {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--txt-faint); margin-right: 4px;
}
.ag-flow {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .4px;
    color: var(--txt-dim); background: transparent;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    padding: 7px 13px; cursor: pointer; min-height: 32px;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ag-flow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.ag-flow[data-flow="run"] .dot { background: var(--accent); }
.ag-flow[data-flow="control"] .dot { background: #9aa4ad; }
.ag-flow[data-flow="telemetry"] .dot { background: var(--ok); }
.ag-flow:hover { color: #fff; border-color: var(--line-strong); background: var(--panel-2); }
.ag-flow[aria-pressed="true"] { color: #fff; border-color: var(--accent); background: var(--accent-dim); }

.ag-map {
    display: grid; grid-template-columns: minmax(0, 1fr) 328px;
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden;
}
.ag-map-canvas { background: var(--panel); padding: 8px; overflow-x: auto; }
.ag-map-canvas svg { display: block; width: 100%; min-width: 680px; height: auto; }

/* ---- Knoten ---- */
.agm-node { cursor: pointer; }
.agm-node .agm-box {
    fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1;
    transition: fill .16s ease, stroke .16s ease;
}
.agm-node .agm-ttl  { font-size: 14px; font-weight: 700; fill: #fff; letter-spacing: -.2px; }
.agm-node .agm-sub  { font-family: var(--mono); font-size: 10.5px; fill: var(--txt-dim); }
.agm-node .agm-idx  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.4px; fill: var(--txt-faint); }
.agm-node:hover .agm-box,
.agm-node:focus-visible .agm-box { fill: #16212b; stroke: var(--accent-soft); }
.agm-node:focus { outline: none; }
.agm-node:focus-visible .agm-box { stroke-width: 1.6; }
.agm-node[aria-pressed="true"] .agm-box { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 1.6; }
.agm-node[aria-pressed="true"] .agm-idx { fill: var(--accent); }

/* Rand-Bänder (Control Plane, Rechenzentrum) etwas ruhiger */
.agm-node.band .agm-box { fill: rgba(255,255,255,0.028); stroke-dasharray: 3 4; }
.agm-node.band[aria-pressed="true"] .agm-box { stroke-dasharray: 0; }

/* ---- Kanten ---- */
.agm-edge { fill: none; stroke-width: 1.4; }
.agm-edge[data-flow="run"]       { stroke: var(--accent); opacity: .78; }
.agm-edge[data-flow="control"]   { stroke: rgba(255,255,255,0.30); stroke-dasharray: 4 5; }
.agm-edge[data-flow="telemetry"] { stroke: var(--ok); opacity: .5; stroke-dasharray: 2 5; }
.agm-edge[data-flow="human"]     { stroke: var(--amber); opacity: .65; stroke-dasharray: 5 4; }
.agm-tip { font-family: var(--mono); font-size: 9.5px; fill: var(--txt-faint); letter-spacing: .6px; }

/* Pfad-Filter — Doppelklasse, damit der Filter auch bei aktiver Auswahl greift */
.ag-map[data-flow="run"]       .agm-edge.agm-edge:not([data-flow="run"]),
.ag-map[data-flow="control"]   .agm-edge.agm-edge:not([data-flow="control"]),
.ag-map[data-flow="telemetry"] .agm-edge.agm-edge:not([data-flow="telemetry"]) { opacity: .08; }

/* Auswahl: nicht beteiligte Knoten/Kanten zurücknehmen */
.ag-map.is-sel .agm-node:not(.on):not([aria-pressed="true"]) { opacity: .42; }
.ag-map.is-sel .agm-edge:not(.on) { opacity: .1; }
.ag-map.is-sel .agm-edge.on { opacity: 1; stroke-width: 1.9; }
.ag-map.is-sel .agm-node.on .agm-box { stroke: rgba(255,255,255,0.26); }

/* Fließrichtung — nur ohne reduce-motion */
@media (prefers-reduced-motion: no-preference) {
    .agm-edge[data-flow="run"] { stroke-dasharray: 6 8; animation: agmDash 1.4s linear infinite; }
    @keyframes agmDash { to { stroke-dashoffset: -14; } }
}

/* ---- Detail-Panel ---- */
.ag-map-panel { background: var(--panel-2); padding: 26px 24px 28px; }
.agm-detail .tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.agm-detail h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -.3px; }
.agm-detail p { font-size: 14px; line-height: 1.65; color: var(--txt-dim); margin: 0 0 16px; }
.agm-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.agm-facts li {
    display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--txt-dim);
    font-family: var(--mono);
}
.agm-facts li::before { content: '›'; color: var(--accent); flex: none; }
.agm-more {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--accent-soft); text-decoration: none;
}
.agm-more svg { width: 15px; height: 15px; transition: transform .16s ease; }
.agm-more:hover { color: #fff; }
.agm-more:hover svg { transform: translateX(3px); }
.ag-map-hint {
    font-family: var(--mono); font-size: 10.5px; color: var(--txt-faint);
    margin: 12px 0 0; letter-spacing: .4px;
}
.ag-map-hint .touch { display: none; }
@media (max-width: 1000px) {
    .ag-map-hint .touch { display: inline; }
    .ag-map-hint .desk { display: none; }
}

@media (max-width: 1000px) {
    .ag-map { grid-template-columns: 1fr; }
    .ag-map-canvas { padding: 6px; }
}
@media (max-width: 620px) {
    .ag-map-panel { padding: 22px 20px 24px; }
    .ag-map-tools { gap: 8px; }
    .ag-flow { padding: 7px 11px; }
}