/* ==========================================================================
   /plattform/integrationen: Version B ("ig-" = Integrationen)
   --------------------------------------------------------------------------
   Ergänzt nur die neuen Sektionen. Protokoll-Chips, Systemkacheln,
   SAP-Block und Adapter-Framework nutzen weiter die .int-*-Klassen aus
   site.css, die Substanz von Version A war richtig, nur falsch eingeordnet.
   ========================================================================== */

/* ---------- Einer von vier Bausteinen ---------- */

.ig-bausteine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ig-baustein { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px;
  border-radius: 16px; border: 1px solid var(--border-1); background: var(--paper);
  text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s; }
.ig-baustein:hover { transform: translateY(-2px); border-color: var(--primary); }
.ig-baustein.is-current { border-color: var(--primary); border-width: 2px;
  padding: 19px 19px 17px; background: var(--accent); }
.ig-baustein-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.ig-baustein.is-current .ig-baustein-icon { background: var(--primary); color: #fff; }
.ig-baustein-label { font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  color: var(--fg-1); }
.ig-baustein-note { font-size: 13px; line-height: 1.5; color: var(--fg-2); }

/* ---------- Governance: wer darf was ---------- */

.ig-access { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ig-access-item { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px;
  border-radius: 18px; border: 1px solid var(--border-1); background: var(--paper); min-width: 0; }
.ig-access-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.ig-access-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-1); margin: 6px 0 0; }
.ig-access-body { font-size: 14.5px; line-height: 1.62; color: var(--fg-2); margin: 0; }
.ig-access-link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center;
  gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.ig-access-link:hover { text-decoration: underline; }

.ig-final-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }