/* ------------------------------------------- Seite /medat-vorbereitung (Präfix vmb-)
   Testteil-Kacheln und Kurs-Vergleich. */

.r-band .vmb-mitte { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.r-band .vmb-fuss { max-width: 712px; margin: 26px auto 0; font-size: 15px; line-height: 1.55; color: var(--r-leise); text-align: center; }

/* Testteil-Kacheln */
.vmb-teile { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.r-band .vmb-teile li { margin: 0; }
.vmb-teile a { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 20px 18px 18px; border-radius: 22px; background: var(--r-weiss); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(60, 45, 30, 0.05), 0 18px 40px -28px rgba(60, 45, 30, 0.35); transition: transform 0.15s; }
.vmb-teile a:hover { transform: translateY(-2px); }
.vmb-teil-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vmb-teil-sym { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--akzent) 12%, var(--r-weiss)); color: var(--akzent-tief); }
.vmb-teil-kopf b { font: 800 24px/1 "Manrope", sans-serif; letter-spacing: -0.03em; color: var(--akzent); white-space: nowrap; }
.vmb-teile strong { margin: 16px 0 6px; font: 800 19px/1.25 "Manrope", sans-serif; letter-spacing: -0.015em; color: var(--r-kopf); }
.vmb-teil-was { margin-bottom: 16px; font: 300 14.5px/1.45 "Work Sans", sans-serif; color: var(--r-leise); }
.vmb-teil-mehr { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 "Work Sans", sans-serif; color: var(--akzent-tief); }

/* Kurs oder selbst */
.vmb-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 30px 0 30px; }
.vmb-vergleich > div { padding: 22px 24px 18px; border-radius: 22px; background: var(--r-weiss); }
.r-band .vmb-vgl-kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 20px/1.2 "Manrope", sans-serif; letter-spacing: -0.015em; color: var(--r-kopf); }
.vmb-vgl-kopf .sym { color: var(--akzent); }
.vmb-vergleich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-band .vmb-vergleich li { position: relative; margin: 0; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.vmb-vergleich li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/20px "Manrope", sans-serif; text-align: center; }
.vmb-vergleich li.plus::before { content: "+"; background: var(--r-ok-hauch); color: var(--r-ok); }
.vmb-vergleich li.minus::before { content: "−"; background: var(--r-nein-hauch); color: var(--r-nein); }

@media (max-width: 960px) {
  .vmb-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vmb-teile li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .vmb-vergleich { grid-template-columns: 1fr; gap: 12px; }
  .vmb-teile { gap: 10px; }
  .vmb-teile a { padding: 16px 14px 14px; }
  .vmb-teile strong { font-size: 17px; }
  .vmb-teil-kopf b { font-size: 20px; }
}

@media (max-width: 420px) {
  .vmb-teile { grid-template-columns: 1fr; }
}
.weiss .vmb-vergleich > div { background: var(--r-hell); }