/* =====================================================================
   MiRA (.mx-*) und BsMind (.bs-*): Handy-Anpassung (2026-10-01)
   Desktop-Design bleibt, nur Platz-Anpassung. Alles in max-width-Media-Queries,
   Desktop ab 761 px unverändert. Karten- und Schrittreihen wischen statt stapeln:
   Reihe = .m-swipe + data-m-swipe (css/m-swipe.css, Punkte aus js/m-swipe.js).
   Seiteneigene Grundregeln stehen weiter im Inline-<style> der Seiten.
   ===================================================================== */
@media (max-width: 760px) {
  /* ---------- gemeinsame Wischreihen ---------- */
  :is(.sub-mira, .sub-bsmind) :is(.mx-wrap, .bs-wrap) .m-swipe { --m-bleed: 20px; align-items: stretch; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-bento, .bs-bento).m-swipe { margin-top: 32px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-bento, .bs-bento).m-swipe > * { grid-column: auto; grid-row: auto; }

  /* Schrittleisten (2026-10-02): auf dem Handy senkrechte Zeitleiste statt Wischreihe,
     kurze Schritte lesen sich untereinander leichter. Linie läuft von Punkt zu Punkt. */
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-steps, .bs-flow-steps) { row-gap: 24px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-step, .bs-flow-step) { padding: 0 0 0 34px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-step, .bs-flow-step)::before { top: 3px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-step, .bs-flow-step)::after { content: ""; position: absolute; left: 7px; top: 21px; bottom: -24px; width: 2px; }
  .sub-mira .mx-flow-step::after { background: var(--mx-accent); }
  .sub-bsmind .bs-flow-step::after { background: var(--bs-blue); }
  .sub-bsmind .bs-flow-step:nth-last-child(2)::after { background: linear-gradient(180deg, var(--bs-blue), var(--bs-ok)); }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-step, .bs-flow-step):last-child::after { display: none; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-step, .bs-flow-step) h3 { margin-bottom: 4px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-step, .bs-flow-step) p { font-size: 15px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow, .bs-flow) { margin-top: 32px; }
  :is(.sub-mira, .sub-bsmind) :is(.mx-flow-ends, .bs-flow-ends) { margin-top: 24px; font-size: 14px; }
  /* Kicker nicht unter 12 px */
  :is(.sub-mira, .sub-bsmind) :is(.mx-eyebrow, .bs-eyebrow) { font-size: 12px; }

  /* ---------- MiRA ---------- */
  .sub-mira .mx-motif { max-width: 320px; }
  :is(.sub-mira, .sub-bsmind) .dv-tab { min-height: 44px; }
  /* Kennzahlen: Zifferblatt und Legende nebeneinander wie am Desktop */
  .sub-mira .mx-day { margin-top: 32px; }
  .sub-mira .mx-day-grid { grid-template-columns: 132px minmax(0,1fr); justify-items: stretch; text-align: left; gap: 16px; margin-top: 8px; }
  .sub-mira .mx-clock { width: 132px; }
  .sub-mira .mx-clock-cap { font-size: 20px; }
  .sub-mira .mx-mini-label { font-size: 16px; }
  .sub-mira .mx-day-legend { gap: 14px; }
  .sub-mira .mx-leg { padding-bottom: 14px; column-gap: 10px; }
  .sub-mira .mx-leg b { font-size: 24px; }
  .sub-mira .mx-leg p { font-size: 13px; }
  .sub-mira .mx-day-foot { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; padding-top: 20px; }
  .sub-mira .mx-day-foot p { font-size: 15px; line-height: 1.5; }
  .sub-mira .mx-day-foot b { font-size: 19px; }
  .sub-mira .mx-note { margin-top: 18px; }
  .sub-mira .mx-bento.m-swipe { --m-card: 84%; }

  /* ---------- BsMind ---------- */
  .sub-bsmind .bs-illu { max-width: 380px; }
  .sub-bsmind .bs-logo-txt > span { font-size: 12px; }
  /* Hero-Grafik: Beschriftung nicht unter 11 px */
  .sub-bsmind :is(.bsi-lbl, .bsi-name, .bsi-synctxt) { font-size: 8.6px; }
  .sub-bsmind .bs-pain.m-swipe { --m-card: 78%; margin-top: 32px; }
  .sub-bsmind .bs-pain-card { padding: 22px 20px; }
  /* Kanäle + Beispielbox: Kopf wie am Desktop in einer Zeile, Zeilen etwas enger */
  .sub-bsmind .bs-sync { margin-top: 32px; gap: 28px; }
  .sub-bsmind .bs-demo-head { flex-direction: row; align-items: center; padding: 16px 18px; }
  .sub-bsmind .bs-demo ul { padding: 2px 18px 6px; }
  .sub-bsmind .bs-demo li { padding: 9px 0; font-size: 14px; gap: 10px; grid-template-columns: 26px minmax(0,1fr) auto; }
  .sub-bsmind .bs-demo-ic { width: 26px; height: 26px; font-size: 12px; }
  .sub-bsmind .bs-demo-foot { padding: 12px 18px; }
  /* Funktionen: die zwei großen Karten (Lager, KI) stehen untereinander, die fünf kurzen wischen */
  .sub-bsmind .bs-bento { margin-top: 32px; gap: 16px; }
  .sub-bsmind .bs-bento-more.m-swipe { --m-card: 80%; }
  .sub-bsmind .bs-bento-more > .bs-cell { padding: 22px 20px; }
  .sub-bsmind .bs-cell--ai { gap: 20px; }
  .sub-bsmind .bs-fc { max-width: 340px; }
  /* Vorher/Nachher und Zielgruppen: untereinander statt wischen */
  .sub-bsmind .bs-vs { margin-top: 32px; gap: 16px; }
  .sub-bsmind .bs-vs-col { padding: 22px 20px 6px; }
  .sub-bsmind .bs-vs-row { padding: 14px 0; }
  .sub-bsmind .bs-who { margin-top: 32px; gap: 28px; }
  .sub-bsmind .bs-who-card { padding: 18px 0 0; }
  .sub-bsmind .bs-who-card p { font-size: 15px; }
}