/* Aingel Variante 13 – Rollen-Ring „Spezialisten statt Allround-KI“ (elemente/rollen-ring.js, rollen-ring-3d.js)
   Ein dunkler Block in beiden Modi (.block-dunkel.immer-dunkel, ohne Hintergrundmuster): links Kopf und Rollenliste,
   rechts die 3D-Bühne mit denselben Glas-Agenten wie im Hero. Die aktive Rolle trägt ihre Farbe (--aktiv). */
.rollen {
  --aktiv: var(--glas-code);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(32px, 5vw, 72px);
}
.rollen .lead { margin-top: 18px; }
.rollen__liste { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.rolle { position: relative; border-bottom: 1px solid var(--linie); }
/* Ein Strich in der Rollenfarbe links an der aktiven Zeile */
.rolle::before {
  content: ''; position: absolute; left: -16px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: var(--glas); transform: scaleY(0); transition: transform .45s var(--kurve);
}
.rolle.ist-aktiv::before { transform: scaleY(1); }
.rolle button {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 0;
}
.rolle .schild { min-width: 104px; justify-content: center; opacity: .55; transition: opacity .3s var(--kurve); }
.rolle strong { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -.01em; color: var(--text-leise); transition: color .3s var(--kurve); }
.rolle.ist-aktiv .schild { opacity: 1; }
.rolle.ist-aktiv strong, .rolle button:hover strong { color: var(--text); }
/* Der Satz der aktiven Rolle klappt auf (die übrigen sind zu) */
.rolle__satz { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--kurve); }
.rolle__satz > p { overflow: hidden; color: var(--text-leise); font-size: var(--text-normal); line-height: 1.5; padding-left: 118px; max-width: 54ch; }
.rolle.ist-aktiv .rolle__satz, .no-js .rolle__satz { grid-template-rows: 1fr; }
.rolle.ist-aktiv .rolle__satz > p, .no-js .rolle__satz > p { padding-bottom: 16px; }
.no-js .rolle .schild { opacity: 1; }
.no-js .rolle strong { color: var(--text); }
.rollen__fuss { margin-top: 24px; max-width: 52ch; }
.rollen__fuss + .weiter { margin-top: 18px; }

/* Die Bühne: quadratisch; ohne 3D steht das Standbild aus Blender */
.rollen__buehne { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: center; }
.rollen__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rollen__bild { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; transition: opacity .6s var(--kurve); }
.rollen.mit-3d .rollen__bild { opacity: 0; }
/* Unter der Bühne: welche Rolle gerade vorn steht */
.rollen__vorn {
  position: absolute; left: 50%; bottom: 4%; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); white-space: nowrap;
}
.rollen__vorn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aktiv); transition: background-color .4s var(--kurve); }

@media (max-width: 860px) {
  .rollen { grid-template-columns: 1fr; padding: 28px 20px 32px; gap: 8px; }
  .rollen__buehne { order: -1; width: min(100%, 380px); }
  .rolle::before { left: -10px; }
  .rolle .schild { min-width: 92px; }
  .rolle__satz > p { padding-left: 0; }
  .rolle strong { font-size: 1.1rem; }
}