/* pxMEDIA AI — Das Symbol „Firmengehirn → Prozesse → Stellen“ (js/gehirn.js, Fassung 3).
   Farbregel der Marke: Cyan = KI, Lila = Mensch. Zwei Stufen über data-stufe:
   „gehirn“ (Kern, Ring, Bereiche, Mitarbeiter) und „spiegel“ (Werkzeuge hinten, Gehirn
   in der Mitte, der Spiegel vorn mit Menschen und KI). Übergänge sind weiche Transforms;
   bei reduzierter Bewegung stehen alle Teile sofort. */
.gehirn{margin:0;width:100%;max-width:44rem;margin-inline:auto;position:relative}
.gehirn svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
.gehirn text{fill:var(--c-text-2);font-size:12.5px;font-weight:700;letter-spacing:.02em;paint-order:stroke;stroke:rgba(21,21,21,.85);stroke-width:4px;stroke-linejoin:round}
.gehirn__legende{font-size:11.5px;font-weight:400;fill:var(--c-text-2)}
.gehirn__legende--mensch{fill:var(--c-mensch);font-weight:700}
.gehirn__legende--ki{fill:var(--c-ki);font-weight:700}

/* Kern: viele verknüpfte Punkte, leicht in Bewegung */
.gehirn__kernrand{fill:rgba(6,182,212,.07);stroke:rgba(6,182,212,.45);stroke-width:1.2;stroke-dasharray:2 5}
.gehirn__kern circle{fill:#9beaf6;filter:drop-shadow(0 0 3px rgba(6,182,212,.9))}
.gehirn__linien line{stroke:rgba(6,182,212,.42);stroke-width:1}

/* Ring, Äste, Bereiche */
.gehirn__ring{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2}
.gehirn__ast{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.gehirn__ast--person{stroke:rgba(255,255,255,.16);stroke-width:1}
.gehirn__ast--werkzeug{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 5}
.gehirn__knoten{fill:#1e1e1e;stroke:rgba(255,255,255,.55);stroke-width:1.6}
.gehirn__bereich{transition:opacity .5s var(--kurve)}

/* Mitarbeiter: Kopf + Schultern — Cyan = KI, Lila = Mensch */
.gehirn__person circle,.gehirn__person path{stroke-width:1.2}
.gehirn__person--ki circle{fill:var(--c-ki);stroke:#151515}
.gehirn__person--ki path{fill:rgba(6,182,212,.55);stroke:var(--c-ki)}
.gehirn__person--mensch circle{fill:var(--c-mensch);stroke:#151515}
.gehirn__person--mensch path{fill:rgba(165,148,249,.55);stroke:var(--c-mensch)}

/* Werkzeuge (hinten) und Spiegel (vorn) */
.gehirn__werkzeug{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22);stroke-width:1}
.gehirn__werkzeug-text{font-size:11px;font-weight:700;fill:var(--c-text-2)}
.gehirn__spiegel{fill:rgba(202,255,255,.06);stroke:var(--spiegel-1);stroke-width:2.2;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(89,228,198,.55))}
.gehirn__spiegel-hinten{fill:none;stroke:rgba(89,228,198,.22);stroke-width:1.2}

/* Die Stufen: Ebenen ein- und ausblenden, das Gehirn tritt in der Spiegel-Stufe zurück */
.gehirn__ebene{transition:opacity .7s var(--kurve),transform .9s var(--kurve)}
.gehirn__gehirn{transition:transform .9s var(--kurve),opacity .7s var(--kurve)}   /* Ursprung 0 0 des Bildraums: erst verschieben, dann verkleinern */
.gehirn[data-stufe="gehirn"] .gehirn__ebene--spiegel{opacity:0;pointer-events:none}
.gehirn[data-stufe="spiegel"] .gehirn__ebene--gehirn{opacity:.28;transform:translate(320px,272px) scale(.62)}
.gehirn[data-stufe="spiegel"] .gehirn__gehirn{transform:translate(320px,272px) scale(.62);opacity:.8}
.gehirn[data-stufe="spiegel"] .gehirn__legende-gruppe{opacity:.5}
.gehirn[data-bewegt="ja"] .gehirn__ringgruppe{animation:gehirn-dreh 140s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes gehirn-dreh{to{transform:rotate(360deg)}}
.gehirn[data-bewegt="ja"] .gehirn__person{animation:gehirn-atmen 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.3s);transform-box:fill-box;transform-origin:center}
@keyframes gehirn-atmen{50%{opacity:.78}}
@media (prefers-reduced-motion:reduce){
  .gehirn *{animation:none !important;transition:none !important}
}

/* Klassische Seite: das Modul im Struktur-Kasten (#gehirn) */
.gefuege__bild .gehirn{max-width:none}
.gefuege__stufen{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.gefuege__stufen button{min-height:44px;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--c-linie-2);background:transparent;color:var(--c-text-2);font:700 .9rem var(--font);cursor:pointer}
.gefuege__stufen button[aria-pressed="true"]{border-color:var(--c-ki);color:var(--c-ki);background:var(--c-ki-weich)}