/* SovAI-Q · Darstellung der überarbeiteten Seiten: Funktionalitäten, Integration, Sicherheit, Rollen, Budgetfreigabe.
   Nutzt die vorhandene Designsprache (Karten mit Cyan-Rand, Verlauf, Piktogramme). Farben und Größen kommen aus den Variablen am Dateianfang. */
:root{
  --sqx-card-border:#258ab2;
  --sqx-card-bg:linear-gradient(145deg,#073351,#062340);
  --sqx-card-radius:10px;
  --sqx-icon:#69d8f8;
  --sqx-ok:#59e0b4;
  --sqx-pilot:#f2c35b;
  --sqx-road:#a9b8d6;
  --sqx-text:#d3e2ef;
}

/* Legende */
.sqx-legend{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 18px;padding:0;font-size:13px;color:var(--sqx-text)}
.sqx-legend li{display:flex;align-items:center;gap:8px}

/* Statusmarken */
.sqx-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;flex:none;border:1px solid currentColor}
.sqx-ok{color:var(--sqx-ok);background:rgba(89,224,180,.12)}
.sqx-pilot{color:var(--sqx-pilot);background:rgba(242,195,91,.12)}
.sqx-road{color:var(--sqx-road);background:rgba(169,184,214,.1)}

/* Funktionalitäten: sechs Bereiche */
.sqx-cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sqx-cap{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;border:1px solid var(--sqx-card-border);border-radius:var(--sqx-card-radius);background:var(--sqx-card-bg);min-width:0}
.sqx-cap .sq-card-icon{display:flex;color:var(--sqx-icon);margin:0 0 4px}
.sqx-cap .sq-card-icon svg{width:40px;height:40px}
.sqx-cap h3{margin:0 0 4px;color:#f4f9ff}
.sqx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sqx-li{display:flex;gap:10px;align-items:flex-start;color:var(--sqx-text)}
.sqx-li .sqx-mark{margin-top:1px}
.sqx-li-text{min-width:0}
.sqx-list-compact{gap:7px}

/* Integrationskarten mit Listen */
.section-integrations .feature-card .sqx-list{margin-top:2px}
.section-integrations .feature-card .feature-index{margin-bottom:34px}

/* Sicherheit: Kontrollen mit Status */
.sqx-trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sqx-trust{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border:1px solid var(--sqx-card-border);border-radius:var(--sqx-card-radius);background:var(--sqx-card-bg);min-width:0}
.sqx-trust h3{margin:6px 0 0;color:#f4f9ff}
.sqx-trust p{margin:0;color:var(--sqx-text)}
.sqx-chip{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid currentColor;border-radius:7px;font:700 11px ui-monospace,Consolas,monospace;letter-spacing:.08em}
.sqx-chip-ok{color:var(--sqx-ok);background:rgba(89,224,180,.1)}
.sqx-chip-pilot{color:var(--sqx-pilot);background:rgba(242,195,91,.1)}
.sqx-chip-road{color:var(--sqx-road);background:rgba(169,184,214,.08)}
.sqx-chip-scope{color:#9fd6f2;background:rgba(20,129,217,.14)}
.sqx-note{margin:20px 0 0;color:#bfd0e2;font-size:13px;line-height:1.5}

/* Governance: Rollen und Budgetfreigabe */
.sqx-sub{margin-top:56px}
.sqx-sub-head{margin-bottom:22px;max-width:920px}
.sqx-sub-head .eyebrow{margin:0 0 8px}
.sqx-sub-title{margin:0 0 10px;color:#f4f9ff}
.sqx-sub-text{margin:0;color:var(--sqx-text)}
.sqx-role-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sqx-role{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--sqx-card-border);border-radius:var(--sqx-card-radius);background:var(--sqx-card-bg);min-width:0}
.sqx-role .sq-card-icon{color:var(--sqx-icon)}
.sqx-role .sq-card-icon svg{width:34px;height:34px}
.sqx-role h3{margin:8px 0 6px;color:#f4f9ff}
.sqx-role p{margin:0;color:var(--sqx-text)}
.sqx-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.sqx-flow-step{position:relative;padding:22px 22px 24px;border-top:2px solid #3f7ca8;background:linear-gradient(180deg,rgba(7,51,81,.55),rgba(6,35,64,.1));border-radius:0 0 var(--sqx-card-radius) var(--sqx-card-radius)}
.sqx-flow-step:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:14px;color:#69d8f8;font-size:20px}
.sqx-flow-num{display:block;font:600 12px ui-monospace,Consolas,monospace;color:#79a9e3;letter-spacing:.1em;margin-bottom:10px}
.sqx-flow-step h3{margin:0 0 8px;color:#f4f9ff}
.sqx-flow-step p{margin:0;color:var(--sqx-text)}

/* Responsiv */
@media(max-width:1180px){.sqx-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sqx-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.sqx-cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sqx-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.sqx-flow-step:not(:last-child)::after{display:none}}
@media(max-width:640px){.sqx-cap-grid,.sqx-trust-grid,.sqx-role-grid,.sqx-flow{grid-template-columns:1fr}.sqx-cap,.sqx-trust,.sqx-role{padding:20px}.sqx-sub{margin-top:40px}}

/* Fokus und Kontrast */
.sqx-cap:focus-within,.sqx-trust:focus-within{outline:2px solid #8dd9f6;outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.sqx-cap,.sqx-trust,.sqx-role{transition:border-color .2s,transform .2s}.sqx-cap:hover,.sqx-trust:hover,.sqx-role:hover{border-color:#4fc1e8}}