/* =========================================================
   convi APPS (Phase P1 · 2026-10-11) – /leistungen/wordpress-plugins/ (Seite 4096)
   Markup: inc/apps/render.php. Baut auf br-v2.css (.mr-br-*) auf; hier nur Übersicht und Produktkarten.
   Keine Pfeile, Unterstreichung nur bei Inline-Links, reduced motion statisch.
========================================================= */

.mr-ap-ico { display: block; width: 22px; height: 22px; }

/* home-v2 hält den Akzent im Hero einzeilig; hier ist er länger und darf mobil umbrechen */
.mr-ap-hero .mr-hv2-accent { white-space: normal; }

/* ---------- Signature: convi APPS Übersicht ---------- */
.mr-ap-hub {
  position: relative;
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid rgba(143, 182, 255, .2);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(9, 14, 28, .72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 70px rgba(47, 124, 255, .1);
}
.mr-ap-hub__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 2px 4px 12px; border-bottom: 1px solid var(--br-line); }
.mr-ap-hub__bar .mr-br-app__dots { margin: 0; }
.mr-ap-hub__bar .mr-br-app__dots i { background: rgba(255, 255, 255, .22); }
.mr-ap-hub__title { color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: .01em; }
.mr-ap-hub__wp { margin-left: auto; color: var(--br-muted); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mr-ap-hub__list { display: grid; gap: 8px; }
.mr-ap-hub__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--br-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.mr-ap-hub__icon,
.mr-ap-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(47, 124, 255, .28), rgba(124, 60, 255, .2));
  color: #cfe0ff;
}
.mr-ap-hub__name { display: grid; gap: 2px; min-width: 0; }
.mr-ap-hub__name strong { color: #fff; font-size: .95rem; font-weight: 650; line-height: 1.25; }
.mr-ap-hub__name span { color: var(--br-muted); font-size: .8rem; line-height: 1.3; }
.mr-ap-hub__state {
  padding: 5px 10px;
  border: 1px solid var(--br-line);
  border-radius: 999px;
  color: var(--br-text);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.mr-ap-hub__state.is-live { border-color: rgba(110, 231, 200, .32); background: rgba(110, 231, 200, .08); color: var(--br-green); }
.mr-br .mr-ap-hub__cap { margin-top: 12px; color: var(--br-muted); font-size: .82rem !important; line-height: 1.5 !important; }
@media (max-width: 420px) {
  .mr-ap-hub__row { gap: 10px; padding: 10px 12px; }
  .mr-ap-hub__icon { width: 34px; height: 34px; border-radius: 10px; }
  .mr-ap-hub__state { padding: 4px 8px; font-size: .7rem; }
}

/* ---------- Warum ---------- */
@media (min-width: 1025px) { .mr-ap-why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Produktkarten ---------- */
.mr-ap-cards { display: grid; gap: 18px; }
@media (min-width: 1025px) { .mr-ap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-ap-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius);
  background: var(--br-card);
  scroll-margin-top: 110px;
}
@media (min-width: 1025px) { .mr-ap-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.mr-ap-card__head { display: flex; align-items: center; gap: 14px; }
.mr-ap-card__head > div { min-width: 0; }
.mr-ap-card__icon { width: 46px; height: 46px; border-radius: 14px; }
.mr-br .mr-ap-card__cat { color: #9fc2ff; font-size: .72rem !important; font-weight: 700; letter-spacing: .12em; line-height: 1.3 !important; text-transform: uppercase; }
.mr-ap-card__live {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid rgba(110, 231, 200, .32);
  border-radius: 999px;
  background: rgba(110, 231, 200, .08);
  color: var(--br-green);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.mr-ap-card__text { color: var(--br-text); }
.mr-ap-card__plans { display: grid; gap: 12px; margin-top: auto; }
@media (min-width: 600px) { .mr-ap-card__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-ap-plan { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--br-line); border-radius: 18px; background: rgba(255, 255, 255, .025); }
.mr-ap-plan--pro { border-color: rgba(143, 182, 255, .28); background: linear-gradient(150deg, rgba(47, 124, 255, .12), rgba(124, 60, 255, .06)); }
.mr-br .mr-ap-plan__tag { color: var(--br-muted); font-size: .72rem !important; font-weight: 700; letter-spacing: .12em; line-height: 1.3 !important; text-transform: uppercase; }
.mr-ap-plan--pro .mr-ap-plan__tag { color: #9fc2ff; }
.mr-br .mr-ap-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px !important; line-height: 1.3 !important; }
.mr-ap-plan__price strong { color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.mr-ap-plan__price span { color: var(--br-muted); font-size: .84rem; }
.mr-ap-plan .mr-br-checks--sm { margin-top: 14px !important; }
@media (max-width: 479px) {
  .mr-ap-card__head { flex-wrap: wrap; }
  .mr-ap-card__live { margin-left: 60px; }
}

/* ---------- Support ---------- */
.mr-ap-help { align-self: center; }

@media (prefers-reduced-motion: reduce) {
  .mr-ap * { transition: none !important; animation: none !important; }
}