/* ============================================================================
   Intune-Reifegrad: Sektions-CSS.
   Umsetzung der Design-Vorlage "Intune Reifegrad Matrix". Zehn Bereiche als
   Zeilen, drei Reifestufen als Spalten, aufklappbar. Bewusst natives
   <details>/<summary> statt eigenem JS: kein zusaetzliches Skript, der Inhalt
   bleibt im DOM und damit indexierbar. Alles andere kommt aus core.css.
   Keine Em-Dashes (Markenregel).
   ========================================================================== */

/* --- Matrix --------------------------------------------------------------- */
.rg-matrix { margin-top: var(--space-6); border-top: 1px solid var(--c-border); }

.rg-matrix__head,
.rg-row > summary {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.rg-matrix__head { padding: var(--space-3) 0; border-bottom: 1px solid var(--c-border); }
.rg-matrix__head .mono-label { color: var(--c-text-muted); }

.rg-row { border-bottom: 1px solid var(--c-border); }
.rg-row > summary {
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  transition: background var(--transition);
}
.rg-row > summary::-webkit-details-marker { display: none; }
.rg-row > summary:hover .rg-row__name { color: var(--c-brand); }

.rg-row__name {
  display: flex; align-items: baseline; gap: 0.6em;
  font-weight: 700; line-height: var(--lh-head);
  transition: color var(--transition);
}
.rg-row__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; color: var(--c-text-muted); }
/* Plus dreht auf x, sobald die Zeile offen ist. Gleiches Muster wie die FAQ
   auf der Startseite. */
.rg-row__icon {
  margin-left: auto; font-size: 1.5em; line-height: 1;
  /* Weder Lime noch --c-brand traegt in beiden Themes: Lime kommt auf hellem
     Grund auf 1,15:1, --c-brand in Dark auf 3,83:1. --c-text-muted liegt in
     beiden ueber AA. Beim Hover und im offenen Zustand darf es faerben. */
  color: var(--c-text-muted);
  transition: transform var(--transition), color var(--transition);
}
.rg-row > summary:hover .rg-row__icon,
.rg-row[open] .rg-row__icon { color: var(--c-text); }
.rg-row[open] .rg-row__icon { transform: rotate(45deg); }

.rg-row__stufe { display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--c-text-muted); }
/* Stufe 3 ist das Ziel und steht deshalb in der Markenfarbe. */
.rg-row__stufe--ziel { color: var(--c-text); }
.rg-row__stufe--ziel span:last-child { font-weight: 500; }
.rg-row__stufenlabel { display: none; color: var(--c-text-muted); }

.rg-row__body { padding: 0 0 var(--space-6); display: grid; gap: var(--space-5); max-width: 75ch; }
.rg-row__nutzen .mono-label { color: var(--c-text-muted); margin-bottom: var(--space-3); display: block; }
.rg-row__nutzen ul { margin: 0 0 0 var(--space-5); list-style: disc; }
.rg-row__nutzen li { margin-bottom: var(--space-2); line-height: 1.6; }

/* Lime kommt im Designsystem nur auf Blau- und Dunkelflaechen vor
   (.lever__num, .faq__icon). Auf dem Seitenhintergrund waere der Kontrast
   1,15:1 und damit unsichtbar, deshalb hier durchgaengig --c-brand. */

/* --- Prueffrage ----------------------------------------------------------- */
.rg-check {
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--c-brand);
  background: var(--c-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rg-check__label { color: var(--c-text-muted); margin-bottom: var(--space-2); }
.rg-check__q { font-size: var(--fs-lead); font-weight: 500; line-height: var(--lh-head); margin: 0; }

/* --- Nummerierte Fragenliste (Unser Beitrag) ------------------------------ */
.rg-fragen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: 62ch; }
.rg-fragen li { display: flex; gap: var(--space-4); align-items: baseline; font-size: var(--fs-lead); }
.rg-frage__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; color: var(--c-text-muted); flex: none; }

/* --- Button-Reihe im Schluss-CTA ------------------------------------------ */
.rg-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .rg-matrix__head { display: none; }
  .rg-row > summary { grid-template-columns: 1fr; gap: var(--space-4); }
  .rg-row__stufenlabel { display: block; }
  .rg-row__stufe { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rg-check { padding: var(--space-4) var(--space-5); }
  .rg-fragen li { font-size: var(--fs-body); }
}