/* Produkt-Wechsel in der weißen Hero-Karte (MedMentis, RedMentis, BsMind), Yusuf 2026-10-11. JS: js/hero-prod-card.js
   Im HTML liegen je Produkt eine Kugel (img[data-p]) und ein Textblock (.gc-ai-text[data-p]) übereinander.
   Sichtbar ist, was zu data-prod der Karte passt; der Wechsel ist ein reines Überblenden (opacity), die Karte wird nie leer.
   Die Kugeln sind drei fertige Bilddateien und bewegen sich wie die MedMentis-Kugel seit jeher (drehen + atmen, style.css
   .gc-ai-icon-img). Nie per CSS-Filter umfärben und nie das src tauschen: Safari ließ MedMentis danach grün (11.10.). */
.gc-ai-agent [data-p] { opacity: 0; }
.gc-ai-agent[data-prod="medmentis"] [data-p="medmentis"],
.gc-ai-agent[data-prod="redmentis"] [data-p="redmentis"],
.gc-ai-agent[data-prod="bsmind"] [data-p="bsmind"] { opacity: 1; }
/* Kugel: die neue blendet ein, die alte geht erst danach weg, so wird die Kugel in der Mitte nicht blass */
.gc-ai-agent img[data-p] { transition: opacity .45s ease .2s; }
.gc-ai-agent[data-prod="medmentis"] img[data-p="medmentis"],
.gc-ai-agent[data-prod="redmentis"] img[data-p="redmentis"],
.gc-ai-agent[data-prod="bsmind"] img[data-p="bsmind"] { transition: opacity .45s ease; }
/* Text: alter Text kurz aus, neuer gleich danach ein, damit sich nie zwei Texte überlagern */
.gc-ai-agent .gc-ai-text[data-p] { transition: opacity .18s ease; }
.gc-ai-agent[data-prod="medmentis"] .gc-ai-text[data-p="medmentis"],
.gc-ai-agent[data-prod="redmentis"] .gc-ai-text[data-p="redmentis"],
.gc-ai-agent[data-prod="bsmind"] .gc-ai-text[data-p="bsmind"] { transition: opacity .32s ease .16s; }

/* Kugeln 2 und 3 liegen deckungsgleich über der ersten */
.hero-pangolin .hero-content .hero-cards-grid--3 .gc-ai-icon img[data-p] ~ img[data-p] { position: absolute; left: 0; top: 0; }
/* Schatten je Kugel in ihrer Farbe: fester Wert je Bild, wird nie umgeschaltet (also kein Safari-Filterproblem) */
.hero-pangolin .hero-content .hero-cards-grid--3 .gc-ai-icon img[data-p="redmentis"] { filter: drop-shadow(0 6px 16px rgba(138,10,18,.30)); }
.hero-pangolin .hero-content .hero-cards-grid--3 .gc-ai-icon img[data-p="bsmind"] { filter: drop-shadow(0 6px 16px rgba(22,84,190,.30)); }
/* Schein hinter der Kugel in der Produktfarbe: als Farbfläche mit Maske statt Verlauf, damit die Farbe mit überblenden kann */
.gc-ai-agent .gc-ai-icon::after { background: none; background-color: rgba(70,150,250,.36); transition: background-color .5s ease;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 45%, transparent 70%); mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 45%, transparent 70%); }
.gc-ai-agent[data-prod="redmentis"] .gc-ai-icon::after { background-color: rgba(170,30,40,.30); }
.gc-ai-agent[data-prod="bsmind"] .gc-ai-icon::after { background-color: rgba(40,105,215,.32); }

/* Drei Punkte unten in der Karte; Tippfläche größer als der sichtbare Punkt */
.gc-prod-dots { position: absolute; left: 0; right: 0; bottom: 1px; z-index: 2; display: flex; justify-content: center; gap: 0; }
.gc-prod-dots button { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 0; margin: 0; width: 22px; height: 16px; display: grid; place-items: center; cursor: pointer; }
.gc-prod-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: #c3c9d4; transition: width .24s ease, background-color .24s ease; }
.gc-prod-dots button[aria-pressed="true"]::before { width: 16px; background: #0b1c3d; }
.gc-prod-dots button:focus-visible { outline: 2px solid #0071e3; outline-offset: -4px; border-radius: 6px; }

/* Handy (Karte liegt quer, Kugel und Text stehen im Fluss): Kugeln 2 und 3 ohne inset = Mitte der Kugel-Box,
   vom Text steht nur der gezeigte Block im Fluss (Wechsel dort ohne Blende); Punkte als Spalte rechts unter dem Pfeil */
@media (max-width: 767px) {
  .hero-pangolin .hero-content .hero-cards-grid--3 .gc-threat-counter .gc-ai-icon img[data-p] ~ img[data-p] { left: auto; top: auto; width: 64px !important; height: 64px !important; margin: 0; }
  .hero-pangolin .hero-content .hero-cards-grid--3 .gc-threat-counter.gc-ai-agent .gc-ai-text[data-p] { display: none !important; transition: none; }
  .hero-pangolin .hero-content .hero-cards-grid--3 .gc-threat-counter.gc-ai-agent[data-prod="medmentis"] .gc-ai-text[data-p="medmentis"],
  .hero-pangolin .hero-content .hero-cards-grid--3 .gc-threat-counter.gc-ai-agent[data-prod="redmentis"] .gc-ai-text[data-p="redmentis"],
  .hero-pangolin .hero-content .hero-cards-grid--3 .gc-threat-counter.gc-ai-agent[data-prod="bsmind"] .gc-ai-text[data-p="bsmind"] { display: block !important; }
  .gc-prod-dots { left: auto; right: 4px; top: 40px; bottom: 6px; flex-direction: column; justify-content: center; align-items: center; }
  .gc-prod-dots button { width: 44px; height: 22px; }
  .gc-prod-dots button::before { transition: height .24s ease, background-color .24s ease; }
  .gc-prod-dots button[aria-pressed="true"]::before { width: 6px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gc-ai-agent [data-p], .gc-ai-agent[data-prod] [data-p], .gc-ai-agent .gc-ai-icon::after, .gc-prod-dots button::before { transition: none !important; } }