/* =====================================================================
   RedMentis-Seite (redmentis.html DE + EN), Umbau 2026-09-30
   - .rmx-*   Demoansicht „Die Plattform in Aktion" (Vorlage: Startseite #defense-engine,
              Tab-Logik aus js/gad-dash.js über data-gad-*)
   - .rmw-*   Grafik „Wie es funktioniert" (Stil wie BsMind-Hero, reference/bsmind/bsillu.py)
   - .rm-faq  FAQ wie Startseite (nur Linien)
   Flächen nur Navy #0b1c3d und Weiß, RedMentis-Rot nur als Akzent.
   ===================================================================== */
:root { --rm-navy: #0b1c3d; --rm-btn: #16336a; --rm-line: #e3e9f2;
  /* RedMentis-Bordeaux, aus dem Hero-Schild gemessen (images/shield-redmind.png: Median #880002, dunkel #550005, hell #b40608), 2026-09-30.
     Weiß auf --rm-red 10,6:1, auf --rm-red-dark 13:1. Stufen = Schweregrade (deep > red > 600 > 500 > 400). */
  --rm-red-deep: #4e0308; --rm-red-dark: #6a060d; --rm-red: #8a0a12; --rm-red-600: #a8323a; --rm-red-500: #b85a60; --rm-red-400: #c9787d;
  --rm-red-tint: #f7eced; --rm-red-soft: rgba(138,10,18,.07); --rm-red-line: rgba(138,10,18,.24);
  /* hellere Stufe desselben Tons für Navy-Flächen: #d0555c 3,9:1, Text #dc7e84 5,1:1 auf #0b1c3d */
  --rm-red-nv: #d0555c; --rm-red-nv-text: #dc7e84; --rm-red-nv-pale: #efc3c6;
  --rm-red-text: var(--rm-red); --accent-redmind: var(--rm-red); }
/* sitewide Rot (style.css) auf dieser Seite in Bordeaux */
.eyebrow.eyebrow-redmind { color: var(--rm-red); }
:is(.rm-wie, .rm-section-dark) { --accent-redmind: var(--rm-red-nv); }
:is(.rm-wie, .rm-section-dark) .eyebrow.eyebrow-redmind { color: var(--rm-red-nv-text); }
.sub-compare-tag-dot { background: var(--accent-redmind) !important; }
/* Overall-Score-Hexagon: js/redmind-hero.js setzt Orange/Gelb inline, hier Bordeaux-Stufen (A bleibt Grün = ok) */
.rm-hero-comp[data-phase="0"] .rm-hero-score__hex { background: var(--rm-red) !important; }
.rm-hero-comp[data-phase="1"] .rm-hero-score__hex { background: var(--rm-red-600) !important; }
.rm-hero-comp[data-phase="2"] .rm-hero-score__hex { background: var(--rm-red-500) !important; }

/* ---------- Problem-Sektion: Etikett als Pille, Listenpunkte mit Zeichen ---------- */
.rm-section-dark .sub-compare-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; }
.rm-section-dark .sub-compare-list li::before {
  content: "×"; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.10);
}
.rm-section-dark .sub-compare-card--accent .sub-compare-list li::before { content: "✓"; color: #fff; background: rgba(208,85,92,.6); }

/* ---------- Video-Tabs: Fingertipp-Größe ---------- */
.dv-tab { min-height: 44px; }

/* =====================================================================
   1. DEMOANSICHT (.rmx-*)
   ===================================================================== */
section.rm-platform { padding: 96px 0 104px; }
.rm-platform .lead { max-width: 760px; margin-bottom: 36px; }
.rmx-caption { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 18px; font-size: 14px; line-height: 1.5; color: #4a5768; text-align: center; }
.rmx-caption-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-red-text); background: var(--rm-red-soft); border: 1px solid var(--rm-red-line); border-radius: 999px; padding: 3px 10px; }

.rmx-frame { position: relative; max-width: 1180px; margin: 0 auto; background: #fff; border: 1px solid rgba(20,40,80,.10); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(20,40,80,.16), 0 4px 12px rgba(20,40,80,.06); font-family: 'Inter', -apple-system, sans-serif; }
.rmx-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px; background: #fff; border-bottom: 1px solid rgba(20,40,80,.08); }
.rmx-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--rm-navy); letter-spacing: -.005em; }
.rmx-brand img { width: auto; height: 24px; display: block; }
.rmx-tabs { display: flex; gap: 4px; flex: 1; justify-content: center; }
.rmx-tab { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: #4a5768; cursor: pointer; white-space: nowrap;
  transition: background 180ms ease, color 180ms ease; -webkit-tap-highlight-color: transparent; }
.rmx-tab:hover { background: rgba(11,28,61,.06); color: var(--rm-navy); }
.rmx-tab.is-active { background: var(--rm-btn); color: #fff; font-weight: 600; }
/* Verkleinerte Demo (Handy/Tablet): aktiver Reiter bleibt gleich breit, sonst rutschen die Nachbarn beim Tippen */
.rmx-frame.is-fit .rmx-tab.is-active { font-weight: 500; }
.rmx-tab:focus-visible, .rmx-cycle:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.rmx-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rmx-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rm-red-text); padding: 4px 10px; border-radius: 999px; background: var(--rm-red-soft); border: 1px solid var(--rm-red-line); }
.rmx-cycle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(20,40,80,.14); background: #fff; color: var(--rm-navy); display: grid; place-items: center; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.rmx-cycle svg { width: 18px; height: 18px; }
.rmx-cycle:hover { background: var(--rm-btn); border-color: var(--rm-btn); color: #fff; }

.rmx-app { display: grid; grid-template-columns: 184px minmax(0,1fr); min-height: 612px; } /* Höhe der längsten Ansicht, kein Springen beim Umschalten */
.rmx-rail { background: var(--rm-navy); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.rmx-navitem { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; text-align: left; color: rgba(232,234,238,.75); white-space: nowrap; cursor: pointer;
  transition: background 180ms ease, color 180ms ease; -webkit-tap-highlight-color: transparent; }
.rmx-navitem:hover { background: rgba(255,255,255,.07); color: #fff; }
.rmx-navitem:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.rmx-navitem svg { width: 16px; height: 16px; flex-shrink: 0; }
.rmx-navitem.is-active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.rmx-rail-foot { margin-top: auto; padding: 12px; font-size: 11.5px; line-height: 1.45; color: rgba(232,234,238,.6); border-top: 1px solid rgba(255,255,255,.12); }
.rmx-rail-foot b { display: block; color: #fff; font-weight: 600; }
.rmx-canvas { min-width: 0; display: flex; flex-direction: column; }
.rmx-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 22px; border-bottom: 1px solid rgba(20,40,80,.08); font-size: 12px; color: #5f6b7d; }
.rmx-strip b { color: var(--rm-navy); font-weight: 600; }
.rmx-panel { display: none; padding: 20px 22px 24px; min-width: 0; }
.rmx-panel.is-active { display: block; animation: rmx-in 320ms ease both; }
@keyframes rmx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rmx-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--rm-navy); margin: 0 0 16px; }

.rmx-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.rmx-stat { border: 1px solid rgba(20,40,80,.10); border-radius: 12px; padding: 12px 14px; background: #fff; }
.rmx-stat-label { font-size: 11.5px; color: #4a5768; margin-bottom: 8px; }
.rmx-stat-value { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--rm-navy); font-variant-numeric: tabular-nums; }
.rmx-stat-value.is-red { color: var(--rm-red-deep); } .rmx-stat-value.is-orange { color: var(--rm-red); } .rmx-stat-value.is-green { color: #1e7e34; } .rmx-stat-value.is-amber { color: #8a5a00; }
.rmx-grade { display: inline-grid; place-items: center; width: 24px; height: 27px; font-size: 13px; color: #fff; background: var(--rm-red); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

.rmx-cols { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 14px; }
.rmx-card { border: 1px solid rgba(20,40,80,.10); border-radius: 12px; padding: 16px 18px; background: #fff; min-width: 0; }
.rmx-card h5 { font-size: 13px; font-weight: 600; color: var(--rm-navy); margin: 0 0 8px; }
.rmx-card-note { font-size: 12px; color: #5f6b7d; margin: 10px 0 0; line-height: 1.5; }
.rmx-trend { width: 100%; height: auto; display: block; }
.rmx-trend text { font-size: 11px; fill: #5f6b7d; font-family: inherit; }
.rmx-trend .rmx-trend-val { font-weight: 700; fill: var(--rm-navy); }

.rmx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(20,40,80,.07); }
.rmx-row:first-of-type { border-top: 0; }
.rmx-row-main { min-width: 0; }
.rmx-row-title { font-size: 13px; color: #16233e; font-weight: 600; }
.rmx-row-sub { font-size: 11.5px; color: #5f6b7d; margin-top: 3px; }
.rmx-sev { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.rmx-sev--crit { background: var(--rm-red-deep); color: #fff; }
.rmx-sev--high { background: var(--rm-red-tint); color: var(--rm-red); }
.rmx-sev--med  { background: #f6f1f1; color: #8a4a4f; }
.rmx-sev--low, .rmx-sev--ok { background: #e8f6ee; color: #1e7e34; }
.rmx-sev--info { background: #eef3f9; color: var(--rm-btn); }

/* Angriffspfad als Kette */
.rmx-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rmx-chip { font-size: 12px; font-weight: 500; color: #16233e; padding: 4px 10px; border-radius: 8px; background: #f3f6fb; border: 1px solid rgba(20,40,80,.08); white-space: nowrap; }
.rmx-chip--target { background: var(--rm-red-tint); border-color: var(--rm-red-line); color: var(--rm-red); font-weight: 600; }
.rmx-chip--cut { text-decoration: line-through; color: #5f6b7d; }
.rmx-arrow { color: #8a94a4; font-size: 12px; }
.rmx-path { padding: 14px 0; border-top: 1px solid rgba(20,40,80,.07); }
.rmx-path:first-of-type { border-top: 0; padding-top: 4px; }
.rmx-path-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Findings-Balken */
.rmx-bars { display: grid; gap: 10px; }
.rmx-bar { display: grid; grid-template-columns: 76px minmax(0,1fr) 26px; align-items: center; gap: 10px; font-size: 12px; color: #4a5768; }
.rmx-bar-track { height: 8px; border-radius: 4px; background: #eef3f9; overflow: hidden; }
.rmx-bar-fill { display: block; height: 100%; border-radius: 4px; width: var(--w); }
.rmx-bar b { color: var(--rm-navy); text-align: right; font-variant-numeric: tabular-nums; }

/* Handy/Tablet (2026-10-01): js/rmx-fit.js setzt .is-fit, die Demo bleibt im Desktop-Layout (1100 px)
   und wird per transform: scale proportional verkleinert. Die Stapel-Regeln unten greifen nur noch ohne JS. */
.rmx-frame.is-fit { width: 1100px; max-width: none; margin: 0; transform-origin: 0 0; }
@media (max-width: 900px) {
  .rmx-frame:not(.is-fit) .rmx-topbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .rmx-frame:not(.is-fit) .rmx-tabs { order: 3; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .rmx-frame:not(.is-fit) .rmx-tabs::-webkit-scrollbar { display: none; }
  .rmx-frame:not(.is-fit) .rmx-app { grid-template-columns: 1fr; min-height: 0; }
  .rmx-frame:not(.is-fit) .rmx-rail { display: none; }
  .rmx-frame:not(.is-fit) .rmx-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  section.rm-platform { padding: 64px 0 72px; }
  .rmx-caption { flex-direction: column; gap: 8px; font-size: 13px; }
  .rm-platform .lead { margin-bottom: 24px; }
  .rmx-frame.is-fit { border-radius: 30px; } /* wirkt nach dem Verkleinern wie ca. 10 px */
  .rmx-frame:not(.is-fit) .rmx-panel { padding: 16px 14px 18px; }
  .rmx-frame:not(.is-fit) .rmx-strip { padding: 10px 14px; }
  .rmx-frame:not(.is-fit) .rmx-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rmx-frame:not(.is-fit) .rmx-stat-value { font-size: 22px; }
  .rmx-frame:not(.is-fit) .rmx-tab { padding: 0 12px; font-size: 13px; }
  .rmx-frame:not(.is-fit) .rmx-trend text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .rmx-panel.is-active { animation: none; } }

/* =====================================================================
   2. WIE ES FUNKTIONIERT (#wie auf Navy)
   ===================================================================== */
section#wie.rm-wie { background: var(--rm-navy); color: #fff; padding: 96px 0 104px; }
.rm-wie .eyebrow { color: var(--rm-red-nv-text); }
.rm-wie h2 { color: #fff !important; }
.rm-wie h2 .accent-redmind { color: var(--rm-red-nv); }
.rm-wie .lead { color: rgba(232,234,238,.82); max-width: 760px; }
.rmw-figure { margin: 44px auto 0; max-width: 1000px; }
.rmw { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.rmw--m { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 700px) { .rmw--d { display: none; } .rmw--m { display: block; } }
.rmw-box { fill: #233250; stroke: rgba(255,255,255,.42); stroke-width: 1.4; }
.rmw-box--atk { fill: #3c223a; stroke: rgba(208,85,92,.85); }
.rmw-box--crown { fill: #2d3c58; stroke: rgba(255,255,255,.6); }
.rmw-ico { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rmw-hit { fill: none; stroke: var(--rm-red-nv); stroke-width: 2.5; opacity: 0; }
.rmw-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: #9fd3ff; }
.rmw-lbl { font-size: 13px; font-weight: 600; fill: rgba(232,234,238,.9); }
.rmw-name { font-size: 14px; font-weight: 800; fill: #fff; letter-spacing: .04em; }
.rmw-sub { font-size: 11.5px; font-weight: 500; fill: rgba(232,234,238,.75); }
.rmw-base { stroke: rgba(255,255,255,.22); stroke-width: 2; fill: none; }
.rmw-red { stroke: var(--rm-red-nv); stroke-width: 3; fill: none; stroke-linecap: round; }
.rmw-beam { stroke: #9fd3ff; stroke-width: 1.8; stroke-dasharray: 3 7; fill: none; stroke-linecap: round; }
.rmw-pulse { fill: none; stroke: var(--rm-red-nv-text); stroke-width: 1.4; }
.rmw-orbit-ring { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-dasharray: 3 4; }
.rmw-pill rect { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.35); }
.rmw-pilltxt { font-size: 13px; font-weight: 700; fill: #fff; }
.rmw-token-core { fill: var(--rm-red-nv); stroke: #fff; stroke-width: 2; }
.rmw-token-ring { fill: none; stroke: rgba(208,85,92,.55); stroke-width: 2; }
.rmw-gate, .rmw-pill, .rmw-pulse, .rmw-token { transform-box: fill-box; transform-origin: center; }
/* Standbild (auch bei reduzierter Bewegung): Pfad bis zur Lücke rot, Lücke geschlossen, Pille sichtbar */
.rmw-token { opacity: 0; }
.rmw-pulse { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rmw-red { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rmwDraw 10s linear infinite; }
  .rmw-token { animation: rmwTokenX 10s linear infinite; }
  .rmw--m .rmw-token { animation-name: rmwTokenY; }
  .rmw-hit { animation: rmwHit 10s linear infinite; animation-delay: var(--d); }
  .rmw-gate { animation: rmwGate 10s cubic-bezier(.16,1,.3,1) infinite; }
  .rmw-pill { animation: rmwPill 10s ease-out infinite; }
  .rmw-beam { animation: rmwBeam 1.2s linear infinite; }
  .rmw-pulse { animation: rmwPulse 3.2s ease-out infinite; }
  .rmw-orbit { animation: rmwSpin 14s linear infinite; transform-box: view-box; }
}
@keyframes rmwDraw { 0%, 4% { stroke-dashoffset: 1; } 56% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rmwTokenX { 0% { opacity: 0; transform: none; } 4% { opacity: 1; transform: none; } 56% { opacity: 1; transform: translateX(var(--dist)); }
  60% { opacity: 1; transform: translateX(calc(var(--dist) - 10px)); } 66%, 100% { opacity: 0; transform: translateX(calc(var(--dist) - 10px)); } }
@keyframes rmwTokenY { 0% { opacity: 0; transform: none; } 4% { opacity: 1; transform: none; } 56% { opacity: 1; transform: translateY(var(--dist)); }
  60% { opacity: 1; transform: translateY(calc(var(--dist) - 10px)); } 66%, 100% { opacity: 0; transform: translateY(calc(var(--dist) - 10px)); } }
@keyframes rmwHit { 0% { opacity: 0; } 2% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes rmwGate { 0%, 44% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.12); } 54% { transform: scale(1); } 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes rmwPill { 0%, 58% { opacity: 0; transform: translateY(6px); } 64% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes rmwBeam { to { stroke-dashoffset: -20; } }
@keyframes rmwPulse { 0% { opacity: .8; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes rmwSpin { to { transform: rotate(360deg); } }

/* Schrittleiste (css/gad-flow.css) + Sicherheitsrahmen auf Navy */
.rm-wie .gf-flow { margin-top: 56px; }
.rm-wie .gf-ends b { color: #9fd3ff; }
.rm-rahmen { margin-top: 48px; padding: 24px 28px; border-radius: 16px; background: #132a52; border: 1px solid rgba(255,255,255,.10); }
.rm-rahmen .eyebrow { color: var(--rm-red-nv-text); margin-bottom: 12px; }
.rm-rahmen p { margin: 0 0 12px; font-size: 15px; color: rgba(232,234,238,.82); }
.rm-rahmen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rm-rahmen li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: rgba(232,234,238,.82); }
.rm-rahmen li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: rgba(208,85,92,.6); }
.rm-rahmen strong { color: #fff; }
@media (max-width: 600px) {
  section#wie.rm-wie { padding: 64px 0 72px; }
  .rmw-figure { margin-top: 32px; }
  .rm-rahmen { padding: 20px; }
}
/* Handy (2026-10-02): Grafik kompakter, vier Schritte als senkrechte Zeitleiste (Linie von Punkt zu Punkt),
   Problem-Vergleich untereinander statt Wischreihe (nur zwei Karten). */
@media (max-width: 760px) {
  /* Grafik in voller Breite, Beschriftung nicht unter 11 px */
  .rmw--m { max-width: 360px; }
  .rmw--m .rmw-cap { font-size: 12.5px; letter-spacing: .1em; }
  .rmw--m .rmw-sub { font-size: 12.5px; }
  .rmw--m .rmw-lbl { font-size: 13.5px; }
  .rm-wie .gf-flow { margin-top: 36px; }
  .rm-wie .gf-steps { row-gap: 24px; }
  .rm-wie .gf-step { padding: 0 0 0 34px; }
  .rm-wie .gf-step::before { top: 3px; }
  .rm-wie .gf-step::after { content: ""; position: absolute; left: 7px; top: 21px; bottom: -24px; width: 2px; background: var(--gf-a); }
  .rm-wie .gf-step:nth-last-child(2)::after { background: linear-gradient(180deg, var(--gf-a), var(--gf-ok)); }
  .rm-wie .gf-step:last-child::after { display: none; }
  .rm-wie .gf-step h3 { margin-bottom: 4px; }
  .rm-wie .gf-step p { font-size: 15px; }
  .rm-wie .gf-ends { margin-top: 24px; font-size: 14px; }
  .rm-rahmen { margin-top: 32px; }
  .rm-section-dark .sub-compare { gap: 16px; margin-top: 32px; }
  :is(.rmx-caption-tag, .sub-compare-tag) { font-size: 12px; }
}

/* =====================================================================
   4. FAQ wie Startseite: nur Linien, keine Kästen (überstimmt site-navy.css)
   ===================================================================== */
body:not(.is-home) .rm-faq .faq-item { border: 0; border-bottom: 1px solid var(--line, #d2d2d7); border-radius: 0; background: transparent; }
body:not(.is-home) .rm-faq .faq-list { border-top: 1px solid var(--line, #d2d2d7); }
.rm-faq .faq-question { color: #1d1d1f; }
/* Vier Schritte: auf Tablet 2 × 2 statt 3 + 1 */
@media (max-width: 1024px) and (min-width: 761px) { .rm-wie .gf-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Hero-Dashboard mobil: Verlauf und Angriffspfad in voller Breite, sonst ist die Schrift winzig */
@media (max-width: 560px) {
  .rm-hero-comp .rm-hero-frame__body { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "chart chart" "path path" "score meta"; aspect-ratio: auto; }
  .rm-hero-comp .rm-hero-chart, .rm-hero-comp .rm-hero-path { flex: none; height: 118px; }
  .rm-hero-comp .rm-path-label { font-size: 11px; }
  .rm-hero-comp .rm-hero-meta__label { font-size: 11px; }
}

/* ---------- Primär-Buttons auf hellen Flächen: RedMentis-Rot statt Navy (2026-09-30) ----------
   Logo-Bordeaux --rm-red, Weiß darauf 10,6:1, Hover --rm-red-dark. */
body:not(.is-home) main :is(.sub-hero--redmind, .final-cta) .btn-primary {
  background: var(--rm-red-text) !important; border-color: var(--rm-red-text) !important; color: #fff !important; }
body:not(.is-home) main :is(.sub-hero--redmind, .final-cta) .btn-primary:hover {
  background: var(--rm-red-dark) !important; border-color: var(--rm-red-dark) !important; box-shadow: 0 10px 24px rgba(138,10,18,.25); }

/* Reihenfolge seit 2026-09-30: Hero → Video → Wie (Navy) → Plattform (Weiß) → Problem (Navy) → Anwendungsfälle (Weiß) */
/* Prüfung 2026-10-02: Etikett „Mit RedMentis“ auf Dunkel lesbar */
body .rm-section-dark .sub-compare-card--accent .sub-compare-tag { color: #ff6b6b; }